Your SlideShare is downloading. ×
0
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Adobe MAX 2009: Making Maps with Flash
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Adobe MAX 2009: Making Maps with Flash

2,543

Published on

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

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

Published in: Technology, News & Politics
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,543
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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 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]
  • Transcript

    • 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
    • 3. Google Geospatial APIs
    • 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
    • 7. Running a Map
    • 8. Creating a Map
    • 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");
    • 18. 3D Perspective
    • 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
    • 27. Recoloring The Map
    • 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
    • 31. Sample Sites
    • 32. More Sample Sites
      WDT iMapWeather
      360 Cities
      Tufts University Boston Campus Maps
      Coka-Cola Xmas
      Charles Schwab Ad
      Mannahatta
      Washington Post – TimeSpace
    • 33. Resources
    • 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
    • 36. Q&A
      Thanks!
      @ossamaalami
      #adobemax385

    ×