MadClouds

MapQuest Flash/Flex API – Customize POI

Monday, May 11th, 2009 | Technology, Tutorials | No Comments

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.

Tags: API, flex, Job, Mapquest

MapQuest AS3/Flex Club Finder

Tuesday, May 5th, 2009 | Technology, Tutorials, Web Design, Work | No Comments

This past release Erich C. and I have been working on a new AS3/Flex Club Finder.  We currently have 2 different club finders on our website seen here:

Flash Club Finder:

24 hour fitness flash club finder

JSP Club Finder:

24 hour fitness jsp club finder

This new project is meant to allow our members to set their favorite clubs in their profile.  This would allow them to quickly access the club’s resources, such as group X class schedules, phone numbers, amenities, ect.  We were given one release cycle to duplicate the basic functionality our previous club finders delivered.  What a challenge! This is what we achieved:

24 hour fitness flex club finder

This was a very beneficial project for me because I was to help build it from scratch. We overcame some very technically confusing challenges (such as loading an unsecured swf application inside another secure swf application). I got a lot of exposure to Flex’s event driven architecture and enjoyed learning a ton about laying out components with Flex.

I’ll make another post about the specific challenges and how we resolved them.

Tags: flex, Job, Mapquest

Flex

Friday, October 17th, 2008 | General | 1 Comment

So at work we have had a lot of flex developers leave recently for higher paying jobs.  So my manager has asked me if I would like to work on some of the Flex defects that are not handled by anyone else.  This has given me a great opportunity to learn flex at my own pace as well as gain experience from some of the senior Flex developers.

Now as an idea to increase my Flex skill set, I’ve been thinking about converting this website (madclouds.com) into flex.  What’cha think?

Tags: flex, Job