Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)

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!