Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide tooltip in leaflet for a zoom range

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 :

enter image description here

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 ?

like image 436
Baptiste Avatar asked Feb 21 '17 10:02

Baptiste


1 Answers

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.

like image 73
Loren Maxwell Avatar answered Sep 19 '22 12:09

Loren Maxwell