MapsAPI Cluster 5k

by Trufi

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<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,
    markerZoomAnimation: false,
  });

  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,
    animate: false,
    maxClusterRadius: 200,
  });

  markers.addTo(map);


  for (var i = 0; i < 3000; i++) {
    DG.marker(randomLatLng()).addTo(markers);
  }
});