Month: July 2008

Dynamic Marker for Yahoo! Maps AS3/Flex

As I previously whined, I needed a lot of functionality in a Yahoo! marker for a Flex app that isn’t there “out of the box”. I use the term whined, because I personally feel like it’s something that should be “stock” for the lazy/beginner programmers. :::insert baby crying pic here:::

Surprisingly in all my travels, I couldn’t find one out there that fit my needs exactly. Some were close, some had way too much code, some weren’t up to do what I needed, etc… I came to the conclusion that I was going to have to write this one myself. A couple of sessions of prowling through blogs led to my extremely messy desktop to be filled with somewhere between 8-10 different Free Markers. I love free! I waded through all of them individualy and tested them out and also getting ideas from their base classes.

I ended up with this frankenstein of a class that is completely re-usable. It needs some serious code cleanup but I just finished it to a working state and thought I would just release it anyways. Its late and I’m sleepy. I will definitely update this later on when it gets to a better state but for now anyone that needs a quick fix. This will definitely do the trick.

Add this class to your project and instantiate it any way you’d like. Pretty easy, 2 lines of code…1 really long one, but still technically only 2 🙂

var marker:CustomIconMarker = new CustomerIconMarker( 0x1c436a, 0x1c436a,0x000000, “Summary Text!!!!”, “http://robotoole.com/blog/wp/wp-content/uploads/2008/07/home_icon.png”), 33.63672, -84.4280661, “marker”);

yahooMap.markerManager.addMarker(marker);

Example

Custom Icon Marker Class – Right Click save as

Unfortunately I can’t show the code for the entire sample app. I haven’t broken the entire thing down from the client’s framework completely, just commented out some states. I will 100% update this, so check back from time to time and yell at me to get a better version out.

As I said previously, this marker will allow for:

  • dynamic url to be passed in for the icon
  • easily customizable tool tip
  • click event dispatching inside of your flex application. No more external interface!!!

Its not much but it gets the job done and from the looks of all the blog comments out there, I wasn’t the only one that needs this. This is very barebones, but also very easily skinnable.you can just change the color for the current balloon and font text or if you’re good with drawing graphics with sprites, draw a new one.

good luck and feel free to add any ideas or complain about how ugly the code is.

just remember, I never said it was going to be pretty.