JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

CSS

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

Babel + JSX

function createData([centerX, centerY], mapDelta, mapMass, valueMass) {
  return Array(mapMass).fill(1)
    .map(() => [centerX + Math.random() * mapDelta, centerY + Math.random() * mapDelta])
    .concat(
      Array(mapMass)
      .fill(1)
      .map(() => [centerX - Math.random() * mapDelta, centerY - Math.random() * mapDelta])
    )
    .map(coords => {
      return {
        value: ~~(Math.random() * valueMass),
        coords
      }
    });
}

function sprintf(format, ...args) {
  return format.replace(/{(\d+)}/g, function(match, number) {
    return args[number] !== undefined ? args[number] : '';
  });
}
const smallRadius = 30;
const mediumRadius = 45;
const largeRadius = 60;
const layoutTemplate = `
  <svg version="1.1" width="${largeRadius}" height="${largeRadius}" viewBox="0 0 ${largeRadius} ${largeRadius}">
    <circle cx="{0}" cy="{0}" r="{1}" fill="#E7B948" fill-opacity=".7" />
    <text x="{0}" y="{0}" font-family="Verdana" font-size="12" text-anchor="middle" alignment-baseline="central">
    $[properties.geoObjects.length]
     </text>
  </svg>
`;
const largeTemplate = sprintf(layoutTemplate, largeRadius, (largeRadius - 5) / 2);
const mediumTemplate = sprintf(layoutTemplate, mediumRadius, (mediumRadius - 4) / 2);
const smallTemplate = sprintf(layoutTemplate, smallRadius, (smallRadius - 3) / 2);

ymaps.ready(function() {
  ymaps.layout.storage.add('bestplace#cluster-large', ymaps.templateLayoutFactory.createClass(largeTemplate));
  ymaps.layout.storage.add('bestplace#cluster-medium', ymaps.templateLayoutFactory.createClass(mediumTemplate));
  ymaps.layout.storage.add('bestplace#cluster-small', ymaps.templateLayoutFactory.createClass(smallTemplate));
  ymaps.layout.storage.add('bestplace#cluster', ymaps.templateLayoutFactory.createClass(`
      {% if properties.geoObjects.length > 100 %}
        {% include "bestplace#cluster-large" %}
      {% else properties.geoObjects.length > 10 %}
        {% include "bestplace#cluster-medium" %}
      {% else...