Show how to add a map view through typescript

ts/components/map-view.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import maplibregl from 'maplibre-gl';
+
+const mapContainer = ref<HTMLDivElement | null>(null);
+let map: maplibregl.Map | null = null;
+
+onMounted(() => {
+  if (!mapContainer.value) return;
+
+  map = new maplibregl.Map({
+    container: mapContainer.value,
+    style: 'https://demotiles.maplibre.org/style.json',
+    center: [-74.5, 40], // [lng, lat]
+    zoom: 9
+  });
+
+  // Add a marker as an example
+  new maplibregl.Marker()
+    .setLngLat([-74.5, 40])
+    .addTo(map);
+});
+
+onUnmounted(() => {
+  map?.remove();
+});
+</script>
+
+<template>
+  <div ref="mapContainer" class="map-container"></div>
+</template>
+
+<style scoped>
+.map-container {
+  width: 100%;
+  height: 500px;
+}
+</style>