Thursday, October 22, 2009

Elevation Map using USGS and Yahoo Maps

** January 2012 Update
Yahoo has officially shut down support for Flex maps, so this example no longer works. For other options try the Google Flash Maps component (which is also deprecated now too)


This example combines two different services:
  • Flex Yahoo Maps - shows an interactive map component similar to Google Maps (Flex 3).
  • USGS Elevation Service - gets the elevation at a given Latitude and Longitude.

  • The Flex application below has the Yahoo Maps component on top and an AreaChart below which will show the elevation.
    Click on the map to add a marker. When you click again in a different location another marker is added, and the elevation chart at the bottom will show the elevation profile for the two points. If you want a more fine-grained elevation profile you can use the drop-down menu above the elevation chart to adjust how frequently the elevation is looked up (every KM, every 500m, every 200m). Keep in mind that the more elevations you look up the slower it is.

    You can also search for an address too using the search bar. The elevation at the search location will be displayed in the toolbar to the right of the search button. You can also show kilometer markers as well by checking the Show KM Markers checkbox in the top toolbar.

    Feel free to use this code for your own purposes. All you have to do is sign up for a Yahoo Maps key here:
    https://developer.apps.yahoo.com/wsregapp/
    And then edit the ElevationMapFunctions.as file and put your key in the APPID constant.
    Here is the Yahoo Maps API.

    There are also a few custom markers included in the source code that you can use and/or modify for your own needs.

    Use the mouse scroll wheel to zoom in or out (or use the +/- control on the map).

    This is a very simple example and a lot more could be done with it. It's really just to show how to get elevation data from the USGS Web Service, and how to add markers to a Yahoo Map.


    ** November 2009 Update
    I've updated the example to include another custom marker - the TitleMarker. This marker shows a label on the marker when it is collapsed. I've also added the option of Showing KM Markers which are displayed as TitleMarkers.
    I also separated the Elevation code into separate packages, and added some operations to allow querying for multiple elevations in sequence. When an elevation is returned from the USGS web service it is cached in the ElevationService class to speed things up.

    ** January 2010 Update
    I've restricted the number of elevations that can be looked up at one time to 30. This is to prevent someone trying to lookup the elevation every 200m between Canada and Europe. If you download the source code, and get your own yahoo maps application id then you can do what you like!

    ** January 2012 Update
    Yahoo has officially shut down support for Flex maps, so this example no longer works. For other options try the Google Flash Maps component (which is also deprecated now too)


    1 comment:

    robert said...

    PPC Agency Kent


    Yahoo search marking may appear a little bit challenging, it does have some amazing promotion resources to help you during your whole program.