Tom Lauck’s Deseloper.org

Modest Maps: Yahoo Style Flex Component Markers

author:

View example and download source.

History

Creating software with mapping should be a figurative walk in the park given the tools available from the major map api players like Google and Yahoo. However, when creating software on the Flash platform that needed mapping, my immediate choice was to go with Yahoo, since they have a history of being Flash friendly.

After investigating and implementing the examples Yahoo providing using the ASTRA Web Api, and in the end the solution as a whole seemed to work, albeit not as robust or simple as I would have liked. All was apparently well until production time. Once I deployed to the web, with a DOCTYPE of xhtml-transitional, the map ceased to dispatch the onMapLoad event.

As an alternate AS3/Flex solution I discovered Modest Maps. The hitch was that using Modest Maps would require building custom own components (such as Zoom, Map Types, Markers, Etc), for modest maps displays the map only.

Solution

I really take a liking Yahoo’s map markers. There was a hitch, Modest Maps was written in AS3 only. Therefore, when I went to integrate a Flex based marker into the map, the two were incompatable.

My solution:

  • Reworked the Modest Maps core to use FlexSprite and UIComponent (which inherits FlexSprite).
    • As a site note: I’m not sure that was completely necessary and would have rather not touched the core, but I was in get’er done mode.
  • Built a marker that looked an functioned like Yahoo’s, with the ability to add any flex component inside.
  • Created some events that bubble up when the user clicks inside the marker.
  • Created functionality to open a selected marker, based on its Id.

I see my work as a mere starting point. As Google states, “release early, release often.” So, please view the example, download the source and play. I would love to see where things go with it, if any.

Jan 1 2008