n o t e 1 9 . c o m

This morning Bennett and I went for an early morning ride on Kennedy to Hicks and came back on Shannon. Here is the route. The roads were for most part free of car traffic. I guess everyone is busy doing their Christmas shopping at the super malls away from town. At the top of Shannon we saw a group of riders amongst them was our friend K.L. Seh.

This morning Tom introduced me to the Sheldon Road/Trail bike route. It is uphill alright — none stop climb. We started at a elevation of less than 200 feet and within less than 3 miles we were at 2519 feet. The panoramic views of San Jose, Silicon Valley and San Francisco are stunning. Most of the trail is in dirt road (not suitable for Road Bikes).

I’ve added DVD player like, Start, Pause, … buttons to the Route Player. It is still not quite hooked up right, so beware.

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

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.

This 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).

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.

You can mix DHTML and Flex in one page without too much effort. Here is how you do this:

1. Add a DIV for the DHTML element that you wish to include after the embed Flash tags.
2. Include the Google Map JavaScript as before in your HTML
3. Add JavaScript methods that you wish to call from Flex
4. In your Flex application, you can call these JavaScripts using the navigateToURL method. For example, as you move the mouse over the chart, the chartToolTip method is called which in turn updates the map.

   
   private function chartToolTip(e:HitData) : String {
      var s:String;
      s = "'" + LineSeries(e.element).displayName + "\n";
      s += "Time: " + e.item.x + " decimal hours\n";
      s += "Elevation: " + e.item.y + " meters\n";
      s += "Latitude: " + e.item.lat + " degrees\n";
      s += "Longitude: " + e.item.lon + " degrees\n";
      var u:URLRequest = new URLRequest("javascript:centerMap('"
            + e.item.lat
            + "','"
            + e.item.lon + "')");
      navigateToURL(u,"_self");
      return s;
   }

My Route Player is no where near complete yet, but now at least I have some of the answers on how I will use Flex and Google maps to create this player. The code for this player is here. See also this article which may give you clues on how you could “embed” Google Map in a Flex control.

You can also overlay a Flex control on top of DHTML based Google map. Click here for details. Here is an example of a Flex overlay.

I’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 motionbased.com 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.

This morning after adjusting our clocks and watches the night before, we went for a 33 miles bike ride along the magnificent Pebble Beach coast line. The bike ride was comfortable and challenging in parts. What struck me about the ride was how courteous the cars and other bike riders are along this route. A pleasant contrast to the inconsiderate drivers that we encountered last weekend along Stevens Creek Reservoir. The weather was absolutely perfect. No fog, sunny and warm. There are a couple of relatively steep hills. Here is the Google Map for this ride. The ride took over two and a half hours with average speed of 14 miles per hour.

This 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. There 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.