So, if you read my previous blog post and tried out the example code that I provided, then you should be pretty comfortable using Flex and ActionScript with the MapQuest 5.2 APIs. I'm truly amazed that the MapQuest development team made it so easy for developers to create location-based applications for Flex applications. And for that matter, just in case you didn't know, the MapQuest APIs are available for other languages like Java, .NET, C++, and JavaScript, but since I'm really enthusiastic about using Flex, so I'm going to focus on the Flex side of things.

So, let's say that there's a couple of "points"on the map that you're "interested" in observing. And let's also say that you want to see the "points of interest" (hence the name) together on the map at the same time. Well, today, I'll show you how to display points of interest (conveniently called POIs) within your mapping application. In the example code provided today, we're going to examine one of the many use cases where using POIs is very useful, meaningful, and convenient: real estate. So, let's say that I'm looking to buy a new home, and my agent wants to give me a customized website with all the homes that match my profile. The image below is the complete running application, from a fictional real estate company named, "The Real Estate Connection", displaying the homes that matched my profile.

So, as you can see, there are two homes that matched my profile, according to the image shown above. Here's the ActionScript function that plotted the two POIs that you see above:

public function main(): void{

  var zoomControl:ZoomControl = new ZoomControl();
  tilemap.addControl(zoomControl);

  // now let's set the points of interest
  var house1_coordinates:PointLL = new PointLL(40.720409,-73.994637);
  var house1_Poi:Poi = new Poi(house1_coordinates);
  house1_Poi.setInfoTitle("18044 Oak Lane");
  house1_Poi.setInfoContent("This a stunning 2 bed, 2 bath condo - $1.2M");
  var house2_coordinates:PointLL = new PointLL(40.720409,-76.994637);
  var house2_Poi:Poi = new Poi(house2_coordinates);
  house2_Poi.setInfoTitle("22365 Miller");
  house2_Poi.setInfoContent("This a great 2 bed, 2 bath condo - $400k");

  house1_Poi.setKey("A1");
  house2_Poi.setKey("B1");
  tilemap.addPoi(house1_Poi);
  tilemap.addPoi(house2_Poi);

  tilemap.setCenter(house1_coordinates,3);

}

So as you can see, I'm providing the coordinates of the locations that I want to show up on the map as a POI. Additionally, I can also provide a title and description (called the InfoContent) of the POI. You don't need to provide a key for your POI, unless you want to reference them later on. On the last line of the function shown above, I center the map on the first house's coordinates, and then I set the zoom level to 3. Obviously, this stuff is not hard, so take a look full source code below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.mapquest.tilemap.*" creationComplete="main();">
<mx:Canvas x="36" y="10" width="600" height="341" backgroundColor="#ffffff">
<ns1:TilemapComponent x="138" y="39" width="452" height="302" id="tilemap" key="mjtd%7Clu6y29u2n0%2C7s%3Do5-0ura9"/>
<mx:Text x="10" y="39" text="Dear Bruce, welcome to your personalized real estate website. Take a look at the properties that I have identified for you. Feel free to contact us if you have any questions." width="120" height="172"/>
<mx:Label x="183.5" y="10" text="The Real Estate Connection" fontSize="16"/>
<mx:Image x="10" y="176" source="user-home.png"/>
</mx:Canvas>

<mx:Script>
<![CDATA[
import com.mapquest.tilemap.pois.*;
import com.mapquest.PointLL;
import com.mapquest.tilemap.controls.ZoomControl;


public function main(): void{

var zoomControl:ZoomControl = new ZoomControl();
tilemap.addControl(zoomControl);

// now let's set the points of interest
var house1_coordinates:PointLL = new PointLL(40.720409,-73.994637);
var house1_Poi:Poi = new Poi(house1_coordinates);
house1_Poi.setInfoTitle("18044 Oak Lane");
house1_Poi.setInfoContent("This a stunning 2 bed, 2 bath condo - $1.2M");

var house2_coordinates:PointLL = new PointLL(40.720409,-76.994637);
var house2_Poi:Poi = new Poi(house2_coordinates);
house2_Poi.setInfoTitle("22365 Miller");
house2_Poi.setInfoContent("This a great 2 bed, 2 bath condo - $400k");

house1_Poi.setKey("A1");
house2_Poi.setKey("B1");

tilemap.addPoi(house1_Poi);
tilemap.addPoi(house2_Poi);

tilemap.setCenter(house1_coordinates,3);


}

]]>
</mx:Script>
</mx:Application>