More Image Mapping: MapQuest and GeoRSS

In my previous post, Map Your Images With MapQuest, I showed how to map a geotagged image using the MapQuest API. I'm assuming most folks take more than one picture at a time, so I'll show you how to map a bunch of images at once using a GeoRSS feed. As you might imagine from the name, GeoRSS feeds allow us to encode geographical information directly into a RSS (or ATOM) feed. Here's an example of a feed that I created for a couple pictures that I had in my AOL Pictures public album.

<?xml version="1.0"?>
<rss version="2.0" xmlns:georss="http://www.georss.org/georss">
  <channel>
    <item>
      <title>Montezuma Valley Road</title>
      <link>
          http://links.pictures.aol.com/pic/7b90OA5PMemAgRxw-Ij7rsaqHs-UtOwKozn8v4xQp5Fd3Ig=_t.jpg
      </link>
      <description>
          Waiting on the side of the road
      </description>
      <pubDate>10-26-2007</pubDate>
      <georss:point>33.210533 -116.434683</georss:point>
    </item>
    <item>
      <title>Borrego Springs Overlook</title>
      <link>
          http://links.pictures.aol.com/pic/7b90OA5PMemAgRxw-Ij7rsaqHqbJn7W0VmH*v4xQp5Fd3Ig=_t.jpg
      </link>
      <description>
          Turnout on S22, great views of Anza Borrego Desert and Salton Sea
      </description>
      <pubDate>10-26-2007</pubDate>
      <georss:point>33.213317 -116.423550</georss:point>
    </item>
  </channel>
</rss>

As you can see, it looks pretty much like a typical RSS feed with the addition of a few tags specific to the GeoRSS namespace. In addition to 'point', there are also tags to specify line, box, and polygon geometries. I should mention that I'm showing the GeoRSS-Simple encoding. For the more GIS inclined, there is a richer GeoRSS-GML (Geography Markup Language) encoding as well.

Now that I have a feed, I can create a MapQuest map that will ingest the file and place my pictures on a map. I simply read/parse the XML file and use the MapQuest API to create a clickable POIs (points-of-interest) at each coordinate.

<html>
<head>
    <script src="http://btilelog.access.mapquest.com/tilelog/transaction?  \
     transaction=script&key=YOUR-API-KEY&ipr=true&itk=true&v=5.1"  \
     type="text/javascript"></script>
<script language="javascript">
var myXMLDoc;
var myPOIColl = new MQPoiCollection();
function openXMLFile(){
    myXMLDoc = document.implementation.createDocument("","",null);
    myXMLDoc.load("./georss.xml");
    myXMLDoc.onload = loadGeoRSS;
}
function loadGeoRSS() {
    myPOIColl = new MQPoiCollection();
    for (i = 0; i < myXMLDoc.getElementsByTagName("item").length; i++) {
        var title = myXMLDoc.getElementsByTagName("title")[i].textContent;
        var link = myXMLDoc.getElementsByTagName("link")[i].textContent;
        var description = myXMLDoc.getElementsByTagName("description")[i].textContent;

        var c = myXMLDoc.getElementsByTagNameNS("http://www.georss.org/georss", "point")[i].textContent;
        var junk = c.split(/ /);
        var myLatLng = new MQLatLng(junk[0],junk[1]);

        var myPOI = new MQPoi(myLatLng);
        myPOI.setInfoTitleHTML(title);
        myPOI.setInfoContentHTML(description + "<br><img src=" + link + "><br>© AOL Pictures");
        myPOIColl.add(myPOI);
    }
    myMap.replacePois(myPOIColl);
}
function initMap() {
   myMap = new MQTileMap(document.getElementById('mapDiv'),10,new MQLatLng(33.21269, -116.43035));
   myMap.addControl(new MQLargeZoomControl());
   myMap.addControl(new MQViewControl());
   openXMLFile();
}
</script>
</head>
<body onload="initMap()">
<div id="mapDiv" style="width:512px; height:384px; border:2px solid"></div>
</body>
</html>

Here's a screen-shot of the resulting map:

More resources:

Topic Centers