Проверка адреса доставки
Сервисная зона магазина и проверка выбранного адреса. Граница повторяет контур обслуживаемого района.
- Нажмите внутри выделенного района, затем за его пределами.
- Статус покажет, доступна ли доставка в выбранную точку.
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/delivery.geojson",
);
if (!response.ok) throw new Error("Не удалось загрузить район доставки");
const data = await response.json();
await map.addSource("delivery", { type: "geojson", data });
map.addLayer({
id: "delivery-fill",
type: "fill",
source: "delivery",
paint: { "fill-color": "#1769e0", "fill-opacity": 0.13 },
});
map.addLayer({
id: "delivery-edge",
type: "line",
source: "delivery",
paint: { "line-color": "#1769e0", "line-width": 2 },
});
map.fitBounds(
[
[71.396, 51.112],
[71.446, 51.144],
],
{ padding: 50, maxZoom: 14 },
);
const marker = new sdk.Marker();
const click = (event) => {
const p = event.lngLat;
if (!p) return;
marker.setLngLat(p).addTo(map);
const inside =
map.queryRenderedFeatures(event.point, { layers: ["delivery-fill"] })
.length > 0;
report(
inside
? "Доставка доступна · 30–45 мин"
: "Этот адрес за пределами зоны доставки",
);
};
map.on("click", click);
report("Выберите адрес на карте");
return () => {
map.off("click", click);
marker.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.