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