Mapbox with many markers/symbols

by amay077

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css">
<div id="map" style="height: 300px; width: 100%;"></div>

<div>
  <input id="markersNum" type="number" value="2000">
  <button id="addMarkers">Add Markers</button>
  <button id="clearMarkers">Clear Markers</button>
</div>

<div>
  <input id="symbolsNum" type="number" value="2000">
  <button id="addSymbols">Add Symbols</button>
  <button id="clearSymbols">Clear Symbols</button>
</div>

CSS

body { margin: 0; padding: 0; }

.marker {
display: block;
border: none;
border-radius: 50%;
cursor: pointer;
padding: 0;
}

JavaScript

const map = new mapboxgl.Map({
  container: 'map',
  bounds: [[134, 35], [135, 36]],
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [
          "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        ],
        tileSize: 256,
        attribution:
        "OpenStreetMap",
      },
    },
    layers: [{
      id: "BASEMAP",
      type: "raster",
      source: "OSM",
      minzoom: 0,
      maxzoom: 18,
    }],
  },      
});

// Marker
const markers = [];
document.getElementById("addMarkers").onclick = () => {
  const num = document.getElementById("markersNum").value;
	for (let i = 0; i < num; i++) {
  	const randX = Math.random();
  	const randY = Math.random();
    
    // create a DOM element for the marker
    const img = document.createElement('img');
    img.src = 'https://img.icons8.com/material/32/0000FF/marker--v1.png';
    
    const m = new mapboxgl.Marker(img)
      .setLngLat([134 + randX, 35 + randY])
      .addTo(map);
   	markers.push(m);
  }
};

document.getElementById("clearMarkers").onclick = () => {
	for (const marker of markers) {
  	marker.remove();
  }
  markers.splice(0);
};

// Symbol Layer

const symbolData = {
	'type': 'FeatureCollection',
	'features': []
};
map.on('load', function() {
  map.loadImage(
    'https://img.icons8.com/material/32/FF0000/marker--v1.png',
    (error, image) => {
      if (error) {
        throw error;
      }
      map.addImage('iconA', image);
      map.addSource('point', {
        'type': 'geojson',
        'data': symbolData
      });
      map.addLayer({
        'id': 'points',
        'type': 'symbol',
        'source': 'point',
        'layout': {
          'icon-image': 'iconA',
          'icon-size': 1,
          'icon-allow-overlap': true,
          'icon-ignore-placement': true,          
        }
      });
    }
  );
});

document.getElementById("addSymbols").onclick = () => {
  const num = document.getElementById("symbolsNum").value;
	for (let i =...