MapQuest Devblog

"Ribbit / MapQuest / Kayak Mashup" is the title of a post by Andrew Powell from Universal Mind, introducing a great hotel search app he built using APIs from (big surprise!) Kayak, Ribbit, and our very own AS3 API.

Give it a read and check out Andrew's hotel search app. We also support shameless promotion, so help Andrew win a Wii by voting for his application on the 360|Flex Contest Page.

Hi! If you're reading this, you've gotten word we have this Developer Blog. A number of thoughts might be running through your mind as you hover over the "next" button on your feed reader or "close" on this browser tab:

"MapQuest has a blog?"

"MapQuest has a Developer Blog?"

"MapQuest has Developers?"

and if you're a mash-up developer: "MapQuest has APIs?"

Yeah, yeah, we know. Over the past few years we know it seemed that on the outside MapQuest seemed a bit behind the times, a Web 1.0 giant sitting on the bench of a Web 2.0 Internet. However, inside MapQuest there have been people hard at work trying to change our culture and perspective into something that can thrive in a "Web 2.0" world. We've been changing teams, processes, some developers switched to Macs -- serious, real change.

While we've been quiet, we've also been building things. More accurately, we've been rebuilding things. Starting with the 5.0 releases, we have rebuilt much of our geospatial web services platform from the ground up. Currently at version 5.2 and with 5.3 in beta, these releases contain lots of practical things, lots of cool things, lots of helpful things. Now we're making them free things.

Developer Choice

We're happy to finally introduce the MapQuest Platform: Free Edition. We've taken nearly all the features of our platform and made them freely available to developers. We believe that Free Edition provides developers a comprehensive toolset and flexible APIs so they can build well, whatever they want. Developers can choose the programming language of their choice and the features they need to build the applications they want, the way they want.

Here's some of the Free Edition features:

• Six APIs
  • We're giving developers greater flexibility and choice by enabling them to develop in a variety of programming languages and environments, they can even mix and match:
    • Java
    • C++
    • .NET
    • JavaScript
    • AS3 (Adobe ActionScript 3: Flash, Flex, AIR)
    • Our newest API: FUJAX (Flash Under JavaScript and XML), which allows developers to write in JavaScript, yet leverage the power of Flash.
    • and of course LOLcode. Nope, sorry, still no LOLcode suport.
• A Rich Mapping Interface for creating Rich Internet Applications with our JavaScript, AS3, or FUJAX APIs:
  • Aerial Imagery and Hybrid Views - Satellite imagery and aerial photography.
  • Smart Rollovers - Rollover windows that adapt their size and positioning on the map based on the content placed in the window.
  • Smooth Zoom - Animated transitions between zoom levels.
  • Globe View - A map of the world presented as an interactive globe.
  • "Flickable" Maps - Maps that continue to pan based on speed and friction settings.
  • Advanced Shape Overlays - Build apps that allow users to create and interact with a variety of overlays on maps.
  • Advanced Map Marker Features - With "declutter mode," automatically move collided markers (POIs) to alternate positions on the map with a customizable leader line pointing back to their original location.
• Unlimited Maps - Worldwide: Standard or Tiled.
• Unlimited Geocoding - Multi-line and Single-line Geocoding, Real-time Batch Geocoding, Reverse Geocoding, Postal Code and Town Geocoding.
• Unlimited Routing - Point-to-Point, Multi-point or Optimized.
• Simplified Data Management - MapQuest offers access to simple tools to upload and manage location information to help keep websites accurate and relevant.

You'll find more information on all of this on the MapQuest Developer Network, where you can also download the code and give the Free Edition a test drive. You can also find documentation, example applications and how-to articles to reference while checking out our APIs.

Thanks!

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>

Turn Your World Upside Down

Let's talk briefly about globes. You know, those ones that sit in libraries in period piece movies where some old guy in a leather chair sits next to it, smoking a pipe and calling Shakespeare a hack? Those globes. The ones where when you see them, you can't help but spin it as hard as you can in the slim hope the momentum will send it rolling across the room.

Well you can now create and spin your own virtual globe. We fixed a bug in the new full-axis globe view so you should now see improved performance when trying to spin it off your web page.

KML and GeoRSS Support: We got it.

Create a RemoteCollection, tell it the location of the feed and its format, and watch it get automagically sucked onto the map! And if you have another format, feel free to extend the feed loading classes to create your own loadable formats. Sorry, LOLcode support is still a no-go.

But wait, there's more!

Here's the list of other major updates in the just released 5.3rc2 Beta update of the MapQuest Platform:

• Beta Issues Forum now available - A forum for posting about Beta has been created in the Technical Resource Center.
• Old POI & Overlay Getters/Setters restored (JavaScript) - We've added back in the 5.2 getters and Setters for POIs and Overlays.
• POI & Overlay getValue & setValue methods added (JS and FUJAX) - The new getValue and setValue functions have been added to the POI and Overlay objects in FUJAX so that both the old, and the new methods of setting properties on these objects are now available in both JavaScript and FUJAX.
• Multiple Collections (JS, AS3, FUJAX) - Building on our efforts last month to combine POICollections and OverlayCollections into a single ShapeCollection, you can now add multiple ShapeCollections to a map.

Check out more information and samples on the MapQuest Developer Network Beta page.

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>