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
262 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
  • 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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

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

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

770 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