Author Archive

Custom Dynamic POIs in Flex 3.5 & MapQuest API

February 23, 2010

Recently, I had a fun problem to work on with our homegrown mapping application.  I wanted to create a POI that would bring multiple images together to create an icon on-the-fly so we didn’t have to make two or three dozen of them.  Normally you just embed a custom image to use as an POI icon.  Well, with all the type of things we might add to an icon it could cause the swf to get very large and the icons to become unmanageable.  You can think of it as if you were going to show a radio station on your map.  Perhaps you want to have a pretty little FM or AM graphic on it depending on the type of station.  Well you would have to make two or three graphics to make sure you get all the combinations traditionally.  Then embed those graphics into the system.  This way we have three seperate graphics and they are smaller in file size so they don’t add as much weight to the application.  In short, think of it Photoshopping with code.

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

//this is the rectangle placement and size it will pull from the bitmap

var rectItm:Rectangle = new Rectangle(3, 4, bmdMainPoi.width - 7, bmdMainPoi.height);

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));

Zooming like a pro with MapQuests AS3 api!

October 21, 2009

Wow, so I have had a ticket sitting in my queue for some time now that I didn’t think would be easy. What we had to do was zoom into a location while leaving that location in the same relative position for the user. After much thinking (about two hours) I came up with my solution. We use MapQuests AS3 api to interact with our maps.

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, and get the difference. Then apply the difference to the 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!

Working without worry.

August 26, 2008

Well, sitting here working today, I have been challenged with many things running through my mind just like everyone does. Sometimes, it not always business… shhh don’t tell my boss, not like I would be fired, but you really can’t control human nature. We all think about non-work things while we are working. Sometimes these things vary from what’s for dinner, to what character to play on WOW tonight or what game to play with the kiddos. For some people it gets worse, how much am I going to pay the credit card company, how am I going to pay the electric bill or worse, THE RENT!

While I was thinking about the dinner part, I was happy to remember, I BUDGET! Since I came to work here three years ago I started budgeting every single month. I never did that before. Before, I was worrying about some of those other things, never about the rent but sometimes about the credit card. Now that I do a budget, I have the peace of mind that I never worry about money. Not just because of the incredible salary we get working here, but because I plan this every month, like clockwork. It was super hard the first five months, then after a year, it was easier, but I was still tweaking it every other month. Trying to figure out if my spreadsheet, a yellow pad, or the budgeting software on MyTotalMoneyMakeover.com works better for me.

Well now that I have that figured out, getting married really was easy on the ole’ budget. I even budgeted my wedding too! We took a rough cut at what we needed and perfected it as we grew. Budgeting the wedding is one way to make sure your soon-to-be spouse is on board with you financially. When she can’t have that extra thing, or you can’t have the cool new underwater camera because it won’t fit in the budget, well… you do what is most important. When it was time to bring the money together, that was easy too! Just reflecting today on how nice it is to not have to worry about money ever any time – that is a victory in and of itself.

DO YOU BUDGET?