Docs · React

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.