Сеть пунктов: группировка

import * as sdk from "@umap-llc/map-react";

// HTML: <div id="map" style="height:480px;position:relative"></div>
const map = sdk.createMap({
  container: "map",
  style: "YOUR_STYLE_URL",
  accessToken: "YOUR_ACCESS_TOKEN",
  center: [71.423, 51.128],
  zoom: 14,
});

async function setupExample(map, sdk, report = console.log) {
  const response = await fetch(
    "https://developer.umap.kz/examples/data/branches.geojson",
  );
  if (!response.ok) throw new Error("Не удалось загрузить пункты");
  const layer = new sdk.ClusterLayer({
    id: "network",
    data: await response.json(),
    radius: 65,
    maxClusterZoom: 17,
    color: "#1769e0",
    pointColor: "#1769e0",
  }).addTo(map);
  map.fitBounds(
    [
      [71.393, 51.102],
      [71.449, 51.143],
    ],
    { padding: 65, maxZoom: 12.8 },
  );
  const click = (event) => {
    const f = event.features?.[0];
    if (!f) return;
    if (f.properties.cluster)
      map.flyTo({
        center: f.geometry.coordinates,
        zoom: layer.getClusterExpansionZoom(Number(f.properties.cluster_id)),
        duration: 500,
      });
  };
  map.on("click", "network", click);
  return () => {
    map.off("click", "network", click);
    layer.remove();
  };
}

map.once("load", async () => {
  const cleanup = await setupExample(map, sdk);
  if (cleanup) map.once("remove", cleanup);
});