Back in the day, there was always some glory about getting the first post on a popular topic on Slashdot. The first-poster got the opportunity to lead the discussion (or flame war) on the current topic that was on the site. Well, this is my first post on the AOL developer site, so let me introduce myself. I'm Bruce Hopkins, the author of the book, "Bluetooth for Java" by Apress, and I have have recently fallen in love with Flex and ActionScript programming. I've used Java for over 10 years (way back with JDK 1.0a) and it's great for server-side application development, but lacks in certain areas for client-side applications. Well, unless you've been in a cave for the last 2 years, you probably already know that Flex works extermely well for client-side applications, and plays nicely with integrating with Java EE, .NET, SOAP, and REST backends.
So, today, I'm going to introduce you to Flex application development, and we'll get our hands dirty with the MapQuest 5.2 APIs. I'm really excited that MapQuest has decided to make the latest version of their API free for developers, and since their mapping APIs support Flex 2 / Flex 3 it's the best choice for Flex developers for mapping APIs. Take a look at the code snippet below:
<mx:Canvas x="36" y="29" width="571" height="322"
backgroundColor="#ffffff">
<mx:Label x="19" y="10" text="Select Map Type:" width="126"/>
<mx:ComboBox id="mapTypeComboBox" x="19" y="29" width="148"
dataProvider="{mapTypeComboData}"
change="changeMapType();"></mx:ComboBox>
<ns1:TilemapComponent x="175" y="10" width="376" height="302"
id="tilemap" key="123456754322434"/>
</mx:Canvas>
It's only 5 lines of XML that allow you to define all the visual layout for a simple application. So, as you can see in the code above, I have a Label, ComboBox, and TilemapComponent wrapped in a Canvas. All the components are a part of the Flex SDK, except for the Map, which is a part of the MapQuest 5.2 APIs. When you signup for a developer account, you'll get a key where you'll insert into the "key" attribute of TilemapComponent. Now, take a look at the rest of the code:
<mx:Script>
<![CDATA[
[Bindable]
public var mapTypeComboData: Array = [ {label:"Map View", data:"map"},
{label:"Satellite View", data:"sat"},
{label:"Hybrid View", data:"hyb"} ];
public function changeMapType(): void{
tilemap.mapType =
mapTypeComboData[mapTypeComboBox.selectedIndex].data;
}
]]>
</mx:Script>
As you can see, I populated a simple Array with the data that feeds the ComboBox, and I defined a function to be called when the ComboBox is changed. And that's it! The image below shows a screenshot of our application:
So, as you can see, it's pretty easy to use Flex to create mapping applications with the MapQuest 5.2 APIs. Below is the full source code for you to copy.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="com.mapquest.tilemap.*">
<mx:Canvas x="36" y="29" width="571" height="322" backgroundColor="#ffffff">
<mx:Label x="19" y="10" text="Select Map Type:" width="126"/>
<mx:ComboBox id="mapTypeComboBox" x="19" y="29" width="148"
dataProvider="{mapTypeComboData}" change="changeMapType();"></mx:ComboBox>
<ns1:TilemapComponent x="175" y="10" width="376" height="302" id="tilemap"
key="mjtd%7Clu6y29u2n0%2C7s%3Do5-0ura9"/>
</mx:Canvas>
<mx:Script>
<![CDATA[
[Bindable]
public var mapTypeComboData: Array = [ {label:"Map View", data:"map"},
{label:"Satellite View", data:"sat"},
{label:"Hybrid View", data:"hyb"} ];
public function changeMapType(): void{
tilemap.mapType = mapTypeComboData[mapTypeComboBox.selectedIndex].data;
}
]]>
</mx:Script>
</mx:Application>
