Метки и карточки

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) {
  map.jumpTo({ center: [71.43045, 51.12829], zoom: 15.6, pitch: 0 });
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = "Офис";
  button.style.cssText =
    "border:3px solid white;border-radius:24px;padding:10px 16px;background:#1769e0;color:white;font:600 14px system-ui;box-shadow:0 4px 16px #132d4930;cursor:pointer";
  const card = document.createElement("div");
  card.style.cssText =
    "padding:16px;background:white;border-radius:16px;box-shadow:0 8px 32px #172b4d25;min-width:220px;font:14px/1.6 system-ui;color:#253348";
  const title = document.createElement("strong");
  title.textContent = "Офис на левом берегу";
  const address = document.createElement("div");
  address.textContent = "Район Байтерека, Астана";
  const hours = document.createElement("div");
  hours.textContent = "Пн–Пт · 09:00–18:00";
  hours.style.color = "#64748b";
  card.append(title, address, hours);
  const popup = new sdk.Popup()
    .setLngLat([71.43045, 51.12829])
    .setDOMContent(card);
  Object.assign(popup.getElement().style, {
    marginTop: "-42px",
    padding: "0",
    background: "transparent",
    boxShadow: "none",
  });
  const marker = new sdk.Marker({ element: button })
    .setLngLat([71.43045, 51.12829])
    .addTo(map);
  let open = false;
  button.onclick = (e) => {
    e.stopPropagation();
    open = !open;
    if (open) popup.addTo(map);
    else popup.remove();
  };
  return () => {
    marker.remove();
    popup.remove();
  };
}

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