From 7902582a4d08719e8ebeb67b1ea68de49380a0e1 Mon Sep 17 00:00:00 2001 From: danzel Date: Thu, 16 Aug 2012 14:26:49 +1200 Subject: [PATCH] More work on markercluster post --- ...guest-post-markerclusterer-0-1-released.md | 38 +++++++++++++++---- 1 file changed, 30 insertions(+), 8 deletions(-) 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 index b0966fd4..87ffadca 100644 --- a/_posts/2012-08-16-guest-post-markerclusterer-0-1-released.md +++ b/_posts/2012-08-16-guest-post-markerclusterer-0-1-released.md @@ -11,11 +11,11 @@ When you zoom your map out, these markers all overlap and make the map look mess 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. +We needed something like this, but in Leaflet. 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: @@ -34,13 +34,20 @@ Using the Marker Clusterer is easy, just replace your existing L.FeatureGroup us var markers = new L.MarkerClusterGroup(); markers.addLayer(new Marker([175.3107, -37.7784])); - //Add more markers + //Add more markers here... map.addLayer(markers); -You can also use all of the L.FeatureGroup event features for both individual markers and clusters: +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'); }); +### Best Practices + + * To get the best performance from the clusterer you should add all of your markers to it before adding it to the map (like we did above). + * If you are going to move a marker that is in a L.MarkerClusterGroup you must remove it first, then move it, then re-add it. If you move it while it is in the MarkerClusterGroup we can't track it and that marker will become lost. + * Although the clusterer supports having markers added and removed from it while it is on the map it does not perform as well as when they are added while it is not on the map. If you need to do a large update to the markers in a MarkerClusterGroup you may want to remove it from the map, change the markers then re-add it. + ### The Technical bits The underlying clustering algorithm (MarkerClusterGroup._cluster) is plain greedy clustering. @@ -49,8 +56,23 @@ The underlying clustering algorithm (MarkerClusterGroup._cluster) is plain greed 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. +The first clustering step we do for the maximum (bottom most) zoom level, we then cluster all of the resulting markers and clusters to generate the next zoom level up and so on until we have reached the top. +These clusters are stored in a tree (A cluster contains its child clusters) with good geospatial qualities. We use this tree to optimise identifying what markers and clusters are on screen at any particular zoom level. + +#### L.DistanceGrid + +L.DistanceGrid provides some nice optimization when clustering (Contributed by mourner of course!). + +To cluster the markers we need to compare every marker with every other marker to try form a cluster. +To make this quicker we reduce the set of markers we need to compare with, L.DistanceGrid does this by putting all markers on a grid sized 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) +This can be quite a big performance win as we only look at markers that we are likely to form a cluster with. (check out the initial PR for numbers) + +### Closing Words + +I hope you enjoy using the clusterer and get everything you want out of it. If you do use it in a public site please throw me an email so I can check it out and potentially link it on the github site. + +If you have any issues also please log a bug on the github page. + +Enjoy! +Dave Leaver. \ No newline at end of file