Zooming In and Showing/Hiding Labels in Leaflet - leaflet

Question

I have run into an issue that I can't find a solution anywhere. In my map, because of the number of features, I wait for the map to be zoomed in to a certain extent prior to showing the labels, I found a solution that was suggested as working, but in an older version.
Below is the code sample. The two console.logs do appear when zoomed in to and past the specified level and zoomed out and past the specified level. But the labels just don't appear at all.
mymap.on('zoomend', function() {
var zoom = mymap.getZoom();
if( mymap.hasLayer(lots) ) {
lots.eachLayer( function (layer){
//console.log(layer);
if ( zoom >= 21 && (!layer.getTooltip()) ) {
layer.bindTooltip(layer.feature.properties.lot_number, { sticky: true ,permanent: true, interactive: false , direction: 'center',className: 'countryLabel'});
console.log('zoomedin');
} else if ( zoom < 21 && (layer.getTooltip()) ) {
//console.log('remove tooltip');
layer.unbindTooltip();
console.log('zoomedout');
}
});
}
});
This is how my lot feature data structure is defined prior to and shows up correctly on the map.
{
"properties": {"lot_number": "{{$l->lot_number}}", "lot_id": "{{$l->id}}", "status_color": "{{$l->status->color}}","block_number": "{{$l->block->id}}","section_number": "{{$l->section->section_number}}"},
"type": "{{$l->coordinates['type']}}",
"coordinates": [[{{json_encode($l->coordinates['coordinates'][0][0])}}]]
},
If anyone has any suggestions, I would greatly appreciate them. Thank you!
I have discovered it isn't a zoom level issue because the divs do appear once past the zoom level required. It's somohow in the formatting of the data I want to put in the Tooltip.
In another portion of code I retrieve the properties like such:
var lots = L.geoJSON(myLines, {
onEachFeature: function(feature, layer) {
layer.bindPopup("<b>Lot Record #"+feature.properties.lot_number+"</b><br/>Block "+feature.properties.block_number+"<br>Section "+feature.properties.section_number+"<br><a href='lots/view/"+feature.properties.lot_id+"'>View Details</a>");
layer.setStyle({
fillColor: feature.properties.status_color,
fillOpacity: 0.8,
weight: 0.5
});
}
}).addTo(mymap);
But the above is through the feature.properties... whereas the bindTooltip method I am trying call that is having the issue uses layer.feature. but I am unsure regarding the rest of the statement to get to the properties correctly.
I found my problem to be that by going through the "layer" before the "feature", the properties is accessed through a different method. The correct format should be layer.feature.geometry.properties.lot_number.

Answer 1

Your code is working for me: https://jsfiddle.net/falkedesign/5x2r37pL/
I test it with zoom lvl 10:
if ( zoom >= 10 && (!layer.getTooltip()) ) {
Maybe is the zoom with 21 to high for your map

Answer 2

I found my problem to be that by going through the "layer" before the "feature", the properties is accessed through a different method. The correct format should be layer.feature.geometry.properties.lot_number. This was accomplished by logging the features and tracing their data structures returned in the objects.