Подключение растровых тайлов
Готовые изображения карты от вашего сервера. SDK подставляет масштаб и координаты тайла в URL.
- Измените масштаб: загрузятся тайлы другого уровня.
- Подставьте свой XYZ URL вместо демонстрационного сервера.
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) {
await map.addSource("raster", {
type: "raster",
tiles: [
"https://developer.umap.kz" +
"/api/sdk-examples/raster/{z}/{x}/{y}?v=real-osm-2",
],
minzoom: 12,
maxzoom: 14,
bounds: [71.32, 51.06, 71.52, 51.19],
});
map.addLayer({
id: "raster",
type: "raster",
source: "raster",
paint: { "raster-opacity": 1 },
});
map.jumpTo({ center: [71.423, 51.128], zoom: 13 });
}
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.