Updated Map View

resources/js/Components/FlightsGoneBy/FlightMap.vue

@@ -2,9 +2,12 @@
     <div class="flight-map-wrapper">
         <PlaneLoader v-if="!mapReady" class="map-loader" />
         <div ref="mapContainer" class="map-container" :class="{ 'map-hidden': !mapReady }" />
-        <button @click="exportMapBasic()" class="export-btn">
+        <button @click="exportMapBasic()" class="export-btn" title="Download as Image">
             <span class="mdi mdi-download" />
         </button>
+        <button class="projection-btn" @click="toggleProjection" :title="isGlobe ? 'Switch to flat map' : 'Switch to globe'">
+            <span class="mdi" :class="isGlobe ? 'mdi-map' : 'mdi-earth'"/>
+        </button>
         <div v-if="!flights.length" class="empty-state">
             <span class="mdi mdi-earth-off" />
             <p>No flight data available</p>
@@ -266,6 +269,15 @@ export default defineComponent({
 
         const legendOpen = ref(true)
 
+        const isGlobe = ref(false)
+
+        const toggleProjection = (): void => {
+            if (!map?.isStyleLoaded()) return
+            isGlobe.value = !isGlobe.value
+            map.setProjection({ type: isGlobe.value ? 'globe' : 'mercator' })
+        }
+
+
         const legendItems = [
             { color: '#f97316', label: '5+ flights' },
             { color: '#eab308', label: '3–4 flights' },
@@ -670,6 +682,11 @@ export default defineComponent({
 
                 map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right')
                 map.addControl(new maplibregl.FullscreenControl(), 'top-right')
+
+                map.on('style.load', () => {
+                    map?.setProjection({ type: 'mercator' })
+                })
+
                 map.on('load', () => {
                     addLayers()
                     fitBounds()
@@ -718,7 +735,7 @@ export default defineComponent({
             if (map) { map.remove(); map = null }
         })
 
-        return { mapContainer, mapReady, exportMapBasic, legendOpen, legendItems }
+        return { mapContainer, mapReady, exportMapBasic, legendOpen, legendItems, isGlobe, toggleProjection }
     },
 })
 
@@ -901,4 +918,25 @@ export default defineComponent({
     letter-spacing: 0.06em;
     color:       #c8cdd8;
 }
+
+.projection-btn {
+    position:         absolute;
+    bottom:           48px;
+    right:            12px;
+    z-index:          10;
+    background:       rgba(10,14,22,0.85);
+    border:           1px solid rgba(255,255,255,0.08);
+    color:            #a0b4c8;
+    width:            30px;
+    height:           30px;
+    border-radius:    4px;
+    cursor:           pointer;
+    display:          flex;
+    align-items:      center;
+    justify-content:  center;
+    font-size:        16px;
+    transition:       color 0.15s, background 0.15s;
+}
+.projection-btn:hover        { background: rgba(77,166,255,0.15); color: #4da6ff; }
+.projection-btn.globe-active { color: #4da6ff; border-color: rgba(77,166,255,0.35); }
 </style>