Свои данные

Свои тайлы: MVT и XYZ

Подключение картографического сервера с векторными или растровыми тайлами.

Выберите формат

Шаблон tiles содержит {z}, {x}, {y}. z — масштаб, x и y — номер тайла. Для внешнего сервера настройте CORS и HTTPS. Укажите максимальный доступный масштаб источника; выше него SDK увеличивает последний уровень.

ФорматСервер отдаётКто задаёт внешний вид
GeoJSONJSON с геометриейПриложение через слои SDK
MVT / PBFВекторные тайлыПриложение через слои SDK
XYZ rasterPNG, JPEG или WebPСервер; клиент может менять прозрачность

Векторный слой дорог

source — id источника в SDK. source-layer — имя слоя внутри PBF: его нужно узнать у поставщика данных. В примере это transportation. paint определяет цвет и толщину дорог.

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("roads", {
    type: "vector",
    tiles: [
      "https://developer.umap.kz" +
        "/api/sdk-examples/vector/{z}/{x}/{y}?v=real-osm-2",
    ],
    minzoom: 12,
    maxzoom: 14,
    bounds: [71.32, 51.06, 71.52, 51.19],
  });
  map.addLayer({
    id: "roads-overlay",
    type: "line",
    source: "roads",
    "source-layer": "transportation",
    filter: [
      "in",
      ["get", "class"],
      ["literal", ["primary", "secondary", "tertiary"]],
    ],
    "rendering-order": "overlay",
    paint: { "line-color": "#6574bd", "line-width": 3 },
  });
  map.jumpTo({ center: [71.423, 51.128], zoom: 13.5 });
}

map.once("load", async () => {
  const cleanup = await setupExample(map, sdk);
  if (cleanup) map.once("remove", cleanup);
});

Растровая карта

У растрового слоя нет source-layer и отдельных объектов для выбора. Пример содержит тайлы района Астаны для масштабов 12–14. За пределами этой области остаётся основная карта. Для снимков подключите свой источник изображений.

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);
});