Counting markers in a layer in leaflet and add it to a div

Question

I have a Leaflet map with markers and filters (checkboxes) and I would like to count the number of markers as the filters change.

I added this code which I found here Getting the count of markers in a layer in leaflet :

var counter = 0;

function onEachFeature(feature, layer) {
counter++;
console.log(counter)
}

L.geoJson(geojsonFeature, {
onEachFeature: onEachFeature
}).addTo(map);

The code works well but returns a NaN property. I would like to know if there is a way to reach the counter result as I would like to insert it in a div to my Leaflet Map?

Thanks a lot!

Answer 1

The first question is, do you have a geojson feature / geojson group or only markers?

If you have a GeoJSON group:

The simplest way would be to get all child layers of the geojson group, which is the marker count:

var group = L.geoJson(geojsonFeature, {
   onEachFeature: onEachFeature
}).addTo(map);

var counter = group.getLayers().length;

If you have only markers on the map (not in a group):

You can loop through all layers of the map and check if the layer is existing on the map:

var counter = 0;
map.eachLayer((layer)=>{
   if(layer instanceof L.Marker){
     counter++;
   }
});

Displaying the data as Control

L.MarkerCounterControl = L.Control.extend({
    options: {
        position: 'topright'
        //control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
    },

    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control fitall');
        this.button = L.DomUtil.create('a', '', container);
                this.button.style.width = 'auto';
                this.button.style.padding = '2px 5px';
        this.button.innerHTML = '0 Markers';
        L.DomEvent.disableClickPropagation(this.button);

        return container;
    },
        setCount(count) {
            this.button.innerHTML = count+' Markers';
        }
});

var control = new L.MarkerCounterControl().addTo(map)
control.setCount(10)

You can call after each layer change control.setCount(counter)

Demo: https://plnkr.co/edit/dyQKVQFDm5sBHzUK