I may have a lot of marker in some area but this is not really useful to display the tooltip if there is 5 of them in the same area, like this screen :
Is it possible to hide
those tooltip from a zoom range ? For example, hide tooltip from the level 0 to 5.
Maybe using the getZoom()
method with an event on the zoom like :
if the user zoom {
if (getZoom() < 5) {
hide all tooltip
}
}
Or something more complicated but better which could hide it if there is too many marker in the same area ?
The accepted answer did not work for me (I'm using Leaflet 1.2.0), but here is a modified version that uses the permanent
option of Leaflet's tool tip:
var lastZoom;
mymap.on('zoomend', function() {
var zoom = mymap.getZoom();
if (zoom < tooltipThreshold && (!lastZoom || lastZoom >= tooltipThreshold)) {
mymap.eachLayer(function(l) {
if (l.getTooltip()) {
var tooltip = l.getTooltip();
l.unbindTooltip().bindTooltip(tooltip, {
permanent: false
})
}
})
} else if (zoom >= tooltipThreshold && (!lastZoom || lastZoom < tooltipThreshold)) {
mymap.eachLayer(function(l) {
if (l.getTooltip()) {
var tooltip = l.getTooltip();
l.unbindTooltip().bindTooltip(tooltip, {
permanent: true
})
}
});
}
lastZoom = zoom;
})
Using this method you also have to set the permanent
option when you initially bind the tool tip to the marker as well:
(mymap.getZoom() >= tooltipThreshold
? marker.bindTooltip(tooltipText, {permanent:true})
: marker.bindTooltip(tooltipText, {permanent:false} )
);
On a separate but related note, the link in the accepted answer is for a stackoverflow question about the Leaflet Label plugin, which has been incorporated into the Leaflet core as the tool tip and is now obsolete, so don't waste time there if you have the latest version of Leaflet.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With