CODEWITHSUNDEEP
leafletsizezoomingmarker
Amdir
Amdir

Reputation: 1

Different size for markers (L.icon) on zoom level

I am working on a map in leaflet, and I was wondering how to make two different sizes for icons, where the larger size would activate on the largest zoom level? Currently the icons look far too small on the max zoom level.

This is how the icons' sizes are determined:

var playerIcon = L.icon({
    iconUrl: 'images/players.png',  // Location of file to be used as icon.
    iconSize: [38, 38],             // Size of icon on map.
});

I was wondering if it would be possible to have something like "iconSize1" and "iconSize2" for each icon, and have the iconSize 2 activate on zoom level 6.

Thanks in advance!

Upvotes: 0

Views: 1193

Answers (1)

peeebeee
peeebeee

Reputation: 2618

You could define 2 icons and swap icons on the marker depending on the zoom....

var playerIcon1 = L.icon(....);
var playerIcon2 = L.icon(....);

map.on('zoomend', function(e) {
    if (map.getZoom() < 6) {
        marker.setIcon(playerIcon1);
        } else {
        marker.setIcon(playerIcon2);
        }
});

Upvotes: 3

Related Questions