3

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.

1
  • 1
    LOL @IvanSanchez. Deepak, this is not the kind of question Stackoverflow wants to see. Some more effort is required like, how did you try to solve it yourself? What did your research turn up? What solutions did you try? Why didn't it work? What errors did you get? Etc. Take a few minutes and read this please: stackoverflow.com/help/how-to-ask then come back and edit your question.
    – iH8
    Feb 17, 2016 at 10:54

1 Answer 1

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.