Проверка адреса доставки

Сервисная зона магазина и проверка выбранного адреса. Граница повторяет контур обслуживаемого района.

  1. Нажмите внутри выделенного района, затем за его пределами.
  2. Статус покажет, доступна ли доставка в выбранную точку.
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.

Установка и первая карта →Скачать Flutter-пример