Начало работы
JavaScript и React
Подключение карты в браузере и жизненный цикл экземпляра.
JavaScript
createMap возвращает HostedMap. Его методы управляют камерой и слоями; map.places, map.routing и map.traffic доступны на том же экземпляре.
javascript
import { createMap } from "@umap-llc/map-react";
// HTML: <div id="map" style="height:480px;position:relative"></div>
const map = createMap({
container: "map",
style: "YOUR_STYLE_URL",
accessToken: "YOUR_ACCESS_TOKEN",
center: [71.43045, 51.12829],
zoom: 15,
});
map.on("load", () => console.log("Карта готова"));
map.on("error", ({ error }) => console.error(error.message));
// При закрытии страницы вашего SPA:
// map.remove();React / Next.js
Компонент создаёт карту и освобождает её при размонтировании. Не создавайте новый экземпляр при каждом обновлении координат: используйте flyTo или setData.
React
"use client";
import { MapComponent } from "@umap-llc/map-react";
export default function ContactMap() {
return (
<MapComponent
styleUrl="YOUR_STYLE_URL"
accessToken="YOUR_ACCESS_TOKEN"
options={{ center: [71.43045, 51.12829], zoom: 15 }}
style={{ height: 480, position: "relative" }}
onReady={(map) => {
console.log(map.getCenter());
}}
/>
);
}