Adobe MAX 2009: Making Maps with Flash

Making Maps with FlashThe Google Maps API for Flash
Ossama Alami, Google @ossamaalami#adobemax385

Agenda
Introduction to the Google Maps API for Flash
Creating a Map
3D Maps
Recoloring Maps
Demos
Resources
Q&A

Google Geospatial APIs

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

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

Building and Running a Map
Interface SWC

Running a Map

Creating a Map

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

Our Map So Far
Center@34.040605, -118.268133
Zoom Level 16
Road Map

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();

Our Map So Far
MapTypeControl
NavigationControl
Center@34.040605, -118.268133
Zoom Level 16
Road Map
OverviewMapControl

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()}));
});

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]

Our Map So Far
MapTypeControl
NavigationControl
InfoWindow
Marker with Tooltip
Center@34.040605, -118.268133
Zoom Level 16
Road Map
OverviewMapControl

Custom Markers and InfoWindows
Markers and Info Windows can be created with any arbitrary DisplayObject, including images and Flash movies.

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");

3D Perspective

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

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);
}
}
}

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

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

Map View Mode
VIEWMODE_PERSPECTIVE VIEWMODE_ORTHOGONAL

Our Map So Far
Marker in San Francisco
Driving Directions Polyline
InfoWindow and Shadow
NavigationControl
Marker in LA
Custom Control Displaying Attitude

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.

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

Recoloring The Map

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

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]

Recoloring Maps: Samples
Sample Recoloring Map
New York Times Homicides Map
Sample Routeplanner
Tokyo Fasion Map

Sample Sites

More Sample Sites
WDT iMapWeather
360 Cities
Tufts University Boston Campus Maps
Coka-Cola Xmas
Charles Schwab Ad
Mannahatta
Washington Post – TimeSpace

Resources

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

Open Source Libraries
http://gmaps-utility-library-flash.googlecode.com

Q&A
Thanks!
@ossamaalami
#adobemax385

Adobe MAX 2009: Making Maps with Flash

by Ossama Alami

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 27

Statistics

Adobe MAX 2009: Making Maps with Flash Presentation Transcript

http://www.slideshare.net	24
http://www.linkedin.com	3