Frameworks

Svelte

A Svelte component — the map is created on mount and removed on destroy.

Example

OrviaMap.sveltesvelte

1<!-- OrviaMap.svelte — npm i maplibre-gl -->2<script lang="ts">3  import { onMount } from "svelte";4  import { Map } from "maplibre-gl";5  import "maplibre-gl/dist/maplibre-gl.css";67  let container: HTMLDivElement;89  onMount(() => {10    const map = new Map({11      container,12      style: "https://orviamaps.ir/api/v1/style.json?key=YOUR_API_KEY",13      center: [51.389, 35.689],14      zoom: 11,15    });16    return () => map.remove();17  });18</script>1920<div bind:this={container} style="height: 420px"></div>

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