JSFiddle - React, Tailwind, and code Playground

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js"></script>
<div id="container"></div>

CSS

html,
body,
#container {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

JavaScript

const map = new mapgl.Map('container', {
  center: [55.31878, 25.23584],
  zoom: 13,
  key: 'Your API access key',
});

function randomLngLat() {
  const center = [55.31878, 25.23584];
  return [
    center[0] + (Math.random() - 0.5) / 5,
    center[1] + (Math.random() - 0.5) / 10,
  ];
}

for (let i = 0; i < 1000; i++) {
  const marker = new mapgl.Marker(map, {
    coordinates: randomLngLat(),
    icon: 'https://mapgl.2gis.com/api/examples/marker.svg',
  });

  marker.on('click', (e) => {
    alert(`Marker ${i} clicked`);
  });
}