Added geoloc marker to map

src/components/BikeFilters.vue

@@ -15,6 +15,7 @@ defineProps<{
   nbKorrigo?: number
 }>()
 
+// Geolocation features
 const { coords, error, resume, pause, locatedAt } = useGeolocation({ immediate: false })
 
 const geolocationPermission = usePermission('geolocation')

src/components/BikeMap.vue

@@ -10,12 +10,12 @@ import type { ApiResponse } from '@/types/Api'
 import type { BikeParking } from '@/types/Bikes'
 import { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL, SpotAccess, SpotType } from '@/utils/const'
 import { useQuery } from '@pinia/colada'
-import { LControlZoom, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
+import { LControlZoom, LIcon, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
 import BikeFilters from './BikeFilters.vue'
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import BikeClusterLayer from './BikeClusterLayer.vue'
-import { PhCircleNotch } from '@phosphor-icons/vue'
+import { PhCircleNotch, PhMapPin } from '@phosphor-icons/vue'
 
 const fetchedPages = ref(0)
 const totalPages = ref(1)
@@ -78,6 +78,9 @@ const premiumParkingsSpots = computed(() =>
 
 const { zoom, minZoom, center, maxBounds, maxBoundsViscosity, maxClusterRadius, disableClusteringAtZoom, extraOptions } = useMap()
 const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
+
+// Geolocation
+const { userCoords } = storeToRefs(useMap())
 </script>
 
 <template>
@@ -103,6 +106,12 @@ const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
         <LControlZoom position="bottomright" />
         <LTileLayer v-once :url="MAP_TILELAYER_URL" layer-type="base" />
 
+        <LMarker v-if="userCoords" :lat-lng="[userCoords.latitude, userCoords.longitude]">
+          <LIcon>
+            <PhMapPin size="24" weight="fill" class="text-amber-400" />
+          </LIcon>
+        </LMarker>
+
         <BikeClusterLayer :parkings="coveredParkings" group="covered" :visible="filterCovered" :max-cluster-radius
           :disable-clustering-at-zoom />
         <BikeClusterLayer :parkings="nonCoveredParkings" group="non-covered" :visible="filterUncovered"