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

user_18407978 0
Viewed 295

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? Expected result

Thanks a lot!

markers leaflet nan count javascript
2 Answers

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

user_82839380

I tried this. It does give me the correct number, but I am still tinkering with how to put it inside the L.control

var lg_cityMarkers = L.layerGroup([romaMarker, fidenaeMarker, antemnaeMarker, caeninaMarker, politoriumMarker]);
var totalCities = lg_cityMarkers.getLayers().length;
alert(totalCities);

You can see this live on this page: https://elcuentoderoma.com/rome/

Disclaimer: I am affiliated with this site.

user_179271140
Related