MapQuest Developer Blog

Archives for Bruce Hopkins

  • Using Map Overlays with Flex and the Mapquest 5.2 APIs

    Ok, I was driving (very carefully, mind you) on a very sunny afternoon to the airport, and I got a call from my very bright and brilliant niece who recently enrolled into Michigan State University (MSU if you're a Michigan native). During the midpoint of the conversation, all I heard was "cell phone silence", for lack of a better term, and within a few more seconds the call was dropped -- argh!

    Obviously, I'm not the only person in the world who gets aggravated when a mobile call gets dropped. Of course, my wireless carrier has to go unnamed here in order to protect the guilty... er, uh... innocent.

    So, after I called my niece to finish our conversation, I started to think. "Shouldn't there a way to show folks where the various dead spots are for the wireless carriers?" As you will see shortly, the MapQuest 5.2 APIs actually come in quite handy for solving this sort of problem. If you read my previous blog post and tried out the example code that I provided, then you should be familiar with the concept of creating a POI (point of interest) on a map and displaying it. Today, we're going to use overlays to highlight a region of interest. Take a look at the image below to see my "dead spot" awareness system:

    Now, the code snippet below is the all the code needed to add a circular overlay to a map. As you can see, I'm able to set the radius of the circle (currently set at '60' here in the code), fill color, border color, border width, and transparency value.

    
              var rect:RectLL = getShapePoints(deadspot_coords, 60);
    var circle:EllipseOverlay = new EllipseOverlay();
    circle.setFillColor(0xffff00);
    circle.setFillColorAlpha(.55);
    circle.setBorderWidth(-1);
    circle.setShapePoints(rect);
    tilemap.addOverlay(circle);

    So as you can see, adding a circular overlay is pretty easy with the Mapquest 5.2 APIs. As always, below is the full source code so you can copy/paste and get things going.

    <?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="635" height="353" backgroundColor="#ffffff">
    <ns1:TilemapComponent x="175" y="34" width="452"
      height="302" id="tilemap" key="mjtd%7Clu6y29u2n0%2C7s%3Do5-0ura9"/>
    <mx:Text x="19" y="77"
      text="Tired of dropped calls from you wireless provider?
      Check here for the latest on wireless dead zones."
      width="134" height="94"/>
    <mx:ComboBox id="mapTypeComboBox" x="19"
       y="34" width="148" dataProvider="{mapTypeComboData}"
      change="changeMapType();"></mx:ComboBox>
    <mx:Label x="198" y="1" text="Wireless Dead Spot Locator"
      fontSize="16" width="266"/>
    </mx:Canvas>
    
      <mx:Script>
     <![CDATA[
     import com.mapquest.tilemap.pois.*;
     import com.mapquest.PointLL;
     import com.mapquest.LatLngCollection;
     import com.mapquest.LatLng;
     import com.mapquest.tilemap.overlays.PolygonOverlay;
     import com.mapquest.tilemap.overlays.EllipseOverlay;
     import com.mapquest.RectLL;
     import com.mapquest.tilemap.controls.ZoomControl;
    
      [Bindable]
        public var mapTypeComboData: Array = [ {label:"Map View", data:"map"},
        {label:"Satellite View", data:"sat"},
        {label:"Hybrid View", data:"hyb"} ];
    
        public function main(): void{
    
        var zoomControl:ZoomControl = new ZoomControl();
        tilemap.addControl(zoomControl);
    
        // now let's set the points of interest
        var deadspot_coords:PointLL = new PointLL(32.720409,-91.994637);
        var deadspot_Poi:Poi = new Poi(deadspot_coords);
        deadspot_Poi.setInfoTitle("deadspot reported on 2/5/2008");
    
    
        var rect:RectLL = getShapePoints(deadspot_coords, 60);
        var circle:EllipseOverlay = new EllipseOverlay();
        circle.setFillColor(0xffff00);
        circle.setFillColorAlpha(.55);
        circle.setBorderWidth(-1);
        circle.setShapePoints(rect);
        tilemap.addOverlay(circle);
    
    
        deadspot_Poi.setKey("A1");
        tilemap.addPoi(deadspot_Poi);
        tilemap.setZoomLevel(4);
        tilemap.setCenter(deadspot_coords);
    
        }
    
        public function getShapePoints(pointLL: PointLL, radius: int): RectLL{
    
        var rLat:Number = radius / 69;
        var rLng:Number = radius / 53;
        return new RectLL(new PointLL(pointLL.lat-rLat, pointLL.lng-rLng),
          new PointLL(pointLL.lat+rLat, pointLL.lng+rLng));
        }
    
        public function changeMapType(): void{
        tilemap.mapType = mapTypeComboData[mapTypeComboBox.selectedIndex].data;
        }
    
    
        ]]>
      </mx:Script>
      </mx:Application>
    
  • Creating Points of Interest with Flex and the MapQuest 5.2 APIs

    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>

  • First Post! - Getting started with Flex and the MapQuest 5.2 APIs

    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>