You can add a Flex control to a Google Map by taking advantage of DHTML DIVs and z-order tags. Here I’ve defined a Flex control to display the elevation chart associated with a route. In Flex, I specify the opacity of to be 0.5, this means that the chart will be partially transparent. The z-order of the Flex div ought to be higher than the z-order of the Google Map DIV.
Here are a few example of the Flex elevation chart control in action: Sheldon Road Trail, Kennedy/Shannon Trail, Pebble Beach bike route, & Los Gatos to San Jose bike route.
Adding the power of Flex to Google Map gives you to option of selecting the best tools for designing a rich user experience.
December 7, 2007 at 11:46 pm |
I for one would like to say – this is BRILLIANT stuff sir. Well done!
December 8, 2007 at 3:18 am |
Thank you Adrian, glad that you liked it. The entire soure code is also available just in case anyone is interested. Please see the note19 project. Here is the more updated version of the Flex overlay showing the elevation chart in terms of distance.
January 2, 2008 at 9:07 pm |
This is really great stuff! I have a website in Holland with a lot of movies of the current mtb-tracks (in case you don’t understand dutch
here is a direct link to the interactive map with the tracks(http://mtb.routefilms.nl/index_flash_vast.html).
I want to boost the look-and-feel of my website (and thus put it in Flex
and one of the things which can help me with that is the note19 project. Can I use it to display the mtb tracks in Holland? Again, great stuff!
January 2, 2008 at 11:38 pm |
Hello B. Thank you for your comment. Sure please go ahead and use the code. If you wish to contribute to it and thus make it better, let me know. Help is always welcome. BTW. Cool site that you’ve set up! Can you recommend a webcam that I could use when I go riding? I’ve always wanted to do that.
January 3, 2008 at 1:07 am |
[...] Map in a Flex control. You can also overlay a Flex control on top of DHTML based Google map. Click here for [...]
January 3, 2008 at 1:50 pm |
Hi SJ, thanks! I will let you know when I have something ready to put online. The camera I use I buy on a dutch website (but they have also translated their site: http://www.x-sportscam.nl/sjablonen/48/infotype/webpage/view.asp?objectID=521
I’m sure that he imports the cameras from the US and that they are much cheaper over there
I have the 420. the quality is not that good (when watching the movie on TV it is quit okay, but on a monitor their are a lot of artefacts.) Nevertheless I prefer a bulletcam because of the weight and comfort issue with other cameras (see also: http://www.petefagerlin.com/index.html). furthermore they now have very cool new stuff (e.g. a complete package with remote control). Maybe my next camera, for now I just use my 420 with a batterypack and the Archos 400.
November 4, 2008 at 9:30 pm |
Do you have the Flex project or this application? And the sourcecode, can you share it?
Anybody knows how can i make my own controls for googlemaps, like defining new Type of map buttons? Thanks a lot.
November 4, 2008 at 9:34 pm |
I need to do this in actionscript and flex, like this site http://envivo.andalucia.org/ i need help please!!!
November 11, 2008 at 4:16 pm |
Hello Javier, the code for this project in on Google Code. Please see http://note19.com/2007/07/11/note19-project/. The project flex-map is the one that you’ll need:
http://note19.googlecode.com/svn/trunk/flex-map/
The HTML code that displays the map and sets up the functions that you call from ActionScript can be viewed from the browser by viewing the page source.
December 2, 2008 at 11:00 pm |
[...] I didn’t do anything to enable this. Flash/Flex must have fixed this. Very nice! Here is the reverse idea: embedding Flash on top of Google Maps. Possibly related posts: (automatically generated)How to [...]