Comments (15)
You are right, old value is overwritten this way. My project uses a hardcoded value of 120 (default one), and it works fine this way:
map.on('zoomend', function(){
pruneCluster.Cluster.Size = (map.getZoom()>= mymaxclusterzoom)? -1 : 120;
pruneCluster.ProcessView(); // looks like it works OK without this line
})
Tried to post a more generic version of it and messed the code 😬
To use a user selected size, we should store the value outside the event function:
// somewhere else
mysize = 120;
map.on('zoomend', function(){
pruneCluster.Cluster.Size = (map.getZoom()>= mymaxclusterzoom)? -1 : mysize;
pruneCluster.ProcessView(); // looks like it works OK without this line
})
from prunecluster.
Looking forward for this nice feature.
from prunecluster.
Hello,
A disableClusteringAtZoom feature is not available. The easiest solution is removing the PruneCluster layer and adding the Leaflet markers directly.
It's also possible to do that in the ProcessView method, but this method is already huge so I think a separate component is better.
I will add this feature on the TODO list, I think it can be useful in some cases. But if you want something working before a long time, I suggest removing the PruneCluster layer and adding the leaflet markers directly when zoomed. It's not the fastest solution, but with 1000 markers it should be ok.
from prunecluster.
👍 I'd also need this feature already with two projects.
from prunecluster.
You can also reduce the size of the grid when zoomed. I will try this approach first.
If you really want to display all the markers on the map, you might need something like this : https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet
from prunecluster.
Thanks @yellowiscool for the quick feedback. Reducing the size of the grid can probably do this, that's what I was thinking at first.
My scenario is the following: I have a search tool on the map, once users click on a search result, I map.setView() to center the map to the selected marker and zoom to it. In most cases, this works fine, but in some, the selected marker is inside of a cluster with 2 or 3 markers.
Which makes me think of yet a different approach: maybe disable clusters if there are less than x markers in it (2 or 3 in my case)?
from prunecluster.
Yes selecting a marker is not satisfactory in the current version. In my application when a marker is selected I remove (or filter) it from PruneCluster and add it again directly as a Leaflet object. But it's not perfect because it can hide the cluster just below.
I need to think about how to select a marker easily, even when it's inside a cluster. The selected marker should also be draggable, be able to open popups…
Disabling the cluster when it has 2 or 3 markers is a good idea, but it's not a perfect solution. If you still have a cluster with a small grid and a high zoom level, it's often because the markers are exactly at the same position or are very close. Also the current algorithm doesn't allow this without a big performance cost or a lot of changes (everything is a cluster in the current implementation).
from prunecluster.
Quick update: for now, I have fixed this issue by changing the maxZoom on the map. It used be set at 19, which was a little too deep, and now it's at 17. PruneCluster respects it. Some markers that are too close, get the spiderfied treatment.
from prunecluster.
+1. I'd really like to see this feature too.
from prunecluster.
+1 ;)
from prunecluster.
First of all, you may want to set zoomAnimation to false to avoid evil users clog your app. Then:
map.on('zoomend', function(){
var oldsize = pruneCluster.Cluster.Size;
pruneCluster.Cluster.Size = (map.getZoom()>= mymaxclusterzoom)? -1 : oldsize;
pruneCluster.ProcessView(); // looks like it works OK without this line
})
from prunecluster.
Does it work for you? You set -1 as grid size, which is a value I haven't think about when I wrote the algorithm. I quickly tried it and it doesn't work with 100 random elements.
from prunecluster.
Here's a similar workaround that works as long as there are no clusters with exactly the same latlng.
var decluster = false;
function clusterMarkers() {
if(pruneCluster){
pruneCluster.Cluster.Size = .0000000000001;
pruneCluster.Cluster.Margin = .000000000001;
pruneCluster.ProcessView();
}
}
function declusterMarkers() {
if(pruneCluster){
pruneCluster.Cluster.Size = 35;
pruneCluster.Cluster.Margin = 10;
pruneCluster.ProcessView();
}
}
leafletMainMap.on('zoomend', function () {
if (leafletMainMap.getZoom() > 9) {
if (decluster === false) {
clusterMarkers()
decluster = true;
}
}else{
if (decluster === true) {
declusterMarkers()
decluster = false;
}
}
});
from prunecluster.
@AbelVM solution isnt suitable for large number of markers. When going from declustered to clustered views, there's a noticable lag since a lot of markers are being rendered while the switch hasnt been made yet.
from prunecluster.
any news on this feature?
from prunecluster.
Related Issues (20)
- cluster onClick event
- "broken" link in readme HOT 1
- tooltips with permanent option issue HOT 1
- Possible to use X/Y point coordinates instead of LatLng? HOT 1
- Question: Cluster by distance HOT 4
- Cluster not updated for custom data fields
- Cluster not updating custom (rotationAngle & rotationOrigin) data fields in realtime HOT 1
- Cluster not updating custom (rotationAngle & rotationOrigin) data fields in realtime HOT 1
- PruneCluster webpack compability with newest exports-loader
- z-index for different clusters
- Change speed of the moving marker when .move is used? HOT 1
- Marker Clustering ServerSide HOT 2
- Svelte Import issue
- prune cluster in vue js
- Touch not working with latest Samsung browser HOT 3
- Is there any feature so we can toggle between cluster and markers? HOT 3
- Open the popup of a marker in the programm HOT 2
- showCoverageOnHover PruneCluster
- markerPop and clustering conflicting
- popups keepInView: false,
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from prunecluster.