The next thing I noticed is that there are also sets of tools for each job.  Some tools are complicated while some are as standard as alloy wheels today.  But one thing I think people are starting to miss on maps is the ability for the map to “be alive”.  Static maps might have their place as a picture for a log or something, but for a UX setting, well they suck.  So I go to any given site and they give me a map that shows me the location I have been longing for all my life.  “That is fantastic!  I wanted to know where that place was yes!  Good, let me zoom in a little just to… oh wait.  What is going on, the mouse wheel doesn’t zoom?  Ok, well lets look for some buttons right… because I need to see… where the hell are the buttons?  “  Does that sound familiar to you?  That has happened to me on a couple of different sites now and I am starting to get really annoyed.  Just because you can show your location to people doesn’t mean they “know” where the place is.  They should be able to zoom and pan around in the map.

So how does this affect the user?  Well, the user will do one of two things depending on motive:

1. Leave your site and say they don’t care about your store. (If the user is just hoping that you are close and isn’t sold on you, you just lost the sale)
2. Open up a “Trusted” mapping solution and see if they can locate your store. (If the store is new or not mappable, you probably lost that business too)

Think your map doesn’t need the basics?  Think of why you put the map on your site in the first place.  Most of you would say something like “I want my customer to have an easier time finding our store.”  Fantastic and quite ironic, because the customer is coming to your site to find out how they can buy your product or visit your store.  Now, they can’t pan around the map or zoom in for a better look so they can see just how they can get there.  You are defeating your own purpose if you are doing this.

In short, make sure that you have all the tools your users are going to want, especially when the tools are the basics.

The last of the findings:

1. Polygon Overlays are fun but watch for two things:
   1. Copy does not make a true copy.  It is giving by reference the Drawing of the polygon of the map to the new Polygon you are making.  This will cause greif and utter frustration that took me about 3 days to figure out.  The Fix:  Create a new polygon overlay and just get the shapepoints from the old one and let the Polygon overlay draw you a new polygon.
   2. setVisible = visible.  So the old setVisible function looks like it might get depricated and go to visible.  They both do the same thing just pay attention if your visibility issues start popping up one upgrade.
2. DisplayObjectOverlays.displayObject:  When you create a display object overlay and add content to it, you will need to call do.addChild() with the content you just assigned.  What happens?  You will not see your object on the screen.  If you add the child your object will appear.
3. There seems to be an issue with loading tiles with the new version of Adobe Flash Player 10.1.  This really is not a problem with the new API but it is an issue with the player itself and happens with 5.3.2 as well.  There is a fix out there for that too that can help.  The MQ guys say you can just pan 0 % to make sure that it doesn’t happen to you.  What I saw were grey and white tiles left of the map when I used the zoom wheel, panned the map or changed the map type.  So I wrote a fun function called adobeBugShift() to help out with that.  Here is what I am using, I just extended the map and added it in as a function:

 public function adobeBugShift():void
{
this.panSouthWest(0);
}

The people at MQ know about the issues and I am sure they will be on them soon.  I don’t have a timeline for them, but I bet they make it in the next couple of releases that come out.

What excites me?  When things just work better and faster.  Here are some of the things that seem to have changed.

• Polygons produce faster, we throw hundreds or thosands of these things out there and it works very well, seems a bit faster.
• Declutter has some animation and is faster.  Oh and I didn’t even have to change much there.
• Thanks to the new Flash player and better code from MQ the footprint is way smaller.  Did flash player even do GC before because wow!?

Have you upgraded from 5.3 to 6.0?  Do you want to?  Honestly it was not too bad, just took some time to work out the few bugs that we had because I have honestly 100 custom classes that utilize their classes and well it only really took me a week to do.  I had a lot of other projects in the fire as well.  With these tips and updates you guys should be able to do it much faster if you were doing some similar things.

 function addPoi(object)
{
    if(object.location != null)
    {
      var geoLocation:GeocoderLocation = new GeocoderLocation;
      //set all the GeocoderLocation stuff here
     makePoi(geoLocation);
    }
    else
    {
     var geoCoder:Geocoder = new Geocoder(new MapConstants().MAP_KEY);
     var address:GeocoderLocation = new GeocoderLocation();

     geoCoder.addEventListener(GeocoderEvent.GEOCODE_RESPONSE, ProperResult);
     geoCoder.addEventListener(GeocoderEvent.GEOCODE_ERROR_EVENT, SearchError);
     geoCoder.addEventListener(GeocoderEvent.HTTP_ERROR_EVENT, HTTPError);
     address.street = lampoPoi.getAddressLampo().getStreet1();
     address.city = lampoPoi.getAddressLampo().getCity();
     address.state = lampoPoi.getAddressLampo().getStateCode();
     address.postalCode = lampoPoi.getAddressLampo().getPostalCode();
     geoCoder.geocode(geoLocation);
    }
} 

public function ProperResult(evt:GeocoderEvent):void
{
     makePoi(geoLocation);
}

Decluttering is actually much easier to change than I thought.  This simple function will make you decluttering work in 6.0.  Before I was thinking you would have to put everything in a shape collection but actually you can just call it on the map itself.  This is really nice to be able to do.  THANKS MAPQUEST!  Oh and there is Animation added now.  Pretty sweet.

  private function initDeclutter():void
{
 var cd:IDeclutter;
 cd =  new ForceDeclutter();
 var lines:LeaderLines = new LeaderLines();
 this.myMap.leaderLines = lines;
 this.myMap.declutter = cd;
}

to get the Display Objects:  If you were using the myMap.getShapes() function you can call myMap.getDisplayObjectOberlays()  this will return a shapeCollection just like you had before.  You could also call myMap.shapes that returns an Array though… and then you have to deal with the array instead of a ShapeCollection.

When working with the ShapeCollection:  getSize() is now length, and get(i) is now getShapeByIndex(i)  still gets you what you need.

I had to tell the map when I am drawing on it to Disable the Drag by saying myMap.tileMap.enableDragging(false);

My cursors were Bitmaps and now they need to be Sprites so just create a new Sprite and call sprite.addChild(bitmap);

Those are all the changes that I have found that revolve around all my drawing tasks.  Some of this would also fall under some other tasks, but this should get us going.  These changes so far are good and easy to fix.  Thanks for the help so far MapQuest!

1. PointXY is now Point(flash version of Point)
2. GeoAddress and Address looks like it has become GeocoderLocation (you can load some of the same info over this item as your could the other two. I have still not been able to complete the build yet so I don’t know.)
3. Decluttering is a whole new ball game. I have not tackled this one yet, but it looks promising. I have been saving that one for later. I am not sure if i was using shape collections before. The new decluttering looks like it only does it per shape collection. You could at worse create one big shape collection and throw that one on the map.
4. I noticed a new Object Parcel. I am not sure what it is doing at this time.

I still am figuring out a couple more things but this seems to be some of the big things. I spent an hour or so just cleaning up all the old setters and getters from before into just setting the public variables.

I must stress how much I like their new GeoCoder Object. It is the way you used to use the Exec object. It is a cleaner use and will save me a class that I was using to setup the Exec for the send.

looks like TilmapComponent.addPoi() now should be TilemapComponent.addShape().  It looks like you can pass the POI right into it since it takes an IShape and it works ok.

Many Interface classes have been dropped.  You should now be able to use the base classes. 

I got a good email and post from the MapQuest Team, thanks Brian!

Here is the post:  There really is no upgrade path since the v6 sdks (AS and JS) were redone from the ground up. Some classes from v5 were abandoned, like the “I” interface classes. These have been replaced with their base classes: IRectLL is RectLL and IPointLL is now PointLL…

The Exec class for geocode, search, and route functionality has been completely replaced by the web services. Further documentation for the web services can be found in the left hand navigation menu.

The sample code provided for v6 should show most of the changes you need to make. http://www.mapquestapi.com/sdk/as/asfxsamples/

I love the MapQuest team though.  They are willing and ready to help out whenever you need it.  Forums and some quality service are just a call or email away.

Thanks guys for the heads up.

So downloaded the new API.  To my surprise it was only one SWC file as the others have been multiple files.  Cool, at the first look it is a good thing that they are down to 1 file, less for subversion to handle.  Then I did the dreaded thing;  I compiled the code.  50 errors.  YIKES, what happened…?  In saying with every upgrade come the loss of some of the old code.  I have experienced this other times and it can be very frustrating.  I took to digging into the documentation and trying to figure out what is going on.  There is a lack of documentation that lets me know what objects and functions have been depricated and what I can use to replace what I was using.  Some of the quick ones are (IPointLL, Exec, GeoAddress, IPointLLCollection, LocationCollection, Address, PointXY).   It seems we also lost some of the methods in a PolygonOverlay(setFillColor, setFillColorAlpha, setColor, setColorAlpha, setBorderWidth) which I was overriding to accomplish some of our goals.   

To start going through this I am going through there tutorials and example code trying to see what changed. 

Exec has been replaced with a Geocoder object.  I like this object a lot better.  All it seems you need to give it is the API KEY you get from MapQuest.  Good change from all the other information that you had to give to the Exec object.

GeoAddress is now the GeocoderLocation object.  However it is lacking the actual functions that bring back the public variables which I had coded all over the place. 

LocationCollection has changed to become a standard Array which you might want to use ArrayCollection where you were using LocationCollection.

Poi also had a little change, it looks like poi.getLatLng() is just poi.latLng (my guess is that a lot of the getters and setters are off of the objects now.

This is all I have found so far in sifting through the tutorials and trying to get updated.  If anyone else has gone through the upgrade please let me know what you have found that has changed.  I plan ok keeping this updated as I go on as well.  Keep posted for more of the updates. 

So here comes the How-to.  It seems pretty simple now that I am writing it, but it was a little bit of a pain to figure it out.  In English what I want to do is bring in the image as a class, turn it into a Bitmap then get the Bitmap-Data out of it.  Call Merge on Bitmap data and pass in the proper information and get back some new Bitmap data.  We will then turn that into a Bitmap and put is into a Map Icon.

/*We can set this as a class/global variable so the functions know what kind of multiplier we need.  This is just a number to know how much the merge should combine the two images*/

private var mult:uint = 0xff; //

private function createPoiBitmap(mainPoi:Bitmap,initials:String,fontSize:Number = 10):Bitmap
{
//this is the main graphic for the POI that I need to get.
var bmdMainPoi:BitmapData = mainPoi.bitmapData;
//this is the bitmap that will house the whole picture.
var holder:BitmapData = new BitmapData(45, 34, true, 0X00000000);
//this is the main POI that got pulled
var rectItm:Rectangle = new Rectangle(3, 4, bmdMainPoi.width - 7, bmdMainPoi.height);
//this is the rectangle placement and size it will pull from the bitmap
var ptItm:Point = new Point(8, 9);//this is the point at which the merged item will be placed.
if(initials.length > 0)
{
   //this is initial badge that we need to put on
   var bmdBadge:BitmapData = getBadgeWithText(initials,fontSize).bitmapData;
   //this is the name badge that was made.
   //this is the rectangle placement and size it will pull from the bitmap
   var rectBadge:Rectangle = new Rectangle(0, 0, bmdBadge.width -1, bmdBadge.height - 1);
   var ptBadge:Point = new Point(13, 0);//this is the point at which the merged item will be placed.
   //add the new items to the holder image
   holder.merge(bmdBadge,rectBadge,ptBadge,mult,mult,mult,mult);
}

holder.merge(bmdMainPoi,rectItm,ptItm,mult,mult,mult,mult);
//make the holder image a bitmap and add it to the screen
var bm1:Bitmap = new Bitmap(holder);
return bm1;
}

The following piece of code is actually adding the Text into the image.  It is going to load up an object that I am caching so it doesn’t have to build it every time.  I took out that if statement so you could see how it works.

private function getBadgeWithText(initials:String,fontSize:Number = 10):Bitmap
{
var object = getMyObject(); //this gets me a custom object so i can get and set bitmaps
var bmdInitbadge:BitmapData = object.getEmptyBadge().bitmapData;
var textitm:BitmapData = new BitmapData(10, 30, true, object.getBackgroundColor());
var txtFrmt:TextFormat = new TextFormat('Arial',fontSize,0xFFFFFF);
var uit:UITextField = new UITextField();
uit.background = true;
uit.backgroundColor = object.getBackgroundColor();
uit.text = object.getInitials();
uit.setTextFormat(txtFrmt);
var textBitmapData:BitmapData = ImageSnapshot.captureBitmapData(uit);
var rectText:Rectangle = new Rectangle(3, 3, 14, 10);
var ptText:Point = new Point(8, 7);//this is the point at which the merged item will be placed.
textitm.merge(textBitmapData,rectText,ptText,mult,mult,mult,mult);
bmdInitbadge.merge(textBitmapData,rectText,ptText,mult,mult,mult,mult);
var bmReturn:Bitmap = new Bitmap(bmdInitbadge);
object.setCompletedBadge(bmReturn);
return object.getCompletedBadge();
}

At this Point another function that called all this can set the Bitmap into the MapIcon

var icn:MapIcon = new MapIcon();
icn.setImage(createPoiBitmap(getMainIcn(),"ME",10));

The principle is simple. Figure out where the users mouse is. Get the XY, zoom in figure out what LatLng is in that XY Position, get the difference. Then apply the difference to center point and set the new center point.

public function zoomMapKeepingXYCoords():void
{
var mouseXY:IPointXY = new PointXY(myMap.mouseX, myMap.mouseY);
var mouseLL:IPointLL = myMap.pixToLL(new PointXY(myMap.mouseX, myMap.mouseY))
setZoom(myMap.getZoomLevel() + 1);
var newLLatXY:IPointLL = myMap.pixToLL(mouseXY);
var latDiff:Number = mouseLL.lat – newLLatXY.lat;
var lngDiff:Number = mouseLL.lng – newLLatXY.lng;
var centerAftZoom:IPointLL = myMap.getCenter();
var newCenter:IPointLL = new PointLL(myMap.getCenter().lat + latDiff,myMap.getCenter().lng + lngDiff );
myMap.setCenter(newCenter);

}

Have Fun!

The tilemap is what actually need the setting done, so in your code you can say:

myMap.getDeclutterMode().setDeclutterMode(2);
//you can also use 1 but in my opinion 2 looks much more intuitive.  0 will set it back to no decluttering 

So on the baseline that is it.  So if you extend the map you can actually catch some neat functionality.  Do the following to get a neat declutter when hitting a specific zoom level or breaking a zoom level barrier.  A quick word of advice.  Declutter in mode 2 might make the flash player take longer than hoped on large data sets.  If this is the case you might want to do something like below or even turn off deluttering when retrieving POIs then turn it on once you put them on the map.  I found that it took the player some significant time to show the POIs when I have too many POIs. 

public function setDeclutterByZoom(e:TileMapEvent):void
{
if(this.getZoomLevel() >= 7)this.getDeclutter().setDeclutterMode(2);
else
this.getDeclutter().setDeclutterMode(0);
return
}

Like I said before I like to use 2 because it looks much easier to the users I have.  

If your users like this then you might want to also grab the dragable ability of the POIs.  But if you have a complex application you might run into a problem if you are running an event listener on a mouseup, mousedown or something of that nature on the map.  I was doing that because it was the simple thing at the time because I was waiting for a Click For Drag so I could recenter my map.  So I made sure I moved that event and it worked flawlessly.  Just add the following line to your POI.

myPoi.setDraggable(true);

You can also add use this function to let your users drop those POIs where ever they want.  Just drag and drop, all done!    
myPoi.setSnapback(false);

This is pretty striaght forward stuff, but really watch you events as it will have some crazy interaction with the POI dragability.