HomeBlogBooksProjectsArchiveAboutlogo

Awesome clustered markers in Leaflet

12 August, 2012 - 3 min read

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 202356

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 marker

 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 clusterclickclustermouseoverclustermouseout 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
 },
  • maxClusterRadius: All the markers within this radius becomes a cluster.
  • iconCreateFunction: Allows to customize the icons for the clusters. (See more here).
  • spiderfyOnMaxZoom: When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers.
  • showCoverageOnHover: When you click a cluster we zoom to its bounds.
  • zoomToBoundsOnClick: When you mouse over a cluster it shows the bounds of its markers.
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?

© I built this site withGatsbyfrom the starterjuliaand made a bunch of modifications. The full content is available in myrepository. Icons made byFreepik from Flaticon