n o t e 1 9 . c o m

The Route Player that I’m working on is coming along. The most difficult part of this pet project is finding time to spend on it. Anyhow, now it can read the GPX file (using Google Map AJAX APIs), display the route and as you mouse over the elevation chart (in FLEX), a marker is moved along the route to let you easily find out the steepest parts of the route, e.g.

There are couple of interesting aspects to this latest version of the player: reading the GPX file and positioning the marker. The function load below is called on page load. This initializes the map and reads the GPX data, and where each point recorded by the GPS device is converted to a GPoint. Here is an example of a GPS device point recorded in GPX 1.0 format:

<trkpt lat="37.222033069" lon="-121.983074527">
  <ele>120.782837</ele>
<time>2007-10-14T18:33:22Z</time>
</trkpt>

Here is the load function:

function load() {
   if (GBrowserIsCompatible()) {
   	initMap(720, 300);
	var request = GXmlHttp.create();
	request.open("GET", "http://javey.net/bike/map/player/14-oct-2007.gpx", true);
	request.onreadystatechange = function() {
	    if (request.readyState == 4) {
	        var xmlDoc = null;
	        var textLength = parseFloat(request.responseText.length);
	        if (textLength > 0) {
		    xmlDoc = GXml.parse(request.responseText);
	        } else {
		    xmlDoc = request.responseXML;
	        }
                var points = xmlDoc.documentElement.getElementsByTagName("trkpt");
	        var track = new Array();
	        for (var i = 0; i < points.length; i++) {
	            var point =
                      new GPoint(parseFloat(points[i].getAttribute("lon")),
                                parseFloat(points[i].getAttribute("lat")));
	            track.push(point);
	        }
	        var p = new GPolyline(track);
	        map.addOverlay(p);
             }
       }
       // Send the request for data
       request.send(null);
    }
}

When you hover over the elevation chart, the JavaScript function centerMap is called (view source the page). This function in turn moves the marker on the map.

var marker;
function centerMap(lat, lng) {
    if (marker != null) {
        map.removeOverlay(marker);
    }
    var point = new GLatLng(lat, lng);
    map.setCenter(point);
    marker = new GMarker(point);
    map.addOverlay(marker);
}

Next I need to modify the code to allow loading of GPX files dynamically (perhaps specified via a URL parameter, e.g.) and I need to add playback feature to the player.

This entry was posted on November 18, 2007 at 1:25 am and is filed under Bike routes, Flex, Google, GPS, GPX, Maps. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.