« Tim Bray on Atom and RSS | Main | What's the next big thing? »
November 14, 2006
Mapping Le Web 3 (or: blowing up GoogleMaps)
I'm still vaguely musing on whether to attend the upcoming Le Web 3 conference in Paris in December and yesterday evening I was poking around the Website and looked at the GoogleMap that displays the conference attendees. Or rather I tried to. Now that over 530 people have registered, the map is - as implemented - basically unusable. Here is the link - click with care.
So, I poked around a little more and looked to see what could be done to change that.
The problem is that all attendees are being displayed with the map at minimum zoom level. That's over 500 little pointers that need drawing etc.
In version 2.67 of the Google Maps API, the GMarkerManager was introduced. Version 2.68 is out and contains some bug-fixes.
The GMarkerManager provides more control over which markers are visible at certain zoom levels. So a first step to the above problem could be to use the GMarkerManager and set the zoom level accordingly.
var visitors = [];
// Push each visitor into visitors
var point = new GLatLng(x,y);
visitors.push(createMarker(point,'Matthew Langham / Paderborn, Germany','http://www.indiginox.com'));
:
:
var mgr = new GMarkerManager(map);
// Only display the markers if zoom level is between 6 and 17
mgr.addMarkers(visitors, 6, 17);
// Display
mgr.refresh();
Make sure you explicitly use version 2.68 of the GoogleMaps JavaScript for this ("v=2.68").
I tried this out with a copy of the LeWeb3 map (I just viewed and copied the source) and at least the display of the bubbles above the pins seems to be quicker when you use GMarkerManager.
But that still leaves the problem of missing clustering. If the GMarkerManager has to display as many markers as the original (which would be the case in the Le Web example), then performance would be similar to before. Clustering can be done best from the back-end. If at least one person has registered for the event from a specific city (like Paris) then at a lower zoom level it would be enough to just display 1 pin (a "cluster" pin) that then expands into the individual pins at a higher zoom level.
var clustermarkers = [];
// If someone has registered for Paris then clustermarkers.push(createMarker(...));
// Only display the cluster marker if zoom level is between 1 and 6
mgr.addMarkers(clustermarkers, 1, 6);
The API description also contains a clustering example for the various Google offices where they use different "layers" to differentiate how many markers they need to show depending on the zoom level.
More information on the GMarkerManager can be found here and here. More optimization tips are here.
So, shall I go?
Posted by Matthew at November 14, 2006 05:38 PM