Added map using Leaflet

src/components/MapView.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="map" class="w-full h-96 rounded-lg shadow-md"></div>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted } from 'vue'
+import L from 'leaflet'
+
+export default {
+  name: 'MapView',
+  setup() {
+    const map = ref(null)
+
+    const getLocationFromIP = async () => {
+      try {
+        const response = await fetch('https://ipapi.co/json/')
+        const data = await response.json()
+        return [data.latitude, data.longitude]
+      } catch (error) {
+        console.log('Could not get location from IP:', error)
+        // Default to San Francisco for localhost/fallback
+        return [37.7749, -122.4194]
+      }
+    }
+
+    const initMap = async () => {
+      const coords = await getLocationFromIP()
+      
+      map.value = L.map('map').setView(coords, 10)
+
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(map.value)
+    }
+
+    onMounted(() => {
+      initMap()
+    })
+
+    onUnmounted(() => {
+      if (map.value) {
+        map.value.remove()
+      }
+    })
+
+    return {
+      map
+    }
+  }
+}
+</script>