leaflet / leaflet.markercluster Goto Github PK

Currently to tidy up after an animation we use setTimeout({}, 250);
We should probably instead listen to the *transitionEnd events if possible.
L.Transition provides functionality for doing so if it fits.

grantlucas posted this:

From https://github.com/danzel/Leaflet.markercluster/issues/38

I have a big map with no weird stuff:

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

However, when I doubleclick on a marker, I espect it to zoom just as if I would have clicked anywhere else. Is it possible to make the 'dblclick' event propagate to the underlaying map?

Or even better: have an option to zoom on click, but not zoomToBoundsOnClick, just a regular 1 step zoom similar to a double click.

I apologize if this has already been addressed but I didn't see it mentioned: Now it seems that any time two markers or more are close to one another, they get clustered together. Is there a way to change this so clusters will only be formed if say we have 5 markers that are close together? Or 10? Or any number we choose?

When adding new markers to a map, it'd be great to be able to easily check if it already has that layer. It's pretty simple to do without this function but it would be a nice added feature.

The example here is, I have 100 markers on the page, with a priority attrtibute, which I am using to define which pin image/style they have. I now want to do something similar with the clusters.

For example, if there are 2 attributes in the currently viewed clustered pins, normal and high, I want to colour the cluster based on the priority, so if any of the markers in a cluster have the 'high' attribute, I want to apply a certain class to the cluster, and another if not.

Is there a way currently to access the markers in a cluster at the point the styles are applied to that cluster?

In the current 'realworld' example, if I zoom out and start to pan, the cluster of 388 disapears about 4 times out of 10, it almost looks like it happens more the further out I zoom, it usually reappears with another pan or zoom. Interestingly, it doesn't happen in the 'custom' example, that I could see anyway.

Do a gift-wrapping implementation so we can show the area that the child clusters cover

This can be seen using the example from issue #49 -> http://pastebin.com/qqr29pCN . Increase the number of markers to make the effect more pronounced. Adding even a few thousand new markers pegs my CPU at 100% and takes minutes, with the browser asking to kill the page in the meantime. This happens whether or not I first remove the markerclustergroup before adding the new layers.

This will mean we can cluster in new points really fast.
Will probably need to remember the parent of a cluster too.

Check #37 for details.

L.markerClusterGroup = function (options) {
    return new L.MarkerClusterGroup(options);
};

You can also update the examples accordingly, e.g.:

map.addLayer(new L.Polygon(a.layer.getConvexHull()));
// turns to
L.polygon(a.layer.getConvexHull()).addTo(map);

This may or may not be related to #53

I have a set of filters on my map to limit which markers are shown.

If I limit the markers to only one marker is showing which would otherwise be clustered, the position is accurate as seen here. If I have both markers in the cluster, spiderfy, and then update the filters so that only one marker is left, the location of that marker is the position of where it spiderfied to instead of the location original location as seen here. The lines still showing is what's referenced in #53 and why i think they might be related.

When my filters change, I'm

• Removing the cluster layer from the map
• Re-initializing the cluster layer with new L.MarkerClusterGroup();
• Loop through markers which should remain on the map and add their layers to the cluster layer
• Once done, add the marker cluster layer to the map again

Below is the code

//Clear the current marker cluster group
me.map.removeLayer(me.markerCluster);
me.markerCluster = new L.MarkerClusterGroup();

//Go through items and update which are on the map
for(var id in me.markers)
{   
    //Add it to the layer group
    me.markerCluster.addLayer(me.markers[id]);
}   

me.map.addLayer(me.markerCluster);

Let me know if anymore information is needed!

They work properly with version 0.4.4.

Required version of Leaflet in readme file should be updated.

I have to manage about 30000 markers, i don't know how to show or hide some of them without reload all the marker data .could you show me how to do it?
(I notice that , when the markerClusterGroup render the markers , it sets the opacity to 1 )

Thanks a bundle

Steal the leaflet build script and integrate it. Also include a prebuilt .js/css file in the repo

I had been using an older version of markercluster with an app that pulls GeoJSON from CartoDB. Everything worked fine, but I wanted to take advantage of the singleMarkerMode in the newer version. After I updated, map.addLayer(clusters) crashes my app. It's not giving me a javascript error, just freezing my browser. Not sure how to narrow the issue down. When I switch to just adding the points (around 8,000), they load fine. Is there an issue with the way I'm creating these clusters and/or creating the markers?

$.getJSON(svcGeoUrl, function(data) {
    var clusters = new L.MarkerClusterGroup({showCoverageOnHover: false});
    var points = L.geoJson(data.features, {
        pointToLayer: function(feature, latlng) {
            var marker = L.marker(latlng);
            clusters.addLayer(marker);
            return clusters;
        }
    }).addTo(map);
    map.fitBounds(points.getBounds());
    map.panBy([160,0]);
});

I also tried it this way:

$.getJSON(svcGeoUrl, function(data) {
    var clusters = new L.MarkerClusterGroup({showCoverageOnHover: false});
    var points = L.geoJson(null, {
            pointToLayer: function (feature, latlng) {
                var marker = L.marker(latlng);
                clusters.addLayer(marker);
                return clusters;
            }
        });
    $.each(data.features, function(fid, feature) {
        points.addData(feature);
    });
    map.addLayer(clusters);
});

Thanks a lot in advance!

Since sending the #30 pull, I noticed that it's not the best approach too. There are some consideration to take into account. Take a look at the image comparison here: http://imgur.com/a/iadup

The current approach (after mergin the pull), illustrated on the first image, is to calculate weighted centers during clustering (and use them immediately). As cluster centers are easily shifted on each point/cluster added, the resulting clusters can contain children spread across large areas (instead of containing clusters roughly 2*maxRadius from each other). So its seems quite flawed.

The original approach (2nd image) was to continuously calculate centers as cluster bounds during clustering. As centers are recalculated during clustering, it has the same flaw as the first approach, although less pronounced as centers shift not as much.

I thought about how to overcome the mentioned flaw and came up a new approach (3rd image) — while clustering, use only the first cluster point as cluster center and do not change it. This way there are no shifts, and cluster areas are more consistent and don't grow out of control. After the clustering, we can then choose other centers for clusters on display. E.g. this image shows first point centers while clustering, but with weighted centers when showing.

I'm now leaning towards the last option, although it's not without flaws too, e.g. coverage areas often collide, but I think that this is related to the greedy algorithm in general, not in approach to choosing centers, and can't be fixed easily. You can check out how this works with this commit https://github.com/mourner/Leaflet.markercluster/commit/6616abd444296cc5a77463a3c8cf8b62fd6f0e94

Let me know what you think!

Hi,

I just wanted to let you know about a bug in the custom example: http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-custom.html.

My JavaScript console gives the following error: Uncaught TypeError: undefined is not a function . It's on Line 281 of MarkerClusterGroup.js.

If we generate some extra parent levels in the cluster tree initially it will allow the tree to be more tree like (currently it is just 1 level), which should give better performance as less nodes/markers need to be visited to work out what to draw.

Should do something smartish to work it out, like while there are > 100 clusters in the top level, generate another top level.

In Leaflet source, L.Util.requestAnimFrame(fn, context) is used everywhere in place of setTimeout. It does practically the same but executes much faster. Try it!

Also, if you need to request the same update in several different places, you can do cancelAnimFrame before the request, so that multiple actions only trigger one reflow/repaint and update call. E.g. this is used on Leaflet move while panning, because browser can't update the screen as fast as the mouse moves.

I'll probably write a post about this trick in a future Leaflet blog.

It would be fantastic if the marker clusterer supported layers like the stock leaflet layer functionality so users can enable/disable layers of markers and have the clusters update accordingly.

Using the same example as #49, http://pastebin.com/qqr29pCN , I notice that the marker reload in response to panning generates a very different set of clusters from those created on the initial load. Looking at the JS of the example, you can see that the panning operation causes a MarkerClusterGroup.clearLayers() call to be made, then all the original markers re-added.

I've seen this on my own maps as well, often resulting in clusters stacked on top of one another where the original cluster has been split. A demonstration:
-Navigate here: http://www.ezgeo.net/search?state=VT&county=Windham&county_search_type=Building

• Note near the center of the map the cluster of four markers. Also note the cluster of 22 markers to the SE.
• Pan the map ever so slightly. This will cause the MarkerClusterGroup to be cleared, a new query performed, and the new markers being added to the MarkerClusterGroup..
• The cluster that formerly contained four markers has been split into a cluster of three + one stand-alone. The cluster that formerly contained 22 markers has been split into three overlapping clusters of 9, 9, 3, and one stand-alone marker.

Need to do something like:
https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet

Or maybe show a list or something

Not sure why this happens but when the number of cluster on the screen gets to more than 10-20, pinch-zoom starts being very laggy. Usual markers don't seem to cause such performance hit. Needs some research (maybe this issue belongs to Leaflet and not here but lets take a look first).

My guess is that the majority of users of this plugin will want experience done in the "everything" example (plus the zoom-to-cluster/spiderfier stuff) out of the box, and they'll have to copy/paste lots of code.

I'd like to propose implementing sensible defaults for the plugin, so that user gets the "everything" functionality out of the box and can turn individual features off and add custom functionality easily.

Similar to how it's done in Leaflet, for example, for default map controls, you can do this with MarkerClusterGroup options, enabling things on hover/click by default but allowing this:

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

markers.on('click', function () { ... });

Hi,

My app utilizes lazy loading for markers via AJAX, I tried calling .clearLayers() in my MarkerClusterGroup instance but the clusters don't clear from the layer. Can't call myself a JavaScript guru but from what I can see in the MarkerClusterGroup.removeLayer() function the clusters should be recursively cleared from the map so why aren't they? Is this a possible bug or you just haven't implemented it yet?

thanks,
hezron

I have a cluster group layer that I clear and re-populate with every pan. The layer is set up as so:

featuresLayer = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageOnHover: true, zoomToBoundsOnClick: false });

After the initial map + clustered markers display (which works fine) I catch the Leaflet map "moveend" event which of course is fired at the end of panning. Inside this event handler I'm calling featuresLayer.clearLayers() followed by N featuresLayer.addLayer(a_newly_created_marker);

Panning and zooming works perfectly - the the new markers and groups are displayed dynamically as expected ... until I try panning with a spiderfied group, which causes an exception:

leaflet.js:6Uncaught TypeError: Cannot set property '_leaflet_pos' of null
n.DomUtil.setPositionleaflet.js:6
n.Marker.n.Class.extend._setPosleaflet.js:6
L.MarkerCluster.include.L.DomUtil.TRANSITION._animationUnspiderfyleaflet.markercluster-src.js:1510
L.MarkerCluster.include.unspiderfyleaflet.markercluster-src.js:1310
L.MarkerClusterGroup.include._unspiderfyleaflet.markercluster-src.js:1611
L.MarkerClusterGroup.L.FeatureGroup.extend.addLayerleaflet.markercluster-src.js:47
doBoundsRPCsearch:1070
handleMovesearch:1139
n.Mixin.Events.fireEventleaflet.js:6
n.Map.Drag.n.Handler.extend._onDragEndleaflet.js:6
n.Mixin.Events.fireEventleaflet.js:6
n.Draggable.n.Class.extend._onUpleaflet.js:6
n.DomEvent.addListener.e.(anonymous function).u

After this the markers/groups are all gone but I can still see one artifact - just the "legs" of the spider, and the map can no longer be panned.

I came across what I think to be a bug where if you have a cluster spiderfied and then remove the cluster layer from the map while it's spiderfied, the lines making up the spider effect remain on the map indefinitely.

Cluster Open

After removing the layer while open

I've come across a bug that if the clusterMarker layer is removed from the map while a coverage is being displayed, it gets stuck on the map. On a drag event i'm clearing the markers from the map to load a new set and in doing this will sometimes get these orphans.

The three coverages seen in this picture are from previous clusters before dragging the map.

To reproduce

• Hover over cluster to display coverage
• drag the map which triggers on dragend map.removeLayer(clusterLayer)
• keep mouse hovering over the cluster marker
• New markers are loaded clearing the current ones

Result

• New markers are loaded
• Old coverage is left behind on the map

Adding should be supported now, removing still isn't.

Hey,
I found a funny behaviour when retrieving points via AJAX and have their markers clustered.

I'm loading the points (a GeoJSON feature collection with about 370 points) from a REST service, and this is (a part of) my code:

$.getJSON(POIS_URL + "?limit=0", function(pois) {
    for (var i in pois.features) {
        var marker = new L.Marker(new L.LatLng(pois.features[i].geometry.coordinates[1], pois.features[i].geometry.coordinates[0]));
        marker.bindPopup(pois.features[i].properties.name);
        markers.addLayer(marker);
    }
});

If I run this code, my CPU usage goes up to 100% for nearly 10 seconds, and after that everything is displayed correctly.

Now comes the funny part:
if I make a synchronius request, everything is just as fast as one would expect.
I simply put $.ajaxSetup( { "async": false } ); in front of the code:

$.ajaxSetup( { "async": false } );
$.getJSON(POIS_URL + "?limit=0", function(pois) {
    for (var i in pois.features) {
        var marker = new L.Marker(new L.LatLng(pois.features[i].geometry.coordinates[1], pois.features[i].geometry.coordinates[0]));
        marker.bindPopup(pois.features[i].properties.name);
        markers.addLayer(marker);
    }
});
$.ajaxSetup( { "async": true } );

Is this a bug, or is my code just rubbish? I guess it should work with asynchronious requests as well. Since I'm not sure, I just post it here, maybe someone else can reproduce this behaviour. I've tested it using Chromium 18.0.1025.168 and Firefox 14.0.1 on Ubuntu 12.04.1, and both browsers act the same way, Firefox is even a bit slower than Chromium.

Regards

var markers = new L.MarkerClusterGroup();
L.geoJson(data).addTo(markers)

try animating child clusters opacity from 0 to 1 while them expand from parent cluster
(From Mourner)

(Reported via email from Dan Cowan @ Brightmind)

In my project I need a slightly different behavior at maximum zoom levels. Rather than clustering or spiderifying I'd like it to place markers back in their original positions. I can achieve this by having a regular marker layer for max zoom and the clustering layer for other zoom levels and switching the layers out using the zoomend listener. This is a rather inelegant solution though which wastes memory and processing power in the client, not ideal for mobile devices.

Next I'll look at modifying your plugin to see what I can do. I was wondering if you have any tips or suggestions about where to start? If this works, and looks like a worthwhile feature I'll be more than happy to contribute any code back to your project.

Once again, thanks for the effort on a great plugin.

I've not yet managed to come up with a consistent way to reproduce this, but it's quite easy - open the "everything" example and zoom quickly back and forth for a while until you see that a part of the clusters is missing. Looking at the DOM, they are there and even react on hover but have opacity: 0. Maybe it's something to do with your setTimeout hacks.

Hey Dave,

Spent several hours today figuring out how the clustering algorithm works, profiling and thinking about ways to optimize it, and I think I have a really great idea about it.

As you know most of the time is spent in MarkerClusterGroup._cluster method. I put several checkpoints to see how many times certain actions happened. Here's a snapshot from the 50k example and highest zoom level:

point to cluster comparisons: 62604635
merges into existing clusters: 41857
point to point comparisons for new clusters: 2133408
clusters created: 3977
unclustered points pushed: 4166 

As you see, there are ~63 million point to cluster comparisons, of which only 0.07% actually result in a merge into a cluster and most other iterations are wasted.

Lets suppose that instead of saving created clusters into a simple array (there are only 4k created), we put it into a grid with square cells of clusterRadius size. After this, to check if a particular point lies near a cluster, you only have to go through 9 cells (cell corresponding to a point and 8 surrounding ones) of a grid instead of going through ALL the clusters. As each cell will have ~1 cluster or no clusters in average, the amount of point to cluster comparisons will drop from 63 million to 50000*9 = 450000 max, and that's 140 times better.

Because we only create 4k clusters, keeping the grid vs pushing to an array won't have noticeable overhead, while the comparison drop mentioned above will have a massive impact.

Similarly, in this example there are ~2 million point to point comparison for creating new clusters from unclustered points, while there's only ~4k unclustered points and created cluster total. If we use a similar approach and maintain a grid for the unclustered points to make all comparisons, its amount should drop to 8000 (number of _clusterOne calls) * 9 = 72000 vs 2.1 million, which is 30 times better.

What do you think?

On iOS, if you have some markers spiderfied, pinch-zoom out will look buggy.

Maybe 50000 or 10000 points would be enough.

In our leaflet map, we have a table next to it that lists each of the points. When a row in the table is clicked, we would like to have a popup displayed over the cluster the point is in (or zoom to the point in the cluster and have a popup).

Before it worked fine because we didn't have clustering.

Is there a way to find the cluster of a given marker and then show a popup where the cluster is?

I have a weird issue. When clusterer is enabled on my map, on first load 'tile' layer initializes and then disappears. (I have tried different tiles but the issue is still there)

The tile layer will only reappear if the map is zoomed in or out using the buttons of zoom control. (I have tried to programmaticaly zoom in or out but it doesn't fix the problem).

I have the same issue on the realworld example page on my Samsung I9001 with 2.3.5 Android.

If the clusterer is disabled and markers are normally displayed on the map, then the tiles layer is displayed normally.

There's one annoying Chrome bug with tiles flickering on map borders that was fixed. Also, you can remove Leaflet files from lib folder and just include Leaflet through CDN.

I have an AJAX form when it changes it should update the map by removing all the markers and clusters, and place the new markers on the map, however once the markers are placed, I get an error logged saying map is null which is on line 340 (bounds = map.getPixelBounds(),).

Should this need to be fixed because I don't know what causes it to become null. This is my code:

var map, markers, objects = [], groupLayer;
var addMarkers = function(markerObj)
{
    if(typeof groupLayer !== 'undefined')
    {
        map.removeLayer(markers);
        map.removeLayer(groupLayer);
        objects = [];   
    }

    console.log(typeof map); // always says 'object'

    markers = new L.MarkerClusterGroup(
    {
        maxClusterRadius: 120,
        iconCreateFunction: function(count) 
        {
            return new L.DivIcon({ html: '<div>' + count + '</div>', className: 'leaflet-cluster', iconSize: new L.Point(46, 46) });
        },
        spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: true
    });

    $.each(markerObj, function(index, obj)
    {
        var profileLocation = new L.LatLng(obj.lat, obj.lng),
            locationMarker = new L.Marker(profileLocation);

        markers.addLayer(locationMarker);
        objects.push(locationMarker);
    });

    groupLayer = new L.FeatureGroup(objects);

    map.addLayer(markers).fitWorld();   
};

var profileMarkers = // object of markers

map = new L.Map('map');

var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/<API_KEY>/998/256/{z}/{x}/{y}.png', 
    {
        maxZoom: 18
    });

var defaultLocation = new L.LatLng(51.300, -1.8900);

map.setView(defaultLocation, 15).addLayer(cloudmade)

addMarkers(profileMarkers);

$(':input').change(function()
{
    // ajax goes here, returns object of markers
   addMarkers(response.markers);
});

What could be the problem for this?

I just set up Leaflet.markercluster on my map and noticed that the pop ups only work on spiderfied markers.

I get the same results when viewing the online demo.
http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-realworld.10000.html

While clusters/markers that are outside the buffer zone are hidden and it helps performance, I think it would be nice to try still not expanding the clusters in the buffer zone on zoom in, and only expand clusters which bounds intersect with the screen after zooming, and expand remaining clusters at the end of each panning (it would still look nice). This way you won't have lots of markers spread across an area 9 times the screen. The performance hit isn't noticeable on desktop screen but it is on iPad, for example.

Calling removeLayer() on the map to remove the cluster marker layer causes the crash when the cluster tries to merge split clusters.

Right now, due to the way we have our data setup and the amount of markers being dealt with, on every zoom end or drag end, the markers are re-retrieved and the clusterGroup is recreated. This works fine zooming in and out until the cluster group is removed during a zoom animation.

On my map, I don't show the cluster group when the map is below zoom level 5. When I go from 4, showing clusters, to 5, now showing none, the map crashes when it tries merge split clusters.

Error shown for line 252 of the -src file

Uncaught TypeError: Cannot read property '_zoom' of null