Added map using Leaflet

src/App.vue

@@ -6,16 +6,25 @@
     </header>
     
     <main class="container mx-auto p-4">
-      <div class="text-center py-12">
+      <div class="mb-6">
-        <h2 class="text-xl mb-4">Welcome to TrackMap</h2>
+        <h2 class="text-xl mb-4">Your Cycling Tracks</h2>
-        <p class="text-gray-600">Upload your GPX files to get started analyzing your cycling tracks</p>
+        <MapView />
+      </div>
+      
+      <div class="text-center py-8 text-gray-500">
+        <p>Upload GPX files to see your tracks on the map</p>
       </div>
     </main>
   </div>
 </template>
 
 <script>
+import MapView from './components/MapView.vue'
+
 export default {
-  name: 'App'
+  name: 'App',
+  components: {
+    MapView
+  }
 }
 </script>

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>

src/style.css

@@ -1,10 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import 'leaflet/dist/leaflet.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-@import 'leaflet/dist/leaflet.css';
-
 @layer base {
   * {
     box-sizing: border-box;