Archive for the ‘GPS’ 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" ...>
<bounds minlat="37.221354973"

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

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">

Here is the load function:

function load() {
   if (GBrowserIsCompatible()) {
   	initMap(720, 300);
	var request = GXmlHttp.create();"GET", "", 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")),
	        var p = new GPolyline(track);
       // Send the request for data

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) {
    var point = new GLatLng(lat, lng);
    marker = new GMarker(point);

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.

Elevation Chart in Flex

November 11, 2007

Flex Elevation ChartI’ve been unhappy with the dojo based elevation charts I’ve created  from my hikes and bike rides, so last night I decided to create a Flex version of the elevation chart for the October 14th ride on Kennedy Shannon Roads Trail. The Flex chart was surprisingly easy to create. What I want to create is a Flex application that plays back the bike routes that I take. I’ve been thinking about this for a while and when I learned that is also doing something similar, I decided to spend sometime developing this player. The Flex code for this is here (see map.mxml). I now need to add a Google map to the page and move a marker on the map as the user moves the slider on the elevation chart.

When I was writing this app, I was looking for an ActionScript sleep function so that I could animate the slider; I realized that Flex has a much richer framework for animation using Effects.

Stevens Creek Reservoir Bike Trail

October 28, 2007

Stevens Creek Reservoir Bike TrailThis trail starts in Los Gatos, takes you thru Saratoga, Stevens Creek Reservoir, Cupertino, where you finally start your return to Los Gatos. The ride is 29 miles and takes about 2 hours and 45 minutes with average speed of 10.7 miles per hour. Stevens Creek Reservoir Trail Elevation ChartThere are three big climbs of almost 600 feet each. Here is the Google map of this ride.Here is the route of the trail using my Flex Route Player.

Los Gatos Creek Trail Extends to San Jose (almost)

October 24, 2007

This week a new extension to the Los Gatos Creek Trail was inaugurated. Now you can bike from Los Gatos to San Jose with minimal time on the road. The new trail has an entrance on Lonus St. and on Auzerais Ave. At some point in future the Los Gatos Trail is supposed to be connected to the Guadalupe River trail. Here is the Google Map trail for Los Gatos to San Jose. The ride to San Jose is easier than the ride back (here is the elevation chart of the ride to San Jose vs. the ride back).
New Los Gatos Trail

Kennedy/Shannon Bike Trail III

October 21, 2007

Kennedy Shannon Bike Route IIIToday we took another bike ride along the Kennedy/Shannon/Hicks roads trail. Quick Sliver Old Mine AreaThe bike ride was 28 miles and it lasted almost 3 hours. The Hicks Road ride is really steep no matter the direction. I added the minimum/maximum elevation markers to the map. The lowest elevation is about 66 meters and the highest is 433 meters a difference of over 1200 feet. Here is the elevation chart.

I found out last week (thank you Bennett) that the way I generate the Google maps does not work on Windows IE. I need to debug this problem. It does work, however, on Firefox and Safari.

Kennedy/Shannon Road Bike Trail II

October 14, 2007

Kennedy/Shannon Bike TrailThis is an easier Kennedy bike trail than the one I took last week. But it still has a couple of steeeeep hills and a number of panoramic views that take your breath away. The hardest hill Oct-14 ride elevation chartis on the way back on Kennedy just after Shannon. Here is the elevation chart (the elevation chart needs to be improved). Here is the Ruby code for the map and the elevation. The data from my Garmin GPS device is in GPX 1.0. The times are in UTC and the elevations in meters. The display of distance and elevations is in feet and miles. But when you import the data the distances are in meters.

I created the elevation chart in dojo JavaScript library hoping that it would work on iPhone, but unfortunately it doesn’t. Its time to forget about client-side charting and go back to generating chart images on the server.  

Kennedy Road Bike Trail

September 29, 2007

Kennedy Bike RouteThe Kennedy Bike Trial on a cruising bike can be kind of tough. It is very steep at points, but overall it is a great way to spend 3 hours. Here is the elevation chart for this ride.

Bike performance tracking

September 25, 2007

I need to add a feature to my GPS to Google map program so that it would display the performance graph, e.g., distance traveled, elevation gain, … but for now it will have to be manual.