As someone new to the Leaflet library and JavaScript in general, I'm currently facing a challenge with showing/hiding a leaflet label based on the zoom level. The markers are within a 'cluster' layer loaded via AJAX callback, and I bind the popup and label using the onEachFeature. Afterwards, I add the geoJson marker layer to the map.
I've attempted to display the labels only when zoomed in to a certain level without success. I even tried integrating the leaflet.zoomcss.js, but it seems like my implementation is not correct.
Sample:
var officesLayerGroup = L.markerClusterGroup();
var currentMakers;
function DisplayLocalOffices(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) {
// Function to add popup based on information in the 'layer' or marker
// Keeping track of the layer(marker)
feature.layer = layer;
var props = feature.properties;
if (props) {
var desc = '<span id="feature-popup">';
//.. additional HTML content here!
// Binding label with specific options
layer.bindPopup(desc);
layer.bindLabel('Hi Label!', { noHide: true, className: 'my-css-styled-labels'});
}
}
Another attempt I made was:
layer.on({
zoomend: showLabel(e)
});
Alongside this simplified function:
function showLabel(e) {
z = map.getZoom();
if (z > 6) {
layer.bindLabel("HIYA", { noHide: true, className: 'my-css-styled-labels' });
}
}
Despite trying different approaches, including adding the library and CSS styles for leaflet.zoomcss.js, I haven't had any success. I apologize for the detailed explanation, but any assistance would be greatly appreciated!