Elevation Chart in Flex with Google Maps


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.

7 Responses to “Elevation Chart in Flex with Google Maps”

  1. How to embed Google Map in Flex « n o t e 1 9 . c o m Says:

    [...] The code for this example is here. Click here to see this Flex/HTML integration in action. See also this blog [...]

  2. Google Maps Creation Tools | geo2web.com Says:

    [...] Elevation Chart in Flex with Google Maps [...]

  3. Denis Says:

    Very slick example.. the only two times I have been to the Monterey area were on bicycle… the route profile takes on a whole new meaning when you are pedaling or hiking it. I am also interested in the code, will digest this in a bit. Thanks.

  4. jorge orengo Says:

    Dear,

    Occurs a error this line :
    private function chartToolTip(e:HitData) : String {

    Error : Type Was Not found or was not a compile-time constant:HitData

    Best Regards

  5. Fake Hermes handbag Says:

    Fake Hermes handbag…

    [...]Elevation Chart in Flex with Google Maps « n o t e 1 9 . c o m[...]…

  6. Stefano Says:

    Hi, I try to integrate your example with my map (link at: http://www.ugobike.net/map/animate.html?gpx=Giro-del-Garda-Orario.gpx&title=giro ) but the elevation chart is empty. What’s am I wrong?
    Thanks for reply.
    Stefano

    • Shahram Javey Says:

      Hi. Thank you for your comment. I’ve not looked at the code for a long time. So I’m afraid I won’t be able to help debug your issue. At the time using Flash was the only option. I wouldn’t use Flash now. There is now much better HTML options for drawing a graph. For example, highcharts. I suggest, that you rewrite the program in HTML or use on of the free versions, e.g. Runkeeper or Map My Ride. Good luck.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: