javascript - Filter shows "true" instead of wanted labels in Leaflet

Question

Filter certain numbers out to show as labels in Leaflet. The code below do filter correctly but it does not show the correct labels, it shows "true" on the map instead of the wanted numbers 650 to 699. What changes is needed to display the properties labels instead of "true" from this filtration?

var local_points = new L.layerGroup();

    function local (feature){
        var filter = (feature.properties.local >= 650 && feature.properties.local < 699)
        return filter;
    };

var collisionlocal = L.LayerGroup.collision({margin:5});

$.getJSON("/geodata/localID_points.geojson", function(json) {

var points = L.geoJSON.collision(null, {
    pointToLayer: function(feature,latlng){
    label3s = String('<span class="textLabelclass3small">' + local(feature) + '</span>')
return new L.marker(latlng, {
        icon:createLabelIcon("textLabelclass3small",label3s)
        });
        }
    });

    var createLabelIcon = function(labelClass,labelText){
        return L.divIcon({ 
            className: labelClass,
            html: labelText
            });
        };

points.addData(json);
collisionlocal.addLayer(points);
collisionlocal.addTo(local_points);

});

question from:https://stackoverflow.com/questions/66054354/filter-shows-true-instead-of-wanted-labels-in-leaflet

Answer 1

You need to apply the filter to the geoJson call and not in the text:

var points = L.geoJSON.collision(null, {
    filter: local,
    pointToLayer: function(feature,latlng){
        label3s = String('<span class="textLabelclass3small">' + feature.properties.local + '</span>')
        return new L.marker(latlng, {
           icon:createLabelIcon("textLabelclass3small",label3s)
        });
     }
});