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
264 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
Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

 

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

Flexible connectivity for any environment

The KE6900 series can extend and deploy computers with high definition displays across multiple stations in a variety of applications that suit any environment. Expand computer use to stations across multiple rooms with dynamic access.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
WEB Service vs ??? 7 125
ColdFusion Rereplace 3 87
How do disable only TLSv1.0 in Oracle Sun One 7.1 Server 9 128
WEB Farm 6 79
When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. 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 :…
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. …

713 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