performance and scalability for maps api sites (dev fest '10 mexico)
DESCRIPTION
Also available here: http://docs.google.com/a/google.com/present/view?id=df3mpx45_65gz4fwtht Geo 2 - DevFext MX 2010TRANSCRIPT
![Page 1: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/1.jpg)
Performance andScalability for Maps API Sites
Ossama AlamiDeveloper Advocate, Google@ossamaalami@googlemapsapi
![Page 2: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/2.jpg)
“Every millisecond counts”
Google User Experience Guidelineshttp://www.google.com/corporate/ux.html
![Page 3: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/3.jpg)
Loading the JavaScript API
![Page 4: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/4.jpg)
Lots of Resources
V2: Simple Map
V3: Simple Map
![Page 5: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/5.jpg)
Maps API v3
• Latency #1 priority• Aggressive modularization• Latency features• Mobile Web (iPhone, Android)
![Page 6: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/6.jpg)
Displaying Many Markers
![Page 7: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/7.jpg)
Problem: GMarker/Marker
= <img>*5 + <map>*1
![Page 8: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/8.jpg)
Many Markers Comparison V2 V3
Solution: Light Weight Marker
![Page 9: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/9.jpg)
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();
![Page 10: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/10.jpg)
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
![Page 11: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/11.jpg)
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));
![Page 12: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/12.jpg)
Many Markers Comparison V2 V3
Solution: Light Weight Marker
![Page 13: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/13.jpg)
MadoffMap
Light Weight Marker for Flash, Too!
![Page 14: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/14.jpg)
Problem: Too Many DOM Nodes
![Page 15: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/15.jpg)
AuthorMapper
Solution: Clustering
![Page 16: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/16.jpg)
360Cities
Solution: K-means Clustering
![Page 17: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/17.jpg)
MarkerClusterer V2 V3
Solution: Grid Based Clustering
![Page 18: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/18.jpg)
Solution: Regional Clustering
US Pizzas Travellr
![Page 19: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/19.jpg)
Article: Handling Large Amounts of Markers
Python k-means
Maptimize
More Clustering Resources
![Page 20: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/20.jpg)
FundRace
Solution: View Only Visualization
![Page 21: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/21.jpg)
HeatMapAPI Boston Pizza
Solution: View Only Visualization
NY Times Taxi Map
![Page 22: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/22.jpg)
Google Local Search
Clickable Tile Layer
Solution: Clickable Marker Layer
![Page 23: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/23.jpg)
Rendering Large Polys
![Page 24: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/24.jpg)
Problem: Polygon/GPolygon
![Page 25: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/25.jpg)
Solution: Lightweight Polys
Polygonzo
![Page 26: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/26.jpg)
13500 points 2200 points
Problem: Too Many Points
![Page 27: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/27.jpg)
MapShaperMapSimplification
Mapping the Votes: Resources
Solution: Data Simplification
![Page 28: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/28.jpg)
Encoded Poly Example
Solution: Encoded Polys
![Page 29: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/29.jpg)
SVGCanvas
VML
Problem: Browsers + Vector Graphics
![Page 30: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/30.jpg)
Thematic Mapping HowSFVotes
Solution: Maps API for Flash
![Page 31: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/31.jpg)
Map of The Fallen
Solution: Earth API
![Page 32: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/32.jpg)
Solution: Tile Layers
![Page 33: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/33.jpg)
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
![Page 34: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/34.jpg)
Hosting Geo Data
![Page 35: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/35.jpg)
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/
![Page 36: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/36.jpg)
Developer Qualification
Community Driven.
![Page 37: Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)](https://reader035.vdocuments.us/reader035/viewer/2022062418/555ac6d9d8b42ab1128b50e2/html5/thumbnails/37.jpg)
Q & AThanks!