نقشه روی وب با MapLibre

npm install maplibre-gl

import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

// Before creating any map: without it Persian labels render as separate, reversed letters.
maplibregl.setRTLTextPlugin("https://tiles.uttamap.ir/js/rtl-text.js", true);

const map = new maplibregl.Map({
  container: "map",
  style: "https://tiles.uttamap.ir/styles/light/style.json?key=um_pk_...",
  center: [46.2919, 38.0800], // [lng, lat] — Tabriz
  zoom: 12,
});

map.addControl(new maplibregl.NavigationControl(), "top-left");
new maplibregl.Marker().setLngLat([46.2919, 38.08]).addTo(map);

import { useEffect, useRef } from "react";

export function UttamapMap({ apiKey }) {
  const box = useRef(null);
  useEffect(() => {
    let map;
    import("maplibre-gl").then(({ default: maplibregl }) => {
      if (maplibregl.getRTLTextPluginStatus() === "unavailable") {
        maplibregl.setRTLTextPlugin("https://tiles.uttamap.ir/js/rtl-text.js", true);
      }
      map = new maplibregl.Map({
        container: box.current,
        style: `https://tiles.uttamap.ir/styles/light/style.json?key=${apiKey}`,
        center: [51.389, 35.689],
        zoom: 11,
      });
    });
    return () => map?.remove();
  }, [apiKey]);
  return <div ref={box} style={{ height: 420 }} />;
}