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>