Mapbox,leaflet: Increase marker size on Zoom

Question

How can I increase the size of all markers when we zoom in the map? I know we can use map.on('zoomend', function() {}); and change the icon size inside the function.But I have a lot of markers and looping through all of them and changing them individually doesn't seem like a good idea.

Answer 1

There is nothing wrong with looping through a set of markers on every zoomend event. Why doesn't it sound like a good idea?

An alternative to looping through markers is to extend the L.Marker class to do the work for you, something like:

L.Marker.Autoresizable = L.Marker.extend({

    onAdd: {
        map.on('zoomend', this._changeIcon, this);
    },

    onRemove: function(map) {
        map.off('zoomend', this._changeIcon, this);
    },

    _changeIcon: function(ev) {
        var zoom = this._map.getZoom();

        if (zoom <= 10) {
            this.setIcon(...);
        } elseif (zoom > 10 && zoom <= 15) {
            this.setIcon(...);
        } else {
            this.setIcon(...);
        }

    }

});

L.marker.autoresizable = function(latlng, options) {
    return new L.Marker.Autoresizable(latlng, options);
}

In this case, the Leaflet code will implicitly loop through all the event listeners for the zoomend event, which is pretty much the same (performance-wise) as looping through the markers yourself.