Archive for the ‘GPX’ Category

How to use GPX bounds to center the map

November 21, 2007

A GPX file has a bounds element that defines the coordinates of the bounding box of all the GPS points in the file. Here is an example:


<gpx version="1.0" ...>
<time>2007-10-24T02:45:26Z</time>
<bounds minlat="37.221354973"
   minlon="-121.987776104"
   maxlat="37.330222065"
   maxlon="-121.892523821"/>
...
</gpx>

Here is how you can use the Google MAP API to center the routes based on the bounds element in the GPX file:


var b = xmlDoc.documentElement.getElementsByTagName("bounds");
var sw = new GLatLng(b[0].getAttribute("minlat"), b[0].getAttribute("minlon"));
var ne = new GLatLng(b[0].getAttribute("maxlat"), b[0].getAttribute("maxlon"));
var bounds = new GLatLngBounds(sw, ne);
map.setCenter(bounds.getCenter(), 12);

Here is the above code in action: Los Gatos, Stevens Creek Reservoir bike trail

Bike Trails in the Route Player

November 20, 2007

I updated the Route Player to take the URL to the GPX file as a parameter to the player and you’ll get the elevation and the map. Here is the bike route for the Kennedy/Shannon Road Trail. Here is the Los Gatos to San Jose trail. This player is still quite raw, the performance for relatively complicated route is spotty (e.g., the Pacific Grove / Pebble Beach route)

You’ll need to edit the GPX namespace specification before you try to use the player.

Lake Lexington Bike Trail

November 19, 2007

Lake Lexington Bike TrailThis morning, Allen and I went for bike ride around Lexington Lake. The ride started and ended at down town Los Gatos. The ride was 11.72 miles and took an hour and a half. The ride is relatively easy and quite relaxing. There are a few climbs that provide a good workout.

The Route Player that I’m writing is more functional than before. When you click on the thumbnail, you’ll see the elevation chart plus a google map displaying the route. As you hover over the elevation chart, a maker is shown on the route. The chart is in Flex and the map in DHTML. Both the Flex and the DHTML parts read the GPX file and convert the XML data into elevation chart and map route. (The slider is still not working).

GPX Player with Flex & Google Maps

November 18, 2007

GPX PlayerThe 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.