Skip to content
πŸ™ˆπŸ™‰πŸ™Š A Curious Animal
Go back

Awesome clustered markers in Leaflet

Some time ago someone asked at gis.stackexchange.comΒ for nice cluster marker implementation, both for Leaflet or
OpenLayers, something similar
to Redfin.
A couple of weeks ago I discover a great implementation for Leaflet, the
Leaflet.markercluster from Dave Leaver.

It is simply awesome !!! Screenshot from 2012-08-11 20:23:56

Features

The Leaflet.markerclusterΒ plugin for Leaflet is documented enough on its web page, so I’m not going to repeat it here, but I would like to make a short summary of its features.

Add/remove mark**er

Β We can easily add or remove marker with the methods addLayer and removeLayer. For example:

markers.addLayer( new L.Marker(new L.LatLng(lat, lon), { title: title }) );

Events

We have available the eventsΒ clusterclick,Β clustermouseover,Β clustermouseout andΒ zoomend to interact with the new layer.

Options

TheΒ Leaflet.markerclusterΒ plugin has some nice options, which by default they are set as:

options: {
 maxClusterRadius: 60,
 iconCreateFunction: null,
 spiderfyOnMaxZoom: true,
 showCoverageOnHover: true,
 zoomToBoundsOnClick: true
 },

To change the default values simply specify the values when instantiation the cluster group:

var markers = new L.MarkerClusterGroup({
 maxClusterRadius: 100,
 spiderfyOnMaxZoom: true,
 showCoverageOnHover: false,
 zoomToBoundsOnClick: true
});

A short note

Many posts ago I write about Open Alternatives to Google MapsΒ where I talk about the nice Leaflet project, finishing with the sentence: Believe me, put an eye on this project, it has many more to say. And seems this great marker cluster is one of that thins to say :) In addition, I was seeing lot of activity about the Leaflet project, much more than on OpenLayers.

Do not confuse please, I’m talking about activity related to news where many web pages are changing from Google Maps API to Leaflet. I know the OpenLayers community is make a great job, as always, on the next major release of the project, OpenLayers 3.0, with a great amount of improvements.

At this moment, the comparison between Leaflet and OpenLayers is something like comparing the clothes to go to run or an armor to go to a battle. Β What I want to say is OpenLayers is a big and complex project but, because of this, it allows to do almost anything you can need in a GIS application. On the other hand Leaflet is a more agile and lightweight project, designed to to only a bunch of things. While OpenLayers allows to access tile server (TMS or WMTS), WMS, WFS, etc Leaflet is designed to access TMS (like OpenStreetMap, CloudMade tiles, etc).

The summary is Leaflet implements the 10% (to say a number) of things implements OpenLayers but that 10% is the required to do the most common things for a weg application.

Challenge !!!

Who wants to create an awesome cluster implementation for OpenLayers?


Share this post:

Previous Post
Look mom no jQuery !!! Getting all CSS properties of a DOM element in JavaScript
Next Post
Animated marker cluster strategy for OpenLayers