Где поступают заказы
Плотность заказов за выбранный день. Цвет помогает сравнить районы и выбрать место для нового пункта.
- Сравните районы: насыщенный цвет означает больше заказов рядом.
- Измените масштаб: радиус сглаживания остаётся заданным в метрах.
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);
});
Как запустить у себя
В JavaScript укажите Style URL и ключ своей карты. Код запускайте в проекте со сборщиком. Во Flutter сохраните пример в lib/main.dart и передайте UMAP_STYLE_URL и UMAP_ACCESS_TOKEN через --dart-define.
Примеры со своими данными загружают подготовленные GeoJSON и изображения. Замените их файлами вашего приложения. Для Flutter-примеров с загрузкой файлов добавьте зависимость: flutter pub add http.