Modest Maps: Yahoo Style Flex Component Markers

author: tom

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.

Tags: Flex, Map Markers, Modest Maps, Yahoo Maps
Posted in Flex | View blog reactions

9 Responses

date: March 13th, 2008

Great work! This was very helpful for me in getting up and running with my own markers.

Also, I appreciated your creativity with the JSON class. It gave me insight
into how I could extend HttpService for my own JSON needs.

I used the mx.rpc.http.mxml.HTTPService version (as opposed to mx.rpc.http.HTTPService;)
to incorporate the showBusyCursor functionality.

spoken by: jking

date: March 13th, 2008

hi,Tom:
I come from China
I’m downlaod the source code.It run fine.
But It can’t show marker,when update the modestMaps.

The old code is:
public function putMarker(id:String, location:Location, marker:UIComponent=null):void
now it changed:
public function putMarker(location:Location, marker:DisplayObject=null):void

spoken by: mreay

date: March 14th, 2008

Great work! I’m trying to “steal” your custom marker for the AS3 Yahoo Maps in Adobe AIR… I hope you don’t mind that I reuse the marker you’ve made.

Keep up the great work!

spoken by: Michael van Leest

date: March 14th, 2008

@mreay:
As I stated in my explanation, my solution was only possible by getting the modifying the ModestMaps core:

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.

DisplayObject and Sprite are part of the the Flash core. Flex extends the Flash core to FlexSprite and UIComponent so that things like Containers and Canvas are possible. And an mxml marker is some sort of Container usually.

I would be very interested in another solution, as I generally don’t like to edit core files. In this case, the core didn’t seem totally optimized for Flex.

spoken by: tom

date: November 17th, 2008

Can we feed the data using XML?

spoken by: Nuwan

date: November 29th, 2008

@Nuwan Yes, but it you will have to make some modifications. For instance, the service I am using is set up for JSON. The built in Flex HTTPService will likely do what you need.

spoken by: tom

date: December 3rd, 2008

Hi really this is awesome!!!

spoken by: Arthi

date: May 5th, 2009

Very nice. What is the “active content that could access your computer” when I run it in IE6. (I have seen your article about IE6 people, so I have my shield up!) I am relatively new to Flex/Flash, so this example of Modest Maps has been a big help. Thanks.

spoken by: Larry

date: September 14th, 2010

hey, i’m using your component and when i compile it none of the markers show up. any ideas?

spoken by: anton

Jan 1 2008