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.

5 thoughts on “Dynamic Marker for Yahoo! Maps AS3/Flex

  1. Hey I keep gettig

    1017: The definition of base class Marker was not found.

    would you know why?

    I had to change

    var marker:CustomIconMarker = new CustomerIconMarker((0x1c436a, 0x1c436a, 0x000000, “Summary Text!!!!”, “icon.png”), 46.430314, -116.983516, “marker”);

    as the ( was missing…

    any help here would be great.. I’m doing the AS3 flash way from here

    http://www.zeuslabs.us/2008/02/12/yahoo-actionscript-3-maps-api-in-flash-cs3/

    where you posted… your like the only one with the custom marker I could find… kudos to you
    cheers
    jeremyBass

  2. Nice start for a class. I’m taking it and cleaning it up. If you want a copy let me know.

    Note for other users…This class inherits from class Marker, so you do not need to use the CustomMarker class at all. Simply construct the HomeMarker object and add it to your Marker Manager.

  3. Hi Josh. Actually I want a copy =) I don’t think that I managed to clean up the code correctly..

Leave a Comment

Your email address will not be published. Required fields are marked *

  Wordpress Theme Protected By Wp Spam Blocker