Estoy simplificando mi desafío con el siguiente jsfiddle.net

Estoy agregando 3000 íconos de un hámster en lugares aleatorios y una vez que se completa el proceso, es muy difícil acercar/alejar.

Pregunta, ¿cómo debo abordar este problema (addImages) si no puedo agrupar los íconos en grupos? ¿Hay alguna manera mejor? (Intenté usar svg en lugar de png, el mismo problema)

 class Simulation { constructor() { // center of the map var center = [1.8650, 51.2094]; // Create the map var map = L.map('map').setView(center, 2); // Set up the OSM layer L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map); this.imagesLayer = new L.layerGroup(); this.imagesLayer.addTo(map); } addImages() { console.log('ok, add') for (var i=0; i<3000; i++) { var flagIcon = L.icon({ iconUrl: 'https://cdn-icons-png.flaticon.com/512/196/196817.png', iconSize: [15, 15], // size of the icon shadowSize: [18, 18], // size of the shadow iconAnchor: [18, 18], // point of the icon which will correspond to marker's location shadowAnchor: [4, 62], // the same for the shadow popupAnchor: [-1, -1] // point from which the popup should open relative to the iconAnchor }); var randLat = Math.floor(Math.random() * 90); randLat *= Math.round(Math.random()) ? 1 : -1; var randLon = Math.floor(Math.random() * 180); randLon *= Math.round(Math.random()) ? 1 : -1; var flag = L.marker([randLat,randLon], {icon: flagIcon}) this.imagesLayer.addLayer(flag) } } removeImaegs() { console.log('ok removed') this.imagesLayer.clearLayers(); } } var simulation = new Simulation();