JSFiddle - React, Tailwind, and code Playground

by Trufi

HTML

<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  margin: 0;
  width: 100%;
  height: 100%;
}

.marker-icon {
  border: 1px solid #000000;
  background: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

JavaScript

DG.then(function() {
  return DG.plugin('https://unpkg.com/[email protected]/dist/leaflet.markercluster.js');
}).then(function() {
  var center = [54.98, 82.89];

  var map = DG.map('map', {
    center: center,
    zoom: 14
  });

  var random = (function() {
    var seed = 15;
    return function() {
      seed = seed * 16807 % 2147483647;
      return (seed - 1) / 2147483646;
    };
  })();

  function randomLatLng() {
    return [
      center[0] + (random() - 0.5) * 0.1,
      center[1] + (random() - 0.5) * 0.25
    ];
  }

  var markers = DG.markerClusterGroup({
    disableClusteringAtZoom: 18,
  });

  markers.addTo(map);

  markers.on('clusterclick', function(ev) {
    alert('cluster click');
  });

  markers.on('click', function(ev) {
    alert('single marker click');
  });

  for (var i = 0; i < 500; i++) {
    DG.marker(randomLatLng(), {
      draggable: true
    }).addTo(markers);
  }
});