Google Maps in your Drupal site, using clustering and many other cool stuff

Clustering

When you want to display many objects (for example, thousands of them) on the map, problems appear in the user experience and the performance:

• points which are too close to one another are overlapping and make the map illegible, and
• the map is too slow to load on the page.

These problems are solved by clustering, which will group neighboring objects into one single object. In addition, it is possible to avoid loading all objects at once: instead, only the objects in the visible area of the map are loaded.

Clustering in Google maps API

If you are using Google maps directly, you can achieve this using several libraries like Marker Manager or Clusterer. It is even possible to do it very easily, by using the Gmap module. On the Gmap settings BO page you should choose the marker clustering library. Then simply add markers to the page and display map:

foreach ($results as $realisation) {
   $markers[] = array(
     'latitude' => $realisation->location_latitude,
     'longitude' => $realisation->location_longitude,
     'text' => $realisation->node_revisions_body,
   );
 }
 $settings['markers'] = $markers;
 theme('gmap', array('#settings' => $settings));

Map before and after clustering

Clusterer offers much better performance than Marker Manager, because only the markers currently visible actually get created. A nice test page which compares different cluster libraries can be found here.

Clustering in Openlayers

Openlayers offers two strategies which enable these improvements: Cluster strategy and Bounding box strategy (which reads new features when the viewport invalidates some boundaries). Cluster strategy doesn't work with marker layers, so we should use vector layer points as an alternative to markers. Openlayers strategies are easy to use; in vector layer initialization you should list the strategies you want.

 var vectorLayer = new OpenLayers.Layer.Vector('Realisations', {
   strategies: [
     new OpenLayers.Strategy.Fixed(),
     new OpenLayers.Strategy.Cluster(),
     new OpenLayers.Strategy.BBOX()
   ],
   protocol: new OpenLayers.Protocol.HTTP({
     url: geoJSONsource,
     format: new OpenLayers.Format.GeoJSON()
   }),
 });

Map before and after applying cluster strategy

Using the vector layer's styleMap property and Style object, you can make vector layer points appear the same as traditional markers, with a size which depends on the number of objects grouped into a cluster object:

   styleMap: new OpenLayers.StyleMap({
     'default': new OpenLayers.Style({
       pointRadius: "${radius}",
       externalGraphic: "http://www.openlayers.org/dev/img/marker.png"
     },  {
       context: {
         radius: function(feature) {
           var pix = 2;
           if(feature.cluster)
             pix = Math.min(feature.attributes.count, 7) + 2;
           return pix;
         }
       }
     }
   })

Clustered maps after applying style and after applying externalGraphic property