How do I show a label beyond a certain zoom level in Leaflet?

Question

I\'m pretty new to the Leaflet library, and to JavaScript in general, and I\'m stuck trying to figure out how to show/hide a leaflet Label based on the zoom level (and the marke

Answer 1

Leaflet's layers don't have events fired when zooming the map. The actual map instance does. But binding an eventhandler to each feature would turn into a performance nightmare when you start having more features. You're better off handling the map zoomevent and then fetching all the features in your layer and showing the labels if needed. For example:

var geoJsonLayer = L.geoJson(featureCollection, {
    onEachFeature: function (feature, layer) {
        layer.bindLabel(feature.geometry.coordinates.toString());
    }
}).addTo(map);

var visible;

// Attach map zoom handler
map.on('zoomend', function (e) {
    // Check zoom level
    if (map.getZoom() > 10) {
        // Check if not already shown
        if (!visible) {
            // Loop over layers
            geoJsonLayer.eachLayer(function (layer) {
                // Show label
                layer.showLabel();
            });
            // Set visibility flag
            visible = true;
        }
    } else {
        // Check if not already hidden
        if (visible) {
            // Loop over layers
            geoJsonLayer.eachLayer(function (layer) {
                // Hide label
                layer.hideLabel();
            });
            // Set visibility flag
            visible = false;
        }
    }
});

// Fits to layer bounds which automaticly will fire the zoomevent
map.fitBounds(geoJsonLayer.getBounds());

Here's a working example on Plunker: http://plnkr.co/edit/V8duPDjKlY48MTHOU35F?p=preview

Answer 2

Since none of the previously posted solutions worked for me, I post here the code that did work, particularly for maps where not every layer object on the map is assumed to be a marker object. Assuming the created L.Mapobject is stored in the map variable, put this after your map initialization code:

var show_label_zoom = 20; // zoom level threshold for showing/hiding labels
var labels_visible = true;
function show_hide_labels() {
    var cur_zoom = map.getZoom();
    if(labels_visible && cur_zoom < show_label_zoom) {          
        labels_visible = false;
        map.eachLayer(layer => layer.hideLabel && layer.hideLabel());               
    }
    else if(!labels_visible && cur_zoom >= show_label_zoom) {           
        labels_visible = true;
        map.eachLayer(layer => layer.showLabel && layer.showLabel());               
    }
}
map.on('zoomend', show_hide_labels);
show_hide_labels();