Схема площадки поверх карты
Наложите план мероприятия по четырём углам. На учебной схеме обозначены павильоны, вход и регистрация.
- Приближайте карту: схема остаётся привязанной к территории.
- Замените изображение и координаты углов планом своей площадки.
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 image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://developer.umap.kz/examples/data/site-plan.svg";
await image.decode();
map.addLayer(
new sdk.ImageLayer({
id: "site-plan",
image,
coordinates: [
[71.416, 51.093],
[71.422, 51.093],
[71.422, 51.09],
[71.416, 51.09],
],
opacity: 0.95,
}),
);
map.fitBounds(
[
[71.414, 51.089],
[71.424, 51.094],
],
{ padding: 45, maxZoom: 16 },
);
report("Учебная схема мероприятия");
}
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.