widgets: map: integrate poi map arrows component

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>

Author: ArturoManzoli

src/components/widgets/Map.vue

@@ -120,6 +120,18 @@
           />
         </template>
       </v-tooltip>
+      <PoiMapArrows
+        :map-ready="mapReady"
+        :show-poi-arrows="widget.options.showPoiArrows"
+        :show-home-arrow="widget.options.showHomeArrow"
+        :show-vehicle-arrow="widget.options.showVehicleArrow"
+        :vehicle-position="vehiclePosition"
+        :home="home"
+        :map-center="mapCenter"
+        :zoom="zoom"
+        :widget="widget"
+        :target-follower="targetFollower"
+      />
     </div>
   </div>
 
@@ -223,7 +235,9 @@ import genericVehicleMarkerImage from '@/assets/generic-vehicle-marker.png'
 import GlobalOriginDialog from '@/components/GlobalOriginDialog.vue'
 import MissionChecklist from '@/components/MissionChecklist.vue'
 import PoiManager from '@/components/poi/PoiManager.vue'
+import PoiMapArrows from '@/components/poi/PoiMapArrows.vue'
 import { useInteractionDialog } from '@/composables/interactionDialog'
+import { setMapLayer } from '@/composables/map/useMapLayer'
 import { openSnackbar } from '@/composables/snackbar'
 import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
@@ -260,8 +274,9 @@ const router = useRouter()
 
 // Declare the general variables
 const map = shallowRef<Map | undefined>()
-const zoom = ref(missionStore.userLastMapZoom ?? missionStore.defaultMapZoom)
-const mapCenter = ref<WaypointCoordinates>(missionStore.userLastMapCenter ?? missionStore.defaultMapCenter)
+
+const zoom = ref(missionStore.defaultMapZoom)
+const mapCenter = ref<WaypointCoordinates>(missionStore.defaultMapCenter)
 const home = ref()
 const mapId = computed(() => `map-${widget.value.hash}`)
 const showButtons = computed(() => isMouseOver.value || downloadMenuOpen.value)
@@ -608,6 +623,9 @@ onMounted(async () => {
     attributionControl: false,
   }).setView(mapCenter.value as LatLngTuple, zoom.value) as Map
 
+  // Set map layer in composable for child components
+  setMapLayer(map.value)
+
   // Listen for base layer changes to save user preference
   map.value.on('baselayerchange', (event: LayersControlEvent) => {
     const name = event.name
@@ -895,6 +913,9 @@ onBeforeUnmount(() => {
 
   mapBase.value?.removeEventListener('touchstart', onTouchStart)
   mapBase.value?.removeEventListener('touchend', onTouchEnd)
+
+  // Clear map layer from composable
+  setMapLayer(undefined)
 })
 
 // Pan when variables change