Frameworks
React
A map component with MapLibre GL JS and the ready-made Orvia style.
Example
OrviaMap.tsxtsx
1// npm i maplibre-gl2import { useEffect, useRef } from "react";3import { Map } from "maplibre-gl";4import "maplibre-gl/dist/maplibre-gl.css";56const STYLE = `https://orviamaps.ir/api/v1/style.json?key=${import.meta.env.VITE_ORVIA_KEY}`;78export function OrviaMap() {9 const container = useRef<HTMLDivElement>(null);1011 useEffect(() => {12 const map = new Map({13 container: container.current!,14 style: STYLE,15 center: [51.389, 35.689],16 zoom: 11,17 });18 return () => map.remove();19 }, []);2021 return <div ref={container} style={{ height: 420 }} />;22}Replace YOUR_API_KEY with a key from your account, or read it from an environment variable as shown.