Adobe MAX 2009: Making Maps with Flash


Published on

Slides from Adobe MAX 2009 Session "Making Maps with Flash" on the Google Maps API for Flash. Code samples are here:

Published in: Technology, News & Politics
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Also:KML – an open standard for storing geospatial dataHTTP Geocoder API – and I’ll talk about geocoding a little laterMaplets API – witch lets you developer “maplets” or widgets that can be used in conjunction with My Maps on API – which lets you access high quality geo-taged photographsSketchUp API- which lets you automate and SketchUp, our 3d modeling toolAJAX Local Search API – a really powerful API which lets you search for and retrieve POI and other geotagged data from all over the web
  • Maps API KeyVery similar to the JavaScript API architectureDynamic loading of the implementation library, at runtime it will download the version of the implementation libraryBy default you’re going to get the latest version, but you do have the option of specifying a specific version
  • Getting started.Set up our environment, you can use Flex, FlexBuilder or Flash. For these example I’m going to use FlexBudiler, but its just as easy to use the free flex complier to build these mapsSign up for a Maps API key at the SDK, we have two, one for flash cs3 and one for flex
  • The Maps API for Flash comes with a handful of built-in controls you can use in your maps:PositionControl - a pan control as used on Google Maps. Appears in the top left corner of the map by default.ZoomControl - a zoom control slider as used on Google Maps.MapTypeControl - buttons that let the user toggle between map types (such as Map and Satellite).ScaleControl - a scale control is a visual indicator used to indicate the resolution of the current map and zoom level.OverviewMapControl - a collapsible overview map in the corner of the screen.All of these controls implement the IControl interface. You can also build your own custom controls by subclassing the ControlBase class (which provides implementations not provided in the interface).
  • Markers and Info Windows can be created with any arbitrary DisplayObject, including Flash movies.
  • Markers and Info Windows can be created with any arbitrary DisplayObject, including Flash movies.
  • In each case, the event returns information related to the geocoding request in the following properties of the GeocodingEvent itself:request stores the original geocoding request as a text string.requestType stores the type of geocoding request (currently "geocoding" is the only request type).response.placemarks.address stores the resolved address.response.placemarks.addressDetails stores address details conforming toxAL, or eXtensible Address Language, an international standard for address formating.response.placemarks.point stores the LatLng of the geocoded addressstatus contains the status of the geocding request and generally holds additional information for why a geocoding attempt has failed, for example.reverseGeocode methodDirectionsBy default, directions are assumed to be driving directions though you may request other modes of travel by passing a constant within the DirectionsOptions object when calling the Directions.load() method. We currently support DirectionsOptions.TRAVEL_MODE_DRIVING and DirectionsOptions.TRAVEL_MODE_WALKINGIn this example, I’m just adding the polyline of the route to the map, but Textual and HTML-formatted directions are also returned on a directions request. This data is stored within a series of one or more Route objects, each Route consisting of a segment specified in the original query, so as I specified [345 spear…..]. Each route in turn consists of one or more Step objects, which contain the turn-by-turn directions. You can retrieve the routes using the Directions.getRoute(i:Number) method and then steps within a route can be retrieved using the Route.getStep(i:Number) method. Route objects store the number of steps (of type Step) for that route, the starting and ending geocode for that route, and other computed information such as distance, duration, and exact lat/lon of the endpoint.Each Step object as well contains the description for that text (e.g. "Merge onto US-101 S via the ramp to San Jose") plus computed information including the distance, duration, and exact lat/lon. You may use the textual information returned by the Directions object to display turn-by-turn textual descriptions within any DisplayObject.
  • The Google Maps API for Flash provides an alternative event exclusively for handling and setting up common map options: MapEvent.MAP_PREINITIALIZE. This event is triggered after a map is ready to receive initialization parameters, but before the map is ready for general use. In fact, only one Map method is allowed within this event handler: the Map.setInitOptions() method, which passes a MapOptions object.Although applications built using Google Maps API for Flash will work in both Flash 9 and Flash 10 players, 3D maps take advantage of advanced geometry support in Flash 10, so we recommend that you build your applications for that player. Note that if you build your applications for Flash 10, but use no code specific to Flash 10, your applications will still work in both Flash 9 or Flash 10, and provide a much better user experience on Flash 10 capable browsers.
  • The ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the RGBA color and alpha values of every pixel in the input image to produce a result with a new set of RGBA color and alpha values. So, it separates each source pixel into its red, green, blue and alpha components and then multiplies their value by the values in the transformation matrix. The filter combines each color component back into a single pixel and writes out the result. Using this,you can accomplish saturation changes, hue rotation, luminance to alpha, and various other effects. redResult = (a[0] * srcR) + (a[1] * srcG) + (a[2] * srcB) + (a[3] * srcA) + a[4]greenResult = (a[5] * srcR) + (a[6] * srcG) + (a[7] * srcB) + (a[8] * srcA) + a[9]blueResult = (a[10] * srcR) + (a[11] * srcG) + (a[12] * srcB) + (a[13] * srcA) + a[14]alphaResult = (a[15] * srcR) + (a[16] * srcG) + (a[17] * srcB) + (a[18] * srcA) + a[19]
  • Adobe MAX 2009: Making Maps with Flash

    1. 1. Making Maps with FlashThe Google Maps API for Flash<br />Ossama Alami, Google @ossamaalami#adobemax385 <br />
    2. 2. Agenda<br />Introduction to the Google Maps API for Flash<br />Creating a Map<br />3D Maps<br />Recoloring Maps<br />Demos<br />Resources<br />Q&A<br />
    3. 3. Google Geospatial APIs<br />
    4. 4. The Google Maps API for Flash<br />ActionScript framework for developing mapping applications<br />Supports development using the Flex SDK, FlexBuilder, or Flash CS3<br />Applications can run in a browser or standalone using AIR<br />Class structure modeled on the JavaScript API<br />Supports animated overlays, larger data sets, and 3D perspective<br />
    5. 5. What’s Included<br />Road, Terrain, Satellite, Hybrid Map Types<br />Forward and reverse Geocoding<br />Polylines and Polygons<br />Markers and InfoWindows<br />Driving and walking directions<br />3D perspective<br />Support for ground overlays, custom overlays and controls<br />Some features in the JavaScript Maps API are not currently natively supported: <br />Street View<br />KML rendering<br />Traffic <br /><br />
    6. 6. Building and Running a Map<br />Interface SWC<br />
    7. 7. Running a Map<br />
    8. 8. Creating a Map<br />
    9. 9. Basic Map<br />ActionScript<br /> {<br />;<br />;<br />;<br />;<br />;<br />publicclassMapsHelloextends Map {<br />publicfunctionMapsHello() {<br />super();<br />addEventListener(MapEvent.MAP_READY, onMapReady);<br /> }<br />privatefunctiononMapReady(event:MapEvent):void {<br />setCenter(new LatLng(34.040605, -118.268133), 16, MapType.NORMAL_MAP_TYPE); <br /> }<br />}<br />}<br />MXML<br />&lt;examples:MapsHelloxmlns:examples=&quot;*” key=&quot;ABCDEF&quot; width=&quot;800&quot; height=&quot;600&quot;/&gt;<br />
    10. 10. Our Map So Far<br />Center@34.040605, -118.268133<br />Zoom Level 16<br />Road Map<br />
    11. 11. Customizing The Map<br />Behavior<br />Dragging<br />Continous Zoom<br />Scroll Wheel Support<br />Double Click Behavior<br />Crosshairs<br />Keyboard Controls<br />Controls<br />PositionControl<br />ZoomControl<br />MapTypeControl<br />ScaleControl<br />OverviewMapControl<br />NavigationControl<br />Custom Controls<br />addControl(newMapTypeControl());<br />addControl(newOverviewMapControl());<br />addControl(newNavigationControl());<br />enableScrollWheelZoom();<br />enableContinuousZoom();<br />
    12. 12. Our Map So Far<br />MapTypeControl<br />NavigationControl<br />Center@34.040605, -118.268133<br />Zoom Level 16<br />Road Map<br />OverviewMapControl<br />
    13. 13. Markers, Events and Info Windows<br />Adding a Marker<br />varlatLng:LatLng = new LatLng(34.040605, -118.268133);<br />varmarker:Marker = newMarker(latLng, <br />newMarkerOptions({tooltip:&quot;Adobe MAX 2009&quot;}));<br />addOverlay(marker);<br />Opening an Info Window on a Marker Click Event<br />marker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void {<br />marker.openInfoWindow(newInfoWindowOptions(<br /> {title:&quot;Los Angeles Convention Center”, <br />content:marker.getLatLng().toString()}));<br /> });<br />
    14. 14. Marker Options<br />FillStyle<br />alpha:[Number]<br />color:[Number]<br />gradient:GradientStyle<br />DisplayObject<br />Matrix<br />GradientStyle<br />Point<br />alphas:Array[Number]<br />colors:Array[Number]<br />focalPointRatio:[Number]<br />interpolationMethod:String<br />matrix:Matrix<br />ratios:Array[Number]<br />spreadMethod:String<br />type:String<br />MarkerOptions<br />TextFormat<br />draggable:[Boolean] false<br />fillStyle:FillStyle {color:0xFF766A, alpha:1}<br />gravity:[Number] 0.8<br />hasShadow:[Boolean] true<br />icon:DisplayObject null<br />iconAlignment:[Number] null<br />iconOffset:Point null<br />label:String null<br />labelFormat:TextFormat {font:&quot;_sans&quot;, size:12, color:Color.BLACK}<br />radius:[Number] 9<br />strokeStyle:StrokeStyle {thickness:2, alpha:1, color:Color.BLACK}<br />tooltip:String null<br />StrokeStyle<br />alpha:[Number]<br />color:[Number]<br />thickness:[Number]<br />
    15. 15. Our Map So Far<br />MapTypeControl<br />NavigationControl<br />InfoWindow<br />Marker with Tooltip<br />Center@34.040605, -118.268133<br />Zoom Level 16<br />Road Map<br />OverviewMapControl<br />
    16. 16. Custom Markers and InfoWindows<br />Markers and Info Windows can be created with any arbitrary DisplayObject, including images and Flash movies.<br />
    17. 17. Maps API for Flash: Services<br />Geocoding – Pass in an address and get a LatLng<br />Reverse Geocoding – Pass in a LatLng and get and address<br />Driving & Walking Directions<br />vargeocoder:ClientGeocoder = newClientGeocoder();<br />geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, <br />function(e:GeocodingEvent):void {<br />varplacemarks:Array = e.response.placemarks;<br />if(placemarks.length &gt; 0) {<br />addOverlay(new Marker(placemarks[0].point,<br />newMarkerOptions({tooltip:&quot;Google SF&quot;})));<br /> }<br />});<br />geocoder.geocode(&quot;345 Spear St., San Francisco, CA&quot;); <br />vardir:Directions = new Directions();<br />dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,<br />function(event:DirectionsEvent):void {<br />varpolyline:IPolyline = dir.createPolyline();<br />addOverlay(polyline);<br />});<br />dir.load(&quot;345 spear st, sf to 1201 S Figueroa St, la&quot;);<br />
    18. 18. 3D Perspective<br />
    19. 19. Giving a Map Perspective<br />To add 3D capabilities to your map, you simply need to make the following changes to your code:<br />Import the,, and classes.<br />Instead of extending a Map object, extend a Map3D object.<br />Within the map&apos;s MAP_PREINITIALIZE event, set the map&apos;s view to VIEWMODE_PERSPECTIVE<br />Optionally, you can also set aninitial attitude for the map to display at an oblique angle.<br />We recommend 3D mapsapps build for Flash 10<br />
    20. 20. Giving Our Map a little Perspective<br />package examples {<br />;<br />import;<br />;<br />;<br />;<br />;<br />;<br />publicclass MapsHello3d extends Map3D {<br />publicfunction MapsHello3d() {<br />super();<br />addEventListener(MapEvent.MAP_PREINITIALIZE, onMapPreinitialize); <br /> }<br />privatefunctiononMapPreinitialize(event:MapEvent):void {<br />varmyMapOptions:MapOptions = newMapOptions();<br />myMapOptions.zoom = 16;<br /> = new LatLng(34.040605, -118.268133)<br />myMapOptions.mapType = MapType.NORMAL_MAP_TYPE;<br />myMapOptions.viewMode = View.VIEWMODE_PERSPECTIVE;<br />myMapOptions.attitude = new Attitude(20,30,0);<br />setInitOptions(myMapOptions);<br /> }<br />}<br />}<br />
    21. 21. The attitude is a value which defines the angles of incidence for the map, as seen from the viewer&apos;s perspective (the &quot;camera&quot;).<br />These angles of incidence are three values:<br />yaw defines the &quot;direction&quot; of the camera with respect to north. <br />pitch defines the angle of incidence of the camera with respect to the map&apos;s horizon.<br />roll defines the angle of incidenceof the camera with respect to its &quot;footing.”<br />Map Attitude<br />
    22. 22. Map View Mode<br />The Map3D object contains a view property which indicates what sort of view the 3D map should exhibit. <br />VIEWMODE_2D displays a standard 2D map.<br />VIEWMODE_PERSPECTIVE displays a 3D map with perspective<br />VIEWMODE_ORTHOGONAL displays a 3D map with no perspective<br />
    24. 24. Our Map So Far<br />Marker in San Francisco<br />Driving Directions Polyline<br />InfoWindow and Shadow<br />NavigationControl<br />Marker in LA<br />Custom Control Displaying Attitude<br />
    25. 25. 3D Map Features<br />NavigationControl will automatically contain attitude controls. Keyboard attitude controls are the same as Google Earth’s.<br />Map3D contains a flyTo() method for animating location changes.<br />ICamera provides a getTranslationGeometry() method for converting between latitude/longitude and pixel coordinates, useful for placing three-dimensional objects on the map. <br />
    26. 26. 3d Perspective: Samples<br />Driving Tour Demo<br />Away We Go Movie Site<br />GeoQuake Driving Simulator<br />UK Weather Tour<br />Papervision3d Scene Overlay<br />Eiffel Tower Example<br />Streetview 3d Perspective Sync<br />Situlational Awareness Demo<br />
    27. 27. Recoloring The Map<br />
    28. 28. Recoloring Maps<br />We now allow recoloring of Map tiles when using the Maps API for Flash through Flash’s graphics filters<br />Flash’s graphics filters let you add effects to any DisplayObject<br />We do require that you request formal permission from Google before you do this.<br /><br /><br />
    29. 29. Recoloring Maps: Code<br />varR:Number = 0.299; <br />varG:Number = 0.587; <br />varB:Number = 0.114;<br />varmatrix:Array = [<br />//R G B A O - Red, Green, Blue, Alpha, Offset<br /> R, G, B, 0, 0, // Red Result<br /> R, G, B, 0, 0, // Green Result<br /> R, G, B, 0, 0, // Blue Result<br /> 0, 0, 0, 1, 0]; // Alpha Result<br />varCMF:ColorMatrixFilter = newColorMatrixFilter(matrix);<br />varmapPart:Sprite = Sprite(map).getChildAt(1) as Sprite;<br />varmapArea:Sprite = mapPart.getChildAt(0) as Sprite;<br />mapArea.filters = [CMF]<br />
    30. 30. Recoloring Maps: Samples<br />Sample Recoloring Map<br />New York Times Homicides Map<br />Sample Routeplanner<br />Tokyo Fasion Map<br />
    31. 31. Sample Sites<br />
    32. 32. More Sample Sites<br />WDT iMapWeather<br />360 Cities<br />Tufts University Boston Campus Maps<br />Coka-Cola Xmas<br />Charles Schwab Ad<br />Mannahatta<br />Washington Post – TimeSpace<br />
    33. 33. Resources<br />
    34. 34. Docs & More: Google Code<br /><br />Sign up for a Google Maps API Key<br />Free vs Premier Maps<br />Download the SDK<br />Developers Guide and tutorials for Flex, FlexBuilder, Flash CS3<br />Change log, Known Issues and Feature requests<br />API Reference<br />Demos, Examples, Articles<br />User Forum<br />Geo Developers Blog<br />... and more<br />
    35. 35. Open Source Libraries<br /><br />
    36. 36. Q&A<br />Thanks!<br />@ossamaalami<br />#adobemax385<br />