From 9ef9348e79b26e6bda871a990a23d732b33aadad Mon Sep 17 00:00:00 2001 From: danzel Date: Wed, 15 Aug 2012 17:13:23 +1200 Subject: [PATCH] Working on marker clusterer post --- ...guest-post-markerclusterer-0-1-released.md | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 _posts/2012-08-16-guest-post-markerclusterer-0-1-released.md diff --git a/_posts/2012-08-16-guest-post-markerclusterer-0-1-released.md b/_posts/2012-08-16-guest-post-markerclusterer-0-1-released.md new file mode 100644 index 00000000..b0966fd4 --- /dev/null +++ b/_posts/2012-08-16-guest-post-markerclusterer-0-1-released.md @@ -0,0 +1,56 @@ +--- +layout: post +title: Guest Post - Leaflet.MarkerClusterer 0.1 Released +description: Leaflet now has its own MarkerClustering Plugin to reduce the visual clutter on your maps. +author: Dave Leaver +authorsite: https://github.com/danzel/ +--- + +Almost anyone who has a map with markers on it will eventually end up having those markers overlap. At my day job at Smartrak we regularly have customers with thousands of points on the map. +When you zoom your map out, these markers all overlap and make the map look messy and crowded. Also having a large amount of markers on the map usually ends up lowering performance to an unacceptable level. + +To improve this, many sites use marker clustering, one good example is at redfin. + +We needed something like this, but in leaflet. So in the spirit of open source we developed it and released it so that everyone can take advantage of it. + +So we proudly present Leaflet.MarkerCluster. + + + + +The clusterer has all sorts of great built in behaviour: + + * Markers that don't need clustering aren't and will be visible at the relevant levels. + * Cluster and markers that are further than a screen width from the view port are removed from the map to increase performance. + * Everything is brilliantly animated. As you zoom in and out you can logically see which clusters have become which markers. + * At the bottom zoom level if there are still clusters you can click on them to 'spiderfy' them, which shows the individual markers within the cluster. (Based on jawj's Overlapping MarkerSpidifer) + * As with core Leaflet, everything works on Mobile and on the desktop is tested all the way back to IE7. + * It is based on L.FeatureGroup to provide the interaction for the markers contained with in it. + * Supports Adding and Removing Markers after being added to the map. + +### Usage + +Using the Marker Clusterer is easy, just replace your existing L.FeatureGroup usage with a L.MarkerClusterGroup: + + var markers = new L.MarkerClusterGroup(); + markers.addLayer(new Marker([175.3107, -37.7784])); + //Add more markers + map.addLayer(markers); + +You can also use all of the L.FeatureGroup event features for both individual markers and clusters: + markers.on('clusterclick', function (a) { alert('Cluster Clicked'); }); + markers.on('click', function (a) { alert('Marker Clicked'); }); + +### The Technical bits + +The underlying clustering algorithm (MarkerClusterGroup._cluster) is plain greedy clustering. + + foreach marker + if there is a cluster within the clustering distance, join it. + else if there is an unclustered marker within the clustering distance, form a cluster with it. + +L.DistanceGrid provides some nice optimization in here (Contributed by mourner of course!). +When clustering we need to compare every marker with every other marker to try form a cluster. +To make this quicker we need to reduce the set of markers we need to compare with, L.DistanceGrid does this by putting all markers on to a grid with grid size the same as the distance we need to search. +Then when looking for a marker to cluster with we only need to look at markers in the grid square we are in and its immediate neighbours. +This can be quite a big performance win as you will only look at markers that you are likely to form a cluster with. (check out the initial PR for numbers)