Thursday, October 06, 2005

Slabbekoorn's KML/GPX XSLTs, Robogeo & an E4X/Google Maps experiment

Some time back I produced a Google Maps page that would render the locations from a live GeoURL RDF feed. I also did some further experiments using XSLT with Google Maps, Google Earth, KML and GPX data formats.

Things elsewhere have moved on somewhat, William A. Slabbekoorn (aka Cybarber) has produced a set of XSLT to transform between the various GPX versions and Google Earth’s KML. He distributes these XSLTs with an IE specific format conversion hypertext application. After a quick scan, most of these XSL appear to be perfectly usable with other XSL engines (I tried some GPX conversion XSL with Javas Xalan and they worked well). There is now also a commercial application called Robogeo that can convert GPX and other formats into Google Maps html. I suspect there are probably other offerings about of which I am not aware.

As a further experiment with ECMAScript for XML (E4X), I thought I’d revisit my first GeoURL and Google Maps page but this time I would try and use E4X to do the XML processing. AFAIK, client side E4X is currently only implemented in Mozilla Firefox 1.5 Beta and Mozilla 1.8 Beta browsers.

I used Introduction to E4X: Part 1) Reading XML and Brendan Eich's E4X presentation, which incidentally uses Eric Meyer's S5 slide show system. An usuable E4X reference with examples is a little hard to find at present, the ECMA E4X spec is a little too technical for little 'ol me. You may like to compare the example below that uses E4X with my previous effort; is the XML feed processing easier to understand? I’ll let you decide.


<!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>
<script src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=ABQIAAAA4Wxrd1ZmQfRHvggZWM0QkxTwM0brOpm-All5BF6PoaKBxRWWERTxZC7TxHvaaZq75azqC6aFU4f4gA" type="text/javascript">
</script>
<script type="text/javascript;e4x=1">
//<![CDATA[
function onLoad() {

var request = new XMLHttpRequest();
request.open("GET", "geourl.xml", false);
request.send(null);

var rdf = new XML(request.responseText.replace(/^[\s\S]*<rdf:RDF/, "<rdf:RDF"));
var rssNs = new Namespace("http://purl.org/rss/1.0/");
var geourlNs = new Namespace("http://geourl.org/rss/module/");

// Get first set of co-ordinates to set the centre of the map.

var long1=rdf.rssNs::item[0].geourlNs::longitude;
var lat1=rdf.rssNs::item[0].geourlNs::latitude;

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(parseFloat(long1), parseFloat(lat1)), 4);

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

// Now add the markers from the list

var title,link,long2,lat2;
for each (var item in rdf..rssNs::item) {
title=item.rssNs::title;
link=item.rssNs::link;
long2=item.geourlNs::longitude;
lat2=item.geourlNs::latitude;
var point = new GPoint(long2,lat2);
var p = new XML("<p/>");
p.a.@href = link.*;
p.a.b = title.*;
var marker = createMarker(point, p);
map.addOverlay(marker);
}


}

function createMarker(point, html)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml(html);
}
);
return marker;
}
//]]>
</script>
<title></title>
</head>
<body onload="onLoad()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>

0 comments: