I use leaflet to draw maps, I want to map the circles so that they increase and decrease along with the image on it.

What I tried:

 let seats = []; let circles = []; const map = L.map('map').setView([-100, -100], 1); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); for (let i = 0; i < 1000; i++) { const lat = Math.random() * 65.71 - 79.94; const lng = Math.random() * 176.64 - 176.64; seats.push({ id: i, rowId: 1, status: Math.floor(Math.random() * 5) + 1, priceId: 123, title: 'title', x: lat, y: lng }); const color = () => { switch (seats[i].status) { case 1: return "#FE5F1B"; case 2: return "#33ABB1"; case 3: return "#EFAB1F"; case 4: return "#103754"; case 5: return "#D53D13"; default: return "#000000"; } }; circles.push(L.circle([lat, lng], 10000, { color: color() }).addTo(map)); } //Тут задаем размеры const setRadius = e => { switch (e.target["_zoom"]) { case 2: return 1; case 3: return 2; case 4: return 4; case 5: return 10; case 6: return 20; case 7: return 40; } }; map.addEventListener("zoom", function(e) { const radius = setRadius(e); circles.map(item => { item.setRadius(radius * 1000); }); }); 
 @import url("https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css"); #map { width: 100%; height: 100vw; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script> <div id="map"></div>

The circles of what size they were, stayed that way. What is the problem?

    0