MapQuest Flash/Flex API – Customize POI

Monday, May 11th, 2009 | Technology, Tutorials

Changing the default POI in the MapQuest Flash/Flex API is pretty easy. The MapQuest POI API has built in methods to replace the default POI icon image, as well as a few other properties like the size, location and label of that POI. We’ll our company wanted to really customize the POI to show a dynamic label that changed with our results. I have successfully achieved this result with MapQuest’s JavaScript API on our jsp pages, but recently I’ve been working on a new Flex project that uses MapQuest’s services to show our clubs. The MapQuest documentation doesn’t provide a lot of insight on how to customize the POI label and the forums doesn’t explicitly tell you how to achieve this. So after a little tinkering I was able to get the desired results. It all comes down to overloading the POI class.

Inside our Flex project I created a new Action Script class called “POIExtended.as” which extends the Poi class:

public class POIExtended extends Poi
{
public function POIExtended(latLng:IPointLL, mapIcon:MapIcon=null)
{
super(latLng, mapIcon);
}

Inside this class I overrode the “setLabel()” method:

override public function setLabel(label:String, format:TextFormat = null): void {

var textField:TextField;

var mapIcon:MapIcon = this.getIcon();

textField = new TextField();
textField.text = label;
textField.width=30;
textField.height=30;
textField.y = 4;
textField.x = 3;
textField.mouseEnabled = false;

if (format) {
textField.setTextFormat(format);
}

mapIcon.addChild(textField);

}

This code moves the label assigned to the POI to the center of the icon. I ran into a problem where the mouse over area on the POI was too big, causing a huge area that targeted the POI. By limiting the height and width to a size just smaller then the POI icon image and disabling the mouse, it fixed this problem.

MadClouds

These clouds hold a grudge…