Technical Wizardry with new Google Map Layers
Posted on May 16th, 2008 by Andy
Google recently added Photos and Wikipedia layers to Google Maps. Whilst photos and Wikipedia entries is nothing new for the Geoweb (Panoramio, Flickr Map, Wikimapia, Placeopedia etc), what interests me is how they are displaying so many images and each image is clickable with a pop-up.
Those that understand a bit about web mapping are probably interested in this new technique, since normally displaying hundreds of images would be very slow.
So how does it work?
Being able to show hundreds or thousands of points in Google Maps is no secret, just use pre-rendered image tiles instead of rendering every individual feature.
Left: Normal map from map.search.ch, Right: Points overlay for restaurants.
map.search.ch was one of the first to use image tiles for displaying a large number of points. Like the new Google Map layers, each point is made clickable by using AJAX. Each time the mouse pointer moves a request is sent to the web server asking if anything is at this point. The server either sends the point information if something is there, or a false response otherwise.
You can see this behaviour yourself if you use Firefox with the Firebug extension. Click on the Net tab and move your mouse around the map.
Google does not use the same approach with their new layers. Instead of sending a request to the server each time the user moves their mouse pointer, a request is only sent when the user moves their mouse pointer over a new image tile. This is much more efficient since there are fewer requests to the server.
The Google Maps server sends a response that contains bounding box information for each map feature within that map tile.
A typical response looks like this:
_xdc_._pfgag1f9l && _xdc_._pfgag1f9l([{id:"vuuv",base:[1269924733,925572610],
zrange:[3,3],layer:”lmc:panoramio”,features:[{id:"6090215976898515612",a:[0,0],
bb:[-23,-21,21,23]},{id:”4793192448664535260″,a:[-65769341,-59303940],
bb:[-9,-9,9,9]},{id:”10262444996445491892″,a:[-63603580,-19430917],
bb:[-9,-9,9,9]},{id:”17402302423332457262″,a:[-44809083,-85699584],
bb:[-9,-9,9,9]},{id:”15484197638994479328″,a:[-45658443,3265110],
bb:[-9,-9,9,9]},{id:”1827276417253271302″,a:[-51732350,-128045572],
bb:[-9,-9,9,9]},{id:”7170821255779715459″,a:[19782465,-67764415],
bb:[-9,-9,9,9]},{id:”17893863200783284722″,a:[-9552765,-117368321],
bb:[-9,-9,9,9]}]}])
This chunk of data provides a unique identifier (id), a feature position (a) and the size of the bounding box (bb). Everything that is needed to calculate if the user has their pointer over a map feature or not.
I expect we will start to see more mapping websites use this technique in future. I don’t know of any open source tools which provides a similar tile-feature web service, but I expect they will come in due course.
Acquisitions
Google acquired a Swiss company called Endoxon in December 2006. Endoxon were the creators of map.search.ch. I wouldn’t be surprised if some of the ex-Endoxon employees were working with the guys from Panoramio (also acquired by Google in May 2007).
Tags: Google Maps