cluster with huge icons

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script src="https://unpkg.com/@2gis/mapgl-clusterer@^1/dist/clustering.js"></script>
<div id="container"></div>

CSS

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

JavaScript

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const center = [55.323, 25.235];

const markerIcon = getCircleIcon('#0000ff', 25);
const clusterIcon = getCircleIcon('#ff0000', 30);

const map = new mapgl.Map('container', {
  center,
  zoom: 12,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});

const clusterer = new mapgl.Clusterer(map, {
  radius: 40,
  clusterStyle: {
    icon: clusterIcon,
    labelFontSize: 25,
    labelColor: '#000',
    labelHaloRadius: 3
  }
});


const markers = [];
for (let i = 0; i < 1000; i++) {
  markers.push({
    icon: markerIcon,
    coordinates: [center[0] + (Math.random() - 0.5) / 2, center[1] + (Math.random() - 0.5) / 2],
    label: {
      text: 'â„–' + i,
      fontSize: 15,
      color: '#fff'
    }
  });
}

clusterer.load(markers);

function getCircleIcon(color, radius) {
  const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="${radius * 2}" height="${radius *
        2}" viewBox="0 0 ${radius * 2} ${radius *
        2}"><circle stroke="#000" fill="${color}" cx="${radius}" cy="${radius}" r="${radius}"/></svg>`;
  return `data:image/svg+xml;base64,${btoa(icon)}`;
}