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

Performance and
Scalability for Maps API
Sites

Ossama Alami
Developer Advocate, Google
@ossamaalami
@googlemapsapi

“Every millisecond
counts”

Google User Experience Guidelines
http://www.google.com/corporate/ux.html

Lots of Resources

V2:
Simple Map

V3:
Simple Map

Maps API v3
• Latency #1 priority
• Aggressive modularization
• Latency features
• Mobile Web (iPhone, Android)

Problem: GMarker/Marker

= <img>*5 + <map>*1

Solution: Light Weight Marker

Many Markers Comparison V2 V3

Creating a Custom Overlay
First, subclass OverlayView:
1. function MarkerLight(latlng, opts, map) {
2. this.latlng = latlng;
3. if (!opts) opts = {};
4. this.map_ = map;
5.
6. this.height_ = opts.height || 32;
7. this.width_ = opts.width || 32;
8. this.image_ = opts.image;
9.
10. this.setMap(map);
11.}
12.
13.MarkerLight.prototype = new google.maps.OverlayView();

Then implement onAdd() and onRemove() called by the API:
1. MarkerLight.prototype.onAdd = function() {
2. // Create the DIV representing our MarkerLight
3. var div = document.createElement("div");
4. div.style.border = "1px solid white";
5. div.style.position = "absolute";
6. div.style.paddingLeft = "0px";
7. div.style.cursor = 'pointer';
8.
9. var img = document.createElement("img");
10. img.src = this.image_;
11. img.style.width = this.width_ + "px";
12. img.style.height = this.height_ + "px";
13. div.appendChild(img);
14.
15. var panes = this.getPanes();
16. panes.overlayLayer.appendChild(div);
17.
18. this.div_ = div;
19. };
20.
21. MarkerLight.prototype.onRemove = function() {
22. this.div_.parentNode.removeChild(this.div_);
23. this.div_ = null;
24. };

Then implement draw() and position the DIV:
1. MarkerLight.prototype.draw = function() {
2. var overlayProjection = this.getProjection();
3.
4. // Calculate the DIV coordinates of two opposite corners
5. // of our bounds to get the size and position of our MarkerLight
6. var divPixel = overlayProjection.fromLatLngToDivPixel(this.latlng);
7.
8. // Now position our DIV based on the DIV coordinates of our bounds
9. this.div_.style.width = this.width_ + "px";
10. this.div_.style.left = (divPixel.x) + "px";
11. this.div_.style.height = (this.height_) + "px";
12. this.div_.style.top = (divPixel.y) - this.height_ + "px";
13. };

Then, just create the Marker:
1. var marker = new MarkerLight(latlng,
2. {image:"bluecirclemarker.png"}, map));

Light Weight Marker for Flash, Too!

MadoffMap

Solution: Clustering

AuthorMapper

Solution: K-means Clustering

360Cities

Solution: Grid Based Clustering

MarkerClusterer V2 V3

Solution: Regional Clustering

US Pizzas Travellr

More Clustering Resources

Article: Handling Large Amounts of Markers

Python k-means

Maptimize

Solution: View Only Visualization

FundRace

Solution: View Only Visualization

HeatMapAPI Boston Pizza

NY Times Taxi Map

Solution: Clickable Marker Layer

Clickable Tile Layer

Google Local Search

Solution: Lightweight Polys

Polygonzo

Problem: Too Many Points

13500 points 2200 points

Solution: Data Simplification

MapShaper
MapSimplification

Mapping the Votes: Resources

Solution: Encoded Polys

Encoded Poly Example

Problem: Browsers + Vector Graphics

VML

SVG
Canvas

Solution: Maps API for Flash

Thematic Mapping HowSFVotes

Solution: Earth API

Map of The Fallen

Static Data Tiles: Counties Example

Zoom 5 Zoom 9

Zoom 6 Zoom 8

Zoom 7

Generated County Tiles
• Tiles generated with Perl script using data in PostGRE
database for zoom levels 5-9

Hosting Geo Data
Google 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
Engine
o http://code.google.com/p/geodatastore/
o http://code.google.com/p/geomodel/

Developer Qualification

Community Driven.

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

More Related Content

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

Recently uploaded

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