Ok, so I have some code that I would love to share with you fellow AS3 developers. I have been playing over that last few days with some of the new features in the 5.3 version of MQAPI for AS3 and I made a custom mxml component. This is a very simple component, and will allow the users to see county and state of multiple POI’s that are returned from a GeoCode search. Of course if you want them to see something else, well you can change it, but at least this will give you a start.
So the first thing you will need is something that contains a locationCollection you could just do a search so you can load this thing up:
private function getChoice(lc:LocationCollection,pc:PoiCreator):int
{
var choicePanel:PoiChoices = new PoiChoices();
choicePanel.lc = lc;
choicePanel.parentMap = myMap.getTileMap();
Application.application.addChild(choicePanel);
}
this should open the panel and allow you to do what you need to do.
Breakdown of the code
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” x=”50″ y=”5″ width=”400″ height=”300″ creationComplete=”init();”>
<mx:VBox id=”main” width=”100%” height=”100%” horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>
<mx:VBox id=”choiceHolder” width=”100%” height=”100%” />
<mx:Button id=”closeChoices” click=”this.parent.removeChild(this);” label=”Close”/>
</mx:VBox>
<mx:Script>
<![CDATA[
//here we just import everything that we need to use
import com.mapquest.tilemap.ShapeCollection;
import com.mapquest.tilemap.TileMap;
import mx.core.Application;
import com.mapquest.tilemap.pois.Poi;
import mx.controls.CheckBox;
import ActionScript.PoiCreator;
import mx.controls.Alert;
import com.mapquest.*;
import com.mapquest.LocationCollection;
//we set a couple things so you can send in the information to build it
[Bindable] public var lc:LocationCollection = new LocationCollection();
//we need to pass a reference to the map so this thing can show the POIs on the map
[Bindable] public var parentMap:TileMap;
public var currentPoiChoice:Poi;
//public var blnPauseMouseOvers:Boolean = false;
//this function acutally makes all the items to build this guy, it loops over the collection and builds the items in code. this reduces possible erros
public function init():void
{
this.title = ‘Point Of Interest Choices (‘+lc.getSize()+’)';
for(var i:int =0;i < lc.getSize();i++)
{
var myChk:CheckBox = new CheckBox();
myChk.label = GeoAddress(lc.get(i)).getCounty()+’/'+GeoAddress(lc.get(i)).getState();
myChk.name = i.toString();
choiceHolder.addChild(myChk);
//adding listeners so if the user hovers over the item, it shows on the map and removes when they leave it
myChk.addEventListener(MouseEvent.MOUSE_OVER,tempPlacePoi,false);
myChk.addEventListener(MouseEvent.MOUSE_OUT,removePOI,false);
//if the user checks/unchecks it, a function removes or keeps it displayed
myChk.addEventListener(MouseEvent.CLICK,checkPoi,false);
}
}
private function checkPoi(e:MouseEvent):void
{
if(CheckBox(e.currentTarget).selected)
{
CheckBox(e.currentTarget).removeEventListener(MouseEvent.MOUSE_OUT,removePOI,false);
currentChoice = int(e.currentTarget.name);
placePoi(currentChoice);
}
else
{
var GeoA:GeoAddress = lc.getAt(int(e.currentTarget.name));
var shpColMapPois:ShapeCollection = parentMap.getPois();
for(var i:int = 0;i < shpColMapPois.getSize();i++)
{
if(Poi(shpColMapPois.get(i)).getLatLng().lat == GeoA.getLatLng().lat && Poi(shpColMapPois.get(i)).getLatLng().lng == GeoA.getLatLng().lng)
{
parentMap.removePoi(Poi(shpColMapPois.get(i)));
}
}
CheckBox(e.currentTarget).addEventListener(MouseEvent.MOUSE_OUT,removePOI,false);
}
}
//this prepares to put it on the map on hover
private function tempPlacePoi(e:MouseEvent):void
{
currentChoice = int(e.currentTarget.name);
placePoi(currentChoice);
}
//this function acutally creates the POI it on the map
private function placePoi(intItem:int):void
{
//the PoiCreator is a AS3 object that i have made to display a POI with information you pass it.
var poiC:PoiCreator = new PoiCreator();
var GeoA:GeoAddress = lc.getAt(intItem);
poiC.createPoiGeoAddress(GeoA,this.addPoiToMap,null,’<br/>Address:<br/>’+GeoA.getStreet()+’<br/>’+GeoA.getCity()+’, ‘+GeoA.getState()+GeoA.getPostalCode());
}
//this function removes the item from the map when the user is no longer hovering over
private function removePOI(e:MouseEvent):void
{
parentMap.removePoi(currentPoiChoice);
}
//this actually adds the items to the map
public function addPoiToMap(p:Poi):void
{
parentMap.addPoi(p);
currentPoiChoice = p;
}
]]>
</mx:Script>
</mx:Panel>
The only other thing that you would need is my custom POI object, which is simple, it does the geoCoding for me if i need it, or it just makes the POI with information passed and returns the POI, you could just have something that does all that.
