Using The New Yahoo! Maps ActionScript 3 API - Creating A Custom Marker

At the end of my previous post on the new Yahoo! maps AS3 API, I mentioned that I wanted to learn how to create my own custom Marker class so that I could display my own graphic and text on the map. After some playing around, I figured out how to create a custom Marker class. You can view an example Flex application here (right click to get the source code).

The key to understanding how to create your own Markers is two-fold. First you can extend the Marker class provided by the Yahoo! maps API. Second, you should understand that the Marker class extends the flash Sprite class. The Sprite class can be used as the base building block for creating user interface components (like a Marker).

I had not used the Sprite class much since I've not had a need to create my own unique user interface component. So I had some learning to do. You can check out the examples in the Flex 2.0.1 language reference and the information about display programming in the Programming ActionScript 3.0 guide. I fortunately have the book Essential ActionScript 3.0 by Colin Mock which has good information about using class Sprite, building shapes using class Graphic, and adding text to custom designed user interface objects.

In my CustomMarker class I added a private _title property of type TextField. Class TextField is an ActionScript 3 class you can use for text display and input. I have a public set method that can be called to set the text property of the TextField object.

In my Flex application, I just needed to import my CustomMarker class. After that I could use the CustomMarker object just like I had used the Marker object in my previous example. Since my CustomMarker class had a public set title method, I could do the following to set the title (which is the text that appears in the TextField object):

_marker.title = theAddress;

It appears that the upper left corner of my CustomMarker is the location on the map for my Address object's latitude and longitude. So as I get better at designing my own custom user interface components I'll have to add some visual clue so that user will know that my CustomMarker is referencing this specific spot on the map (like the tail in the base Marker class).

Update: I created another version of my CustomMarker class that uses a photo as part of the Marker. See that version here (right click on the app to view the source code). You could also create an image using Adobe Fireworks or other program and use that image as part of your custom Marker class.

Update: I created another version of my CustomMarker class that lets the user click on the CustomMarker to get more information. See that version here (right click on the app to view the source code). When you create an object of the CustomMarkerURL class, you just need to add an event listener for the click event and have a function to handle that event. Since the Marker class inherits from class Sprite, it inherits the mouse events.