Upload
ossama-alami
View
2.329
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Also available here: http://docs.google.com/a/google.com/present/view?id=df3mpx45_65gz4fwtht Geo 2 - DevFext MX 2010
Citation preview
Performance andScalability for Maps API Sites
Ossama AlamiDeveloper Advocate, Google@ossamaalami@googlemapsapi
“Every millisecond counts”
Google User Experience Guidelineshttp://www.google.com/corporate/ux.html
Loading the JavaScript API
Lots of Resources
V2: Simple Map
V3: Simple Map
Maps API v3
• Latency #1 priority• Aggressive modularization• Latency features• Mobile Web (iPhone, Android)
Displaying Many Markers
Problem: GMarker/Marker
= <img>*5 + <map>*1
Many Markers Comparison V2 V3
Solution: Light Weight Marker
Creating a Custom Overlay
First, subclass OverlayView:1. function MarkerLight(latlng, opts, map) {• this.latlng = latlng;• if (!opts) opts = {};• this.map_ = map;• • this.height_ = opts.height || 32;• this.width_ = opts.width || 32;• this.image_ = opts.image;• • this.setMap(map);• }• • MarkerLight.prototype = new google.maps.OverlayView();
Then implement onAdd() and onRemove() called by the API:1. MarkerLight.prototype.onAdd = function() {• // Create the DIV representing our MarkerLight• var div = document.createElement("div");• div.style.border = "1px solid white";• div.style.position = "absolute";• div.style.paddingLeft = "0px";• div.style.cursor = 'pointer';• • var img = document.createElement("img");• img.src = this.image_;• img.style.width = this.width_ + "px";• img.style.height = this.height_ + "px";• div.appendChild(img);• • var panes = this.getPanes();• panes.overlayLayer.appendChild(div);• • this.div_ = div;• };• • MarkerLight.prototype.onRemove = function() {• this.div_.parentNode.removeChild(this.div_);• this.div_ = null;• };
Creating a Custom Overlay
Then implement draw() and position the DIV:1. MarkerLight.prototype.draw = function() {• var overlayProjection = this.getProjection();• • // Calculate the DIV coordinates of two opposite corners• // of our bounds to get the size and position of our MarkerLight• var divPixel = overlayProjection.fromLatLngToDivPixel(this.latlng);• • // Now position our DIV based on the DIV coordinates of our bounds• this.div_.style.width = this.width_ + "px";• this.div_.style.left = (divPixel.x) + "px";• this.div_.style.height = (this.height_) + "px";• this.div_.style.top = (divPixel.y) - this.height_ + "px";• };
Creating a Custom Overlay
Then, just create the Marker:1. var marker = new MarkerLight(latlng, • {image:"bluecirclemarker.png"}, map));
Many Markers Comparison V2 V3
Solution: Light Weight Marker
MadoffMap
Light Weight Marker for Flash, Too!
Problem: Too Many DOM Nodes
AuthorMapper
Solution: Clustering
360Cities
Solution: K-means Clustering
MarkerClusterer V2 V3
Solution: Grid Based Clustering
Solution: Regional Clustering
US Pizzas Travellr
Article: Handling Large Amounts of Markers
Python k-means
Maptimize
More Clustering Resources
FundRace
Solution: View Only Visualization
HeatMapAPI Boston Pizza
Solution: View Only Visualization
NY Times Taxi Map
Google Local Search
Clickable Tile Layer
Solution: Clickable Marker Layer
Rendering Large Polys
Problem: Polygon/GPolygon
Solution: Lightweight Polys
Polygonzo
13500 points 2200 points
Problem: Too Many Points
MapShaperMapSimplification
Mapping the Votes: Resources
Solution: Data Simplification
Encoded Poly Example
Solution: Encoded Polys
SVGCanvas
VML
Problem: Browsers + Vector Graphics
Thematic Mapping HowSFVotes
Solution: Maps API for Flash
Map of The Fallen
Solution: Earth API
Solution: Tile Layers
Generated County Tiles• Tiles generated with Perl script using data in PostGRE
database for zoom levels 5-9
Zoom 5
Zoom 6
Zoom 7
Zoom 8
Zoom 9
Static Data Tiles: Counties Example
Hosting Geo Data
Hosting Geo DataGoogle Maps Data API • Stores geo data and associated attributes. • Supports geospatial and attribute queries• Storage scales simply with usage.• Geodata is accessible across platforms and devices. • Geodata from the Google Maps Data API can be instantly
indexed and made searchable in Google Maps.App Engine• Host and run your web applications on Google's infrastructure.• Easy to build, maintain and scale. Highly customizable.• Supports Python and Java• Libraries available to make geospatial queries easier on App
Engineo http://code.google.com/p/geodatastore/o http://code.google.com/p/geomodel/
Developer Qualification
Community Driven.
Q & AThanks!