Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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 />