Quick Demo - KML and CFMAP

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:


function AddKMLOverlay() {
	
	var map = ColdFusion.Map.getMapObject("mainMap");
	map.setCenter(new google.maps.LatLng(28.291889, -81.407793), 9);
	map.setZoom(9);
	
	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"); 
	map.addOverlay(DRIKML);
	
	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"); 
	map.addOverlay(ParksKML);
	
	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"); 
	map.addOverlay(CountyKML);
 
}

You can see a demo of what he came up with here.

(You can download the old code here: https://static.raymondcamden.com/enclosures/kmldemo.zip) 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.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

<script>
//<![CDATA[
function AddKMLOverlay() {
	
	var map = ColdFusion.Map.getMapObject("mainMap");
	map.setCenter(new google.maps.LatLng(28.291889, -81.407793), 9);
	map.setZoom(9);
	
	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"); 
	map.addOverlay(DRIKML);
	
	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"); 
	map.addOverlay(ParksKML);
	
	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"); 
	map.addOverlay(CountyKML);

}

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="34741" zoomlevel="9" name="mainMap">    
                    <cfmapitem name="marker01"    
                        address="1 Courthouse Sq, Kissimmee, FL 34741 USA"    
                        tip="Osceola County Administration Building"/>    
                </cfmap>
            </td>
          </tr>

        </table>

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

</body>
</html>
<cfset ajaxOnLoad("init")>
Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments