Maps in Flex Chris Griffith

Map Basics

•  API key •  Map Types (Satellite, Road, Hybrid, etc) •  Markers •  Overlays & Polys •  GeoCoding •  Map Controls (Zoom, Pan) •  Terms of Use

http://code.google.com/apis/maps/documentation/flash/

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute" width="100%" height="100%">

<mx:Panel title="Google Maps API for Flex- Simple Map" width="100%" height="100%">

    <mx:UIComponent id="mapContainer”         initialize="startMap(event);”         resize="resizeMap(event)"         width="100%" height="100%"/>

</mx:Panel>  …continued   

…continued<mx:Script> <![CDATA[

import flash.events.Event;import com.google.maps.MapEvent;import com.google.maps.Map;import com.google.maps.MapType;import com.google.maps.LatLng;

private var map:Map;

  public function startMap(event:Event):void {    map = new Map();    map.addEventListener(MapEvent.MAP_READY, onMapReady);    mapContainer.addChild(map);  }

    public function resizeMap(event:Event):void {    map.setSize(new Point(mapContainer.width, mapContainer.height));  }

    private function onMapReady(event:MapEvent):void {    map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);  }

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

Map Attributes By default, maps show up within the Google Maps API for Flash using standard "painted" tiles. However, the Flash API also supports other maps types. The following map types are standard:

NORMAL_MAP_TYPE- the default view SATELLITE_MAP_TYPE - showing Google Earth satellite images HYBRID_MAP_TYPE - showing a mixture of normal and satellite views PHYSICAL_MAP_TYPE - showing a physical relief map of the surface of the Earth

setMapType(SATELLITE_MAP_TYPE);

Markers Markers identify points on the map. The Marker constructor takes a LatLng and an optional MarkerOptions object as arguments. This MarkerOptions objects allows you to override default implementations for markers.

Markers

var markerA:Marker = new Marker(      new LatLng(48.858842, 2.346997), 

    new MarkerOptions({                  strokeStyle: new StrokeStyle({color: 0x987654}),

      fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}), radius: 12,  hasShadow: true

}));

addOverlay(markerA);

Polylines Polyline objects create a linear overlay on the map. A Polyline consists of a series of points and creates a series of line segments that connect those points in an ordered sequence.

Polygons Polygon objects are similar to Polyline objects in that they consist of a series of points in an ordered sequence. However, instead of being open-ended, polygons are designed to define regions within a closed loop. As with polylines, you can define custom colors, weights, and opacities for the edge of the polygon (the "line") and custom colors and opacities for the fill area within the enclosed region. Colors should be in hexadecimal numeric HTML style.

Geocoding Geocoding is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers or position the map.

var geocoder:ClientGeocoder = new ClientGeocoder(); geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS,

handleGeocodingSuccess); geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE,

handleGeocodingFailure); geocoder.geocode(address.text);

http://developer.yahoo.com/flash/maps/

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=http://www.adobe.com/2006/mxmllayout="absolute”creationComplete="handleCreationComplete(); ><mx:Panel title="Yahoo! Maps - Simple Flex Example"

top="5" left="5" bottom="5" right="5"><mx:UIComponent id="mapContainer" width="100%" height="100%"/>

</mx:Panel>

<mx:Script> <![CDATA[ import mx.events.ResizeEvent;

import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.Address; import com.yahoo.maps.webservices.geocoder.GeocoderResult; import

com.yahoo.maps.webservices.geocoder.events.GeocoderEvent;

private var _yahooMap:YahooMap; private var _address:Address;

…

private function handleCreationComplete():void {

var appid:String = Application.application.parameters.appid;_yahooMap = new YahooMap(); _yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE, handleMapInitialize); _yahooMap.init(appid,mapContainer.width,mapContainer.height);

mapContainer.addChild(_yahooMap); mapContainer.addEventListener(ResizeEvent.RESIZE,

handleContainerResize); _yahooMap.addPanControl(); _yahooMap.addZoomWidget(); _yahooMap.addTypeWidget();}

private function handleMapInitialize(event:YahooMapEvent):void { _address = new Address("141 pike st. seattle,wa"); _address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, handleGeocodeSuccess); _address.geocode();

}

private function handleGeocodeSuccess(event:GeocoderEvent):void {var result:GeocoderResult = _address.geocoderResultSet.firstResult;_yahooMap.zoomLevel = result.zoomLevel;

_yahooMap.centerLatLon = result.latlon;}

private function handleContainerResize(event:ResizeEvent):void _yahooMap.setSize(mapContainer.width,mapContainer.height);

} ]]></mx:Script>

</mx:Application>

Map Events Markers Polyline Overlays Geodesic Polyline Overlays Drawing Custom Overlays Geocoding Local Search (Yahoo! Local listings) Traffic

Amgen Tour of California

http://developer.mapquest.com/home

package{ import com.mapquest.PointLL; import com.mapquest.tilemap.Size; import com.mapquest.tilemap.TileMap;

import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode;

public class MapQuestMaps extends Sprite { public static const MAPQUEST_KEY:String = "YOUR_KEY_HERE"; public var map:TileMap = null;

public function MapQuestMaps() { var home:PointLL = new PointLL( 37.3310639, -121.8939944 );

stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT;

map = new TileMap( MAPQUEST_KEY, 5, home ); map.setSize( new Size( 200, 200 ) ); addChild( map ); } }}

http://resources.esri.com/arcgisserver/apis/flex/

http://modestmaps.com

What Modest Maps does:

•  Displays tile-based maps, from sources such as OpenStreetMap, NASA Blue Marble, Google, Yahoo!, Microsoft, and others.

•  Supports developer-defined tile sets in arbitrary geographical projections.

•  Smoothly pans and zooms. •  Tracks the position of geographical map markers. •  ActionScript 2.0 codebase works with FlashLite.

Where Modest Maps stops:

•  No default display of geographical map markers. •  No default buttons for zooming or panning. •  No support for “local” API’s, such as business searches or white pages

look-up.