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 markers are in a 'cluster' layer).

The markers are all loaded via AJAX callback and then I bind the popup and label using the onEachFeature, then I add the layer of geoJson markers to the map.

I'd like to only show the labels when zoomed in to some level, but I haven't had any luck. I also tried adding the leaflet.zoomcss.js but I guess I'm not using that correctly.

Sample

var officesLayerGroup = L.markerClusterGroup();
var currentMakers;
function DiaplyLocalOffices(jqOffices) {

    currentMakers = new L.geoJson(jqOffices, {
        style: function (feature) {
            var c = feature.properties.markercolor;
            if (feature.properties.OfficeID == 0) {
                c = 'yellow';
            }
            return { color: c };
        },
        pointToLayer: function (feature, latlng) {
            return new L.CircleMarker(latlng, { radius: 7, fillOpacity: 0.5 });
        },

        onEachFeature: bindOfficePopup
    });
    officesLayerGroup.addLayer(currentMakers);
    map.addLayer(officesLayerGroup); 
}

function bindOfficePopup(feature, layer) {
    // This function adds the popup based on the information in the 'layer' or marker
    // Keep track of the layer(marker)
    feature.layer = layer;

    var props = feature.properties;
    if (props) {
        var desc = '<span id="feature-popup">';
        //.. a bunch of other html added here!    
        var warn = props.Warning ? props.Warning : null;
        if (warn !== null) {
            desc += '<font size="4" color="red"><strong><em>' + warn + '</em></strong></font></br>';
        }
        desc += '</span>';
        layer.bindPopup(desc);
        layer.bindLabel('Hi Label!', { noHide: true, className: 'my-css-styled-labels'});

    }
}

I've also tried adding it like this but that didn't work either:

    layer.on({
          zoomend: showLabel(e)
    });

and then a quickie function:

function showLabel(e) {
    z = map.getZoom();
    if (z > 6) {
        layer.bindLabel("HIYA", { noHide: true, className: 'my-css-styled-labels' });
    }
}

But no luck, even when adding the library and CSS styles for leaflet.zoomcss.js

Sorry for being lengthy, but any help would be really appreciated!

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 markers are in a 'cluster' layer).

The markers are all loaded via AJAX callback and then I bind the popup and label using the onEachFeature, then I add the layer of geoJson markers to the map.

I'd like to only show the labels when zoomed in to some level, but I haven't had any luck. I also tried adding the leaflet.zoomcss.js but I guess I'm not using that correctly.

Sample

var officesLayerGroup = L.markerClusterGroup();
var currentMakers;
function DiaplyLocalOffices(jqOffices) {

    currentMakers = new L.geoJson(jqOffices, {
        style: function (feature) {
            var c = feature.properties.markercolor;
            if (feature.properties.OfficeID == 0) {
                c = 'yellow';
            }
            return { color: c };
        },
        pointToLayer: function (feature, latlng) {
            return new L.CircleMarker(latlng, { radius: 7, fillOpacity: 0.5 });
        },

        onEachFeature: bindOfficePopup
    });
    officesLayerGroup.addLayer(currentMakers);
    map.addLayer(officesLayerGroup); 
}

function bindOfficePopup(feature, layer) {
    // This function adds the popup based on the information in the 'layer' or marker
    // Keep track of the layer(marker)
    feature.layer = layer;

    var props = feature.properties;
    if (props) {
        var desc = '<span id="feature-popup">';
        //.. a bunch of other html added here!    
        var warn = props.Warning ? props.Warning : null;
        if (warn !== null) {
            desc += '<font size="4" color="red"><strong><em>' + warn + '</em></strong></font></br>';
        }
        desc += '</span>';
        layer.bindPopup(desc);
        layer.bindLabel('Hi Label!', { noHide: true, className: 'my-css-styled-labels'});

    }
}

I've also tried adding it like this but that didn't work either:

    layer.on({
          zoomend: showLabel(e)
    });

and then a quickie function:

function showLabel(e) {
    z = map.getZoom();
    if (z > 6) {
        layer.bindLabel("HIYA", { noHide: true, className: 'my-css-styled-labels' });
    }
}

But no luck, even when adding the library and CSS styles for leaflet.zoomcss.js

Sorry for being lengthy, but any help would be really appreciated!

• javascript
• jquery
• css
• json
• leaflet

3 Answers 3

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

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();

In my case I made an AJAX callback previously. In this part of my code you 'll see the rules that I seted up following this example

map.on('zoomstart', function () {
try{
var zoomLevel = map.getZoom();
    //alert(zoomLevel);
    console.log(zoomLevel);
    //alert(zoomLevel);
var tooltip = $('.label');
    
    //alert(zoomLevel);
    console.log("zoomLevel");
    console.log(zoomLevel);

switch (zoomLevel) {
    default:
        tooltip.css('font-size', 0)
    if(zoomLevel>5)
    {
        tooltip.css('font-size', 10);
    }
    if(zoomLevel>13)
    {
        tooltip.css('font-size',20);
    }
}
}catch(ex)
{
alert(ex);  
} 
});

This line: var tooltip = $('.label') is about a CSS style that I have put at the beginning, these are the properties of my tooltip. In my case in two differents zoom levels I decided two font-sizes.

I hope it is of your help.