Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
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
Medium Priority
?
275 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 140 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
What Is Blockchain Technology?

Blockchain is a technology that underpins the success of Bitcoin and other digital currencies, but it has uses far beyond finance. Learn how blockchain works and why it is proving disruptive to other areas of IT.

 

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 360 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 360 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

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

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

Now that Expression Web 4.0 (http://www.microsoft.com/expression/products/Upgrade.aspx) is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
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 add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Suggested Courses

670 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