Home › Blogs › a1lin1's blog ›

MapQuest Overlays via GML

Enable the Subscriptions block here!

In my previous MapQuest posts I've shown a couple of different ways to create POIs (point-of-interest) overlays on the maps. The MapQuest API, of course, is capable of various different types of overlays, including: lines (polylines), polygon, rectangle, ellipse and image. Like my previous post, I'll describe my overlay in an GeoRSS feed. For some variety, this time I'll use an ATOM feed, GML (Geography Markup Language) encoding and overlay a polygon. One of the advantages of GML is the ability to define a coordinate reference system. Other geography markup languages (such as KML - Keyhole Markup Language) often use a single pre-defined coordinate system.

Here is the sample GeoRSS ATOM feed that we will be using in this example.

<feed xmlns="http://www.w3.org/2005/Atom" 
      xmlns:georss="http://www.georss.org/georss" 
      xmlns:gml="http://www.opengis.net/gml">
  <title>Sample ATOM feed</title>
  <entry>
    <title>Palomar Mountain</title>
    <georss:where>
      <gml:Polygon>
        <gml:exterior>
          <gml:LinearRing>33.29035 -116.91856 33.33095 -116.88405 33.27199 -116.74449 33.22432 -116.76595 33.29035 -116.91856</gml:LinearRing>
        </gml:exterior>
      </gml:Polygon>
    </georss:where>
  </entry>
</feed>

One thing to note is that the GML specification for polygons require that the polygon be 'closed'. So the first and last coordinate in the polygon are the same. As you'll see from the map code, this is not required from MapQuest - which will complete the polygon between the last and first coordinate. With the feed, I simply read/parse the XML file and use the MapQuest API to create a polygon based on the coordinates.

<html>
<head>
<title>GML Polygon Overlays</title>
<script src="http://btilelog.access.mapquest.com/tilelog/transaction?transaction=script&key=YOUR-API-KEY&ipr=true&it
k=true&v=5.2.0" type="text/javascript"></script>

<script language="javascript">
MQInitDojo(initMap);
var myOverlayColl = new MQOverlayCollection();
var myXMLDoc;

function openXMLFile(){
    myXMLDoc = document.implementation.createDocument("","",null);
    myXMLDoc.load("./georss.xml");
    myXMLDoc.onload = loadGeoRSS;
}
function loadGeoRSS() {
    myPolygonOL = new MQPolygonOverlay();
    myPolygonOL.setBorderWidth(2);
    myPolygonOL.setColor("#454545");
    myPolygonOL.setFillColor("#454545");
    myPolygonOL.setFillColorAlpha(0.25);
    myPolygonOL.setKey("Polygon");

    for (i = 0; i < myXMLDoc.getElementsByTagName("entry").length; i++) {
        var title = myXMLDoc.getElementsByTagName("title")[i].textContent;
        var c = myXMLDoc.getElementsByTagNameNS("http://www.opengis.net/gml", "LinearRing")[i].textContent;
        var tmp = c.split(/ /);
        var myShapePts = new MQLatLngCollection();
        for (j = 0; j < tmp.length; j++) {
            myShapePts.add(new MQLatLng(tmp[j], tmp[j+1]));
            j++;
        }
        myPolygonOL.setShapePoints(myShapePts);
        myOverlayColl.add(myPolygonOL);
        myMap.replaceOverlays(myOverlayColl);
    }
}
function initMap() {
   myMap = new MQTileMap(document.getElementById('mapDiv'),8,new MQLatLng(33.26452, -116.80835));
   myMap.addControl(new MQLargeZoomControl(myMap));
   myMap.addControl(new MQViewControl(myMap));
   openXMLFile();
}
</script>
</head>
<body>
<div id="mapDiv" style="width:512px; height:384px; border:2px solid"></div>
</html>

Here's a screenshot of the resulting map.

More resources:

» Submitted by a1lin1 on November 15, 2007 - 2:16am.