Solved

Need to build a ColdFusion App that will read international locations from DB and place markers onto world map.

Posted on 2007-03-29
16
265 Views
Last Modified: 2013-12-24
I am interested in finding some code to create a world map with dynamic markers.  My initial thoughts are that I will have a database with various international points and then write a coldfusion page to read the points from the database and place a marker on the world map.  I have been looking online and everything I am finding seems to be far more detailed than what I need (I don’t need to zoom in on a location or get any kind of directions).  I am just looking for a simple world map that can put dots on the map for every location specified in a database.  I would expect to have a maximum of a couple hundred markers.
0
Comment
Question by:SherryG
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 5
16 Comments
 
LVL 5

Expert Comment

by:rucky544
ID: 18815768
The Google Map API would do this nicely, It does has the zoom features etc. which you didn't require but it is so easy to integrate with that it would be the ideal solution.
You simply need to have the Geocodes for all your markers stored in a database, then plot them on.
0
 
LVL 1

Expert Comment

by:jduawa
ID: 18815776
you can use the google maps API
0
 
LVL 5

Assisted Solution

by:rucky544
rucky544 earned 35 total points
ID: 18815780
you can find an excellent tutorial here: http://www.econym.demon.co.uk/googlemaps/

Simply place your dynamic content in to the Javascript
0
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 

Author Comment

by:SherryG
ID: 18815792
I have briefly looked at the Google Maps API and it is far more robust than what I am looking for.  I was hoping for just a simple app that without any bells and whistles that would require disabling.  
0
 
LVL 5

Expert Comment

by:rucky544
ID: 18815816
Google maps is very simple to use and you dont have to include the zoom or the satellite views if you dont want to.

Just set the zoom level to show the entire world...

As far as i know this is going to be your easiest solution
0
 

Author Comment

by:SherryG
ID: 18824008
OK.  I have been messing with Google Maps API and I think I could potentially make that work if I can get data from an access database into an .xml file with the correct formatting.  For instance,  I have a databse with a table called locations.  The locations table contains two fields, latitude and longitude.  I need to export each record into a .xml file in the format:
<markers>
<marker lat="37.322" lng=" -121.213"/>
<marker lat="35.4358" lng=" -7.14333"/>
<marker lat="24" lng="90"/>
</markers>
Any thoughts?
0
 
LVL 1

Accepted Solution

by:
jduawa earned 90 total points
ID: 18824047
<CFsetting showdebugoutput="No">
<cfcontent type="text/xml" reset="yes"><?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<cfquery name="getData" datasource="#DSN#">
your query here
</cfquery>

<markers>
      <cfoutput query="getData">
            <marker lat="#getData.latitude#" lng="#getData.longitude#" />
      </cfoutput>
</markers>
0
 
LVL 5

Expert Comment

by:rucky544
ID: 18824090
why do you need it in XML... you can just loop over the query and output it in the javascript.
Like this:

<!--- Plot Accommodation --->
<cfoutput query="q_accom">
<cfif (isdefined("xcoord") and #xcoord# neq "") and (isdefined("ycoord") and #ycoord# neq "")>
<!--- Clean ' out of outputs --->
<cfset NewEstName = #jsstringformat(EstName)#>
            // obtain the attribues of each marker
            var lat = #ycoord#;
            var lng = #xcoord#;
            var point = new GLatLng(lat,lng);
            var html = '<div class="mapinfo">#EstName#</div>';
var label = '#NewEstName#';
var icontype = 0;
// create the marker
var marker = createMarker(point,label,html,icontype);
map.addOverlay(marker);
</cfif>
</cfoutput>

That is what i have used very successfully
0
 
LVL 1

Expert Comment

by:jduawa
ID: 18824102
i have used the XML way, both will work...
0
 

Author Comment

by:SherryG
ID: 18824145
jduawa...how do i get the info from the screen in to an actual file (data.xml).

or....

rucky544...this is the code I have using the xml file.  I am not sure how to convert it to using the javascript as you are suggesting.

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAFFZqRBA48pKOe6XHZPI7wyBS-gqcgm92WorltHgtz1cdU8H7bxhS4uEyZxqkUug4bDFgEPwrM38AOPg"
      type="text/javascript"></script>
    <script type="text/javascript">
       function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(35.4358, 7.1433), 1 );
            
            var icon = new GIcon();
            icon.image = "http://www.x.x.x/x/x/x/icon.png";
            
            icon.iconSize = new GSize(7, 7);
            icon.shadowSize = new GSize(0, 0);
            icon.iconAnchor = new GPoint(0, 0);
            icon.infoWindowAnchor = new GPoint(0, 0);
                              
      GDownloadUrl("/x/x/x/data.xml", function(data) {  
      var xml = GXml.parse(data);  
      var markers = xml.documentElement.getElementsByTagName("marker");  
      for (var i = 0; i < markers.length; i++) {    
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),                            
                                                parseFloat(markers[i].getAttribute("lng")));    
            map.addOverlay(new GMarker(point, icon));  
            }
      });
    }
      }
            </script>
0
 
LVL 5

Expert Comment

by:rucky544
ID: 18824219
just use the very basic google map example and instead of entering your own text, use dynamic text from the database.
Then loop over it with the query.
0
 
LVL 1

Assisted Solution

by:jduawa
jduawa earned 90 total points
ID: 18824265
GDownloadUrl("../xml/data.cfm");
the file would be a .cfm file but because of the content type tag is will appear as an xml doc...
0
 

Author Comment

by:SherryG
ID: 18824286
I think i figured out how to get the data to write to a xml file. ..

I have two files getdata.cfm and getlocals.cfm

-------Begin getdata.cfm-------
<CFsetting showdebugoutput="No">
<cfcontent type="text/xml" reset="yes">
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<cfquery name="getData" datasource="internationals">
select latitude, longitude from places
</cfquery>

<markers>
      <cfoutput query="getData">
            <marker lat="#getData.latitude#" lng="#getData.longitude#" />
      </cfoutput>
</markers>
-------End getdata.cfm-------

-------Begin getlocals.cfm-------
<title>Retrieve Locals</title>
<cfhttp url="http://x.x.x.x/getdata.cfm" method="get" resolveurl="false">
<cfset FileContents=#cfhttp.filecontent#>
<cffile action="Write" ADDNEWLINE="No" file="\\x\x\data.xml" output="#Trim(FileContents)#">
-------End getlocals.cfm-------

I need to do some additional testing...but I think this might work for me.  Do you see any reason that I shouldn't use this method?
0
 
LVL 1

Expert Comment

by:jduawa
ID: 18824299
just call the .cfm file...it will look like XML to google because of the content type
0
 

Author Comment

by:SherryG
ID: 18824438
jduawa...yes...that worked...i will post my final solution in just a little bit.
0
 

Author Comment

by:SherryG
ID: 18824484
Below is the code that worked for me.  There are two files that make up this solution...the map.htm file which displays the map with markers and the getdata.cfm file which calls the markers from my database.

-----START MAP.HTM-----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>International Map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAFFZqRBA48pKOe6XHZPI7wyBS-gqcgm92WorltHgtz1cdU8H7txhS4uEyZxqkUug4bDFgEPwrM38AOPg"
      type="text/javascript"></script>
    <script type="text/javascript">
       function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(35.4358, 7.1433), 1 );
            
            var icon = new GIcon();
            icon.image = "http://www.x.x.x/x/icon.png";
            
            icon.iconSize = new GSize(7, 7);
            icon.shadowSize = new GSize(0, 0);
            icon.iconAnchor = new GPoint(0, 0);
            icon.infoWindowAnchor = new GPoint(0, 0);
                              
      GDownloadUrl("/x/x/x/getdata.cfm", function(data) {  
      var xml = GXml.parse(data);  
      var markers = xml.documentElement.getElementsByTagName("marker");  
      for (var i = 0; i < markers.length; i++) {    
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),                            
                                                parseFloat(markers[i].getAttribute("lng")));    
            map.addOverlay(new GMarker(point, icon));  
            }
      });
    }
      }
            </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>
-----END MAP.HTM-----

-----START GETDATA.CFM-----
<CFsetting showdebugoutput="No">
<cfcontent type="text/xml" reset="yes">
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<cfquery name="getData" datasource="internationals">
select latitude, longitude from places
</cfquery>

<markers>
      <cfoutput query="getData">
            <marker lat="#getData.latitude#" lng="#getData.longitude#" />
      </cfoutput>
</markers>
-----END GETDATA.CFM-----



0

Featured Post

Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question