Archive for the ‘Flex’ Category

Newer Entries »

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.

Posted in Bike routes, Flex, Google, GPS, GPX, Maps | 4 Comments »

Elevation Chart in Flex with Google Maps

November 15, 2007

Flex with GoogleYou 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.

Posted in Bike routes, Flex, Google, Maps | 5 Comments »

Elevation Chart in Flex – using Timers

November 13, 2007

Flex Route ChartIn my bike/hike route player application, I wish to have the usual controls to manage the speed of the playback, just like a DVD player controls. So that when you click on “start”, I wish to move the time line from left to right on the elevation chart and at the same time control the location of a marker on the map.

Yesterday, I tried to use Flex Effects so that when you click on the Start button the slider starts, and this in turn will move the time line (mapped as a Flex LineSeries). I couldn’t get this work, namely I couldn’t figure out how to update the time line. Today I came across the Timer object. I added an animate method that gets called when you click on the Start button (source code map.mxml)


		private function animate() : void {
			var timer : Timer = new Timer(elevationChartLength);
			timer.addEventListener("timer", onTimer);
			timer.start();
		}

		public function onTimer(event:TimerEvent) : void {
			var i : int = event.target.currentCount - 1;
			var v  : String = elevationData.getItemAt(i)["x"];
			sliderMove(v);
		}

This works, but it still not quite right (e.g., there is no easy way to control the speed of the animation, e.g.). So the search continues.

Here is how I was using Effects:


<mx:Sequence id="myMove" target="{slider}">
  <mx:AnimateProperty property="value"
        fromValue="{timeMin}"
        toValue="{timeMax}"
        duration="{selectedItem.data}"/>
</mx:Sequence>
<mx:Button id="controlSliderButton" x="10" y="253"
        label="Start" click="myMove.play();"/>

But I couldn’t figure out how during the animation of the slider, I could also update the time line.

Posted in Flex | Leave a Comment »

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

Posted in Bike routes, Flex, GPS, Maps | Leave a Comment »

Newer Entries »
Follow

Get every new post delivered to your Inbox.