Raymond Camden's Blog Rss

Quick Demo - KML and CFMAP

20

Posted in ColdFusion | Posted on 03-03-2010 | 4,546 views

A while ago I shared a few emails with a reader who wanted to know if it was possible to do KML operations with CFMAP. For those who don't know, KML is an XML format for geographical data. From what I've read, it allows for various types of overlays and data "skins" over map or Earth data. The reader, Richard Zawadzki, and I went back and forth a bit, but it was he who finally got it working and graciously allowed me to share his code.

To use KML with Google Maps, you simply need to follow the previous examples I've shared - get the map object. ColdFusion gives you the hooks to do so. Once you have it, you can then follow Google's KML docs to work with your data. Here is a quick example of the JavaScript here used. Only the first call is ColdFusion specific:

view plain print about
1function AddKMLOverlay() {
2    
3    var map = ColdFusion.Map.getMapObject("mainMap");
4    map.setCenter(new google.maps.LatLng(28.291889, -81.407793), 9);
5    map.setZoom(9);
6    
7    var DRIKML = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF8&hl=en&vps=4&jsv=201b&msa=0&output=nl&msid=101779661887239513456.000465f6105cf06ca4c63");
8    map.addOverlay(DRIKML);
9    
10    var ParksKML = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF8&hl=en&vps=5&jsv=201b&oe=UTF8&msa=0&output=nl&msid=101779661887239513456.000465f607e578d46cf83");
11    map.addOverlay(ParksKML);
12    
13    var CountyKML = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF8&hl=en&vps=5&jsv=201b&oe=UTF8&msa=0&output=nl&msid=101779661887239513456.00047e28dce659094bcb5");
14    map.addOverlay(CountyKML);
15
16}

You can see a demo of what he came up with here. I've included the complete code below. (And once again - I'm really impressed with everything that can be done with Google Maps!) (Note - I forgot to mention this when I first posted, but Richard asked that I also credit Steve Gongage, his coworker, for working on this as well.)

view plain print about
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>Google Maps KML Overlays</title>
6
7<script>
8//<![CDATA[
9function AddKMLOverlay() {
10    
11    var map = ColdFusion.Map.getMapObject("mainMap");
12    map.setCenter(new google.maps.LatLng(28.291889, -81.407793), 9);
13    map.setZoom(9);
14    
15    var DRIKML = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF8&hl=en&vps=4&jsv=201b&msa=0&output=nl&msid=101779661887239513456.000465f6105cf06ca4c63");
16    map.addOverlay(DRIKML);
17    
18    var ParksKML = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF8&hl=en&vps=5&jsv=201b&oe=UTF8&msa=0&output=nl&msid=101779661887239513456.000465f607e578d46cf83");
19    map.addOverlay(ParksKML);
20    
21    var CountyKML = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF8&hl=en&vps=5&jsv=201b&oe=UTF8&msa=0&output=nl&msid=101779661887239513456.00047e28dce659094bcb5");
22    map.addOverlay(CountyKML);
23
24}
25
26function init() {
27    AddKMLOverlay();
28}
29//]]>
30</script>
31
32
33</head>
34
35<body>
36
37 <table width="100%" height="100%">
38 <tr>
39 <td align="center">
40 <table>
41
42 <tr align="left" valign="top">
43 <td>
44 <cfmap width="680" height="400" centeraddress="34741" zoomlevel="9" name="mainMap">
45 <cfmapitem name="marker01"
46 address="1 Courthouse Sq, Kissimmee, FL 34741 USA"
47 tip="Osceola County Administration Building"/>
48 </cfmap>
49 </td>
50 </tr>
51
52 </table>
53
54 </td>
55 </tr>
56 </table>
57
58</body>
59</html>
60<cfset ajaxOnLoad("init")>

Comments

[Add Comment] [Subscribe to Comments]

John Sieber said on 03-03-2010 at 11:08 PM #
Great to see this example as it is something I was hoping to do. I have some .kml files that I would like to display but I'm a still a little confused when trying to do this with my own files. In the countykml variable as an example, can the url point directly to a hosted kml file?
Raymond Camden said on 03-04-2010 at 6:13 AM #
I think so. But you have to ensure your web server is set up to serve the KML file correctly.
RickZ said on 03-04-2010 at 8:08 AM #
Hi John, yes, it can point directly to a hosted file. Like Ray said, you have to make sure that whatever webserver you're using is set-up with the correct mime-type for KML. For example, in Apache you'd add the following to your .htaccess file:

AddType application/vnd.google-earth.kml+xml kml

We use IIS and it's equally simple to add the correct mime-type.

You also need to make sure that your server is capable of back and forth communication with Google Maps. On our webstage server we were unable to map anything until we actually NAT'ed it out with a public domain.

Thanks Ray for your help and for posting this!
Michael De Jonghe said on 03-04-2010 at 4:23 PM #
Very cool.

I've been trying to get cfmap to do "larger custom icons" and had some success... but the cfmap and my javascript LatLng don't match up because CF throws an error when it sees a CENTERLONGITUDE greater than -90.0. WHAT??

Try this bit...

<cfmap width="900" height="800" centerlatitude="34.0000" centerlongitude="-118.0000" zoomlevel="13" name="map" showcentermarker="no">
</cfmap>

That should be the center of Los Angeles California... it's a small town maybe CF hasn't heard about it yet.

Any ideas for the readers.
Raymond Camden said on 03-04-2010 at 4:26 PM #
That's a known bug. I'd use an address for now, not a long/lat pair.
Michael De Jonghe said on 03-04-2010 at 4:50 PM #
I figured out the Longitude error. CF seems to be using a 360 degree approach.

Simply add the negative Longitude from 360 and you'll get the positive number you need to make CFMap work.

<cfset lng = -118.0000>
<cfif lng lt 0>
   <cfset lng = (360 + lng)>
</cfif>

<cfmap width="900" height="800" centerlatitude="34.0000" centerlongitude="#lng#" zoomlevel="8" name="map" showcentermarker="yes">
</cfmap>
John Sieber said on 03-04-2010 at 7:17 PM #
Thanks Ray and Rick,
Adding the mime type to my server made it work. Thanks for sharing this!
John Sieber said on 03-04-2010 at 10:27 PM #
One other item, if you need to show .gpx files as overlays you can add a mime type for gpx files and they will display as well. This will save me the step of converting my .gpx files to .kml.
RickZ said on 03-05-2010 at 8:24 AM #
Michael- We bumped into that same issue and came up with an identical workaround. Unfortunate, but a small hiccup in an otherwise incredibly easy to use way of incorporating Google Maps.

John - I'm glad that we were able to help out. That's awesome that it works with other overlay types beyond KML. I searched all over for some reference to doing this and never really found anything. Ray pointed me in the right direction of experimenting with using the standard Google Maps API functions. It never even dawned on me that it would be that simple. The only caveat was that I had to declare the setCenter in the javascript. Leaving that out throws a an error in Firebug and prevents it from adding more than one map layer.
theresa Valentine said on 05-20-2011 at 3:55 PM #
I've been trying to add a KML file to my application, and I can't see to get the KML file to draw using cold fusion tags. The kml file is ok, as I get it to draw in other apps.

<script>
//<![CDATA[
function AddKMLOverlay(){

   var map = ColdFusion.Map.getMapObject("myMap");
    map.setCenter(new google.maps.LatLng(44.212,-122.256), 13);
map.setZoom(13);


var boundKML = new GGeoXml("http://andrewsforest.oregonstate.edu/data/spatial/...;);
   map.addOverlay(boundKML);
}
function initialize() {
AddKMLOverlay();
}
//]]>
</script>

<table>
<cfoutput>
<h1>#dbcode#</h1>
</cfoutput>
<tr><td>
<cfmap width="680" height="400" centerlatitude="44.212" centerlongitude="-122.256" zoomlevel="9" typecontrol="advanced" name="myMap">
</cfmap>
</td></tr>
</table>
<cfset ajaxOnLoad("initialize")>

any ideas?
Raymond Camden said on 05-20-2011 at 3:56 PM #
Is the URL to your KML file valid?
theresa Valentine said on 05-20-2011 at 4:16 PM #
yes. I can get it to draw on when not using coldfusion tags.
Raymond Camden said on 05-20-2011 at 4:18 PM #
Do you mean if you don't use CFMAP and just use Google maps by itself?
theresa Valentine said on 05-20-2011 at 5:06 PM #
yes. I am trying to generate markers from a database query. I have one sample where I don't use cfmap and I can get the boundary and the markers, but the info windows all point to the same point (first record). I can get the info window to work if I use cfmap, but then I can't get the boundary kml to show. Sorry, my maps are behind firewall right now...
will see if I can get one working outside and post links.
theresa Valentine said on 05-20-2011 at 5:17 PM #
here is one that works for one place and one the boundary

http://andrewsforest.oregonstate.edu/data/place_in...
theresa Valentine said on 05-20-2011 at 5:42 PM #
can't get it to work on our internet, as it's version 5 or so of CF.. and it doesn't like my tags..
Raymond Camden said on 05-20-2011 at 8:51 PM #
Not sure what to tell you. You said you are on CF5 - CFMAP won't work there for sure. You can definitely do Google Maps via the JS api though.
theresa Valentine said on 05-23-2011 at 11:24 AM #
figured out the problem. The script tag needed to be within the <head> tag for it to work.
Just to clarify, our development site is on version 9 of CF, but our production site (old site) is on version 5. I'll try and post a link when we go live with the new site. Thanks to Aimee Lesieutre for figuring this out for me.
tdo said on 11-02-2011 at 11:12 AM #
any ideas on why this data won't work? it just pulls up the map but without the overlay.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps KML Overlays</title>


<cfajaximport params="#{googlemapkey='ABQIAAAAyBqdTNCO82gdyPcdR94xEBQLxw0Tb61Zhdk6a1DqnmRS3wNprhS8v8KU4__Dlq7yiLtBm5L1kZJSpQ'}#">

<script>
//<![CDATA[
function AddKMLOverlay() {
   
   var map = ColdFusion.Map.getMapObject("mainMap");
   map.setCenter(new google.maps.LatLng(33.710413, -117.951616), 9);
   map.setZoom(9);
   
   var NorthOC = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF&msa=0&am...;);
   map.addOverlay(NorthOC);

}

function init() {
   AddKMLOverlay();
}
//]]>
</script>


</head>

<body>

<table width="100%" height="100%">
<tr>
<td align="center">
<table>

<tr align="left" valign="top">
<td>
<cfmap width="680" height="400" centeraddress="92708" zoomlevel="9" name="mainMap">
</cfmap>
</td>
</tr>

</table>

</td>
</tr>
</table>

</body>
</html>
<cfset ajaxOnLoad("init")>
Raymond Camden said on 11-02-2011 at 11:19 AM #
Not sure. My old demo still seems to work fine.

[Add Comment] [Subscribe to Comments]