Как изменить размер большого кол-ва иконок на карте leaflet?

Question

[Alexander]

У меня есть карта, на ней есть маркеры с svg иконками. При масштабировании карты изменяется и размер иконок. На данный момент я для каждой иконки меняю размер и вызываю метод setIcon для каждого маркера, чтобы заново установить иконку.

Это плохо, потому что нужно помнить, какая иконка относится к определенному маркеру и я не уверен, что это эффективно с точки зрения производительности.

У меня есть массив иконок. Большой, элементов 200. Выглядит так:

var icons = [
    'one' : L.icon({
        iconUrl:    '/icons/one.svg',
        iconSize:   [24, 24],
        iconAnchor: [12, 24],
    }),
    'etc' : L.icon({
        iconUrl:    '/icons/etc.svg',
        iconSize:   [24, 24],
        iconAnchor: [12, 24],
    }),
    ...
]

Далее я создаю маркеры:

var markers = [];      

function addMarker(icon, lat, lng) {
    var marker = L.marker([lat, lng], {
        icon: icons[icon],
        draggable : true
    }).addTo(map);
    marker.icon = icons[icon];
    markers.push(marker);
}

addMarker('one', 0, 0)
....

В конце концов, я по событию ресайза высчитываю modifier и меняю размер иконок и реассайню их:

map.on('zoomend', function() {
    var currentZoom = map.getZoom();
    var modifier = 1;
    switch (currentZoom) {
       // считаем modifier
    }
    
    // ресайзим все иконки
    for (var i in icons) {
        icons[i].options.iconSize = [size * modifier, size * modifier];
        icons[i].options.iconAnchor = [size / 2 * modifier, size * modifier];
    }
    
   // реассайню все иконки
    for (var i in markers) {
          markers[i].setIcon(markers[i].icon);
    }
});

Answer 1

[Радость моя]

я вам советую использовать divIcon вместо Icon и присвоить css-класс ко всем одинаковый. Им уже и управляйте. Надеюсь правильно понял.

Впринципе к Icon тоже вроде можно css-класс присвоить.

Куда проще будет вызвать чтото типа

$('.my-lf-icon').css('...','...')