Show how to add a map view through typescript

ts/app.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import MapView from './components/map-view.vue';
 
 const count = ref(0);
 const message = ref('Hello from Vue 3!');
@@ -9,6 +10,9 @@ const message = ref('Hello from Vue 3!');
   <div>
     <p>{{ message }}</p>
     <button @click="count++">Count: {{ count }}</button>
+    
+    <h2>Map Example:</h2>
+    <MapView />
   </div>
 </template>
 

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>

ts/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
 import App from './app.vue';
+import 'maplibre-gl/dist/maplibre-gl.css';
 
 createApp(App).mount('#app');