Кластеры

500 пунктов выдачи на карте Москвы. Близкие точки собираются в кластеры с числом внутри, клик по кластеру приближает карту. Цвет отдельной точки задаёт pointStyle по её индексу в массиве: зелёные пункты открыты, серые закрыты. Клик по точке открывает балун с названием.

Если несколько точек стоят в одном месте и приближать дальше некуда, клик по кластеру раскладывает их вокруг центра. Вместо цвета точке можно дать свою картинку — icon: { url, size, anchor }, как у метки. Все опции — в справочнике слоёв.

Код

Код ниже — рабочий, с боевыми адресами: вставьте как есть на свою страницу.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>EvaMaps SDK — кластеры</title>
    <link rel="stylesheet" href="https://evamaps.ru/sdk/1/evamaps.css" />
    <style>
      html,
      body {
        margin: 0;
        font-family: system-ui, -apple-system, sans-serif;
      }
      #map {
        width: 100%;
        height: 520px;
      }
      p {
        margin: 10px 16px;
        color: #555;
        font-size: 13px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://evamaps.ru/sdk/1/evamaps.js"></script>
    <script>
      var map = EvaMaps.create('map', {
        center: [37.6173, 55.7558],
        zoom: 9,
        theme: 'light',
      });

      // Свои данные: координаты [долгота, широта] и что угодно ещё.
      var points = [];
      for (var i = 0; i < 500; i++) {
        points.push({
          lngLat: [37.6173 + (Math.random() - 0.5) * 1.6, 55.7558 + (Math.random() - 0.5) * 0.9],
          name: 'Пункт выдачи №' + (i + 1),
          open: Math.random() < 0.7,
        });
      }

      var cluster = EvaMaps.cluster(
        points.map(function (p) {
          return p.lngLat;
        }),
        {
          // Цвет отдельной точки — по индексу в массиве.
          pointStyle: function (index) {
            return { color: points[index].open ? '#2b8a3e' : '#868e96' };
          },
        },
      ).addTo(map);

      cluster.on('pointClick', function (e) {
        var p = points[e.index];
        EvaMaps.popup()
          .setLngLat(e.lngLat)
          .setText(p.name + (p.open ? ' — открыт' : ' — закрыт'))
          .openOn(map);
      });
    </script>
  </body>
</html>

← Все примеры