Frameworks

Astro

An Astro component with a client-side script for the map.

Example

OrviaMap.astroastro

1---2// src/components/OrviaMap.astro — npm i maplibre-gl3const key = import.meta.env.PUBLIC_ORVIA_KEY;4---56<div id="orvia-map" data-key={key} style="height: 420px"></div>78<script>9  import { Map } from "maplibre-gl";10  import "maplibre-gl/dist/maplibre-gl.css";1112  const container = document.getElementById("orvia-map")!;1314  new Map({15    container,16    style: `https://orviamaps.ir/api/v1/style.json?key=${container.dataset.key}`,17    center: [51.389, 35.689],18    zoom: 11,19  });20</script>

Replace YOUR_API_KEY with a key from your account, or read it from an environment variable as shown.