Vue

1<!-- OrviaMap.vue — npm i maplibre-gl -->2<script setup lang="ts">3import { onBeforeUnmount, onMounted, ref } from "vue";4import { Map } from "maplibre-gl";5import "maplibre-gl/dist/maplibre-gl.css";67const container = ref<HTMLDivElement>();8let map: Map | undefined;910onMounted(() => {11  map = new Map({12    container: container.value!,13    style: `https://orviamaps.ir/api/v1/style.json?key=${import.meta.env.VITE_ORVIA_KEY}`,14    center: [51.389, 35.689],15    zoom: 11,16  });17});1819onBeforeUnmount(() => map?.remove());20</script>2122<template>23  <div ref="container" style="height: 420px" />24</template>