Свои данные
Кластеры и плотность
Два способа показать много объектов: количество точек и интенсивность распределения.
Когда нужны кластеры
Кластер объединяет соседние точки и показывает их количество. Подходит для филиалов, объявлений и пунктов выдачи. Исходные точки раскрываются при приближении.
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);
});
Когда нужна тепловая карта
Тепловая карта сравнивает плотность событий. В примере — учебные заказы за один день, а не текущая статистика города. Светлые области содержат меньше событий, насыщенные — больше.
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/orders.geojson",
);
if (!response.ok) throw new Error("Не удалось загрузить заказы");
const layer = new sdk.HeatmapLayer({
id: "orders",
data: await response.json(),
radiusMeters: 450,
intensity: 0.09,
weight: ["get", "weight"],
opacity: 0.75,
colors: ["#d9effb", "#69c6d5", "#318caf", "#4f58a8", "#743e83"],
}).addTo(map);
map.jumpTo({
center: [71.423, 51.124],
zoom: 13.5,
pitch: 0,
bearing: 0,
});
report("Заказы за день · светлый — меньше, насыщенный — больше");
return () => layer.remove();
}
map.once("load", async () => {
const cleanup = await setupExample(map, sdk);
if (cleanup) map.once("remove", cleanup);
});
Настройки плотности
Плотность — визуальное сравнение, а не точное число заказов на квадратный километр. Для больших наборов агрегируйте данные по времени и территории на сервере.