Added flyTo on geoloc click

src/components/BikeFilters.vue

@@ -34,6 +34,7 @@ function toggleGeolocation() {
   if (hasLocation.value) {
     pause()
     isRequesting.value = false
+    emit('click-geoloc')
   } else {
     isRequesting.value = true
     resume()
@@ -47,12 +48,14 @@ watch(coords, () => {
     userCoords.value = coords.value
   }
 })
+
+const emit = defineEmits(['click-geoloc'])
 </script>
 
 <template>
   <div class="max-w-xs absolute top-5 left-5 z-10 grid gap-2">
-    <button @click="toggleGeolocation"
-      :title="error?.message ?? (hasLocation ? 'Désactiver la géolocalisation' : 'Me localiser')" :class="[
+    <button @click="toggleGeolocation" :title="error?.message ?? (hasLocation ? 'Aller à ma position' : 'Me localiser')"
+      :class="[
         'size-9 grid place-items-center border shadow rounded-full cursor-pointer transition-colors',
         hasLocation
           ? 'bg-primary text-primary-foreground border-primary'

src/components/BikeMap.vue

@@ -2,7 +2,7 @@
 import 'leaflet/dist/leaflet.css'
 import 'vue-leaflet-markercluster/dist/style.css'
 
-import L from 'leaflet'
+import L, { Map } from 'leaflet'
 globalThis.L = L
 
 import { useMap } from '@/stores/map'
@@ -12,11 +12,15 @@ import { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL, SpotAccess, SpotType } from
 import { useQuery } from '@pinia/colada'
 import { LControlZoom, LIcon, LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
 import BikeFilters from './BikeFilters.vue'
-import { computed, ref } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { storeToRefs } from 'pinia'
 import BikeClusterLayer from './BikeClusterLayer.vue'
 import { PhCircleNotch, PhMapPin } from '@phosphor-icons/vue'
 
+// Map setup
+const mapRef = useTemplateRef<{ leafletObject: Map }>('map')
+
+// Data fetching
 const fetchedPages = ref(0)
 const totalPages = ref(1)
 const progress = computed(() => Math.round((fetchedPages.value / totalPages.value) * 100))
@@ -81,13 +85,19 @@ const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
 
 // Geolocation
 const { userCoords } = storeToRefs(useMap())
+
+function handleClickGeoloc() {
+  if (userCoords.value) {
+    mapRef.value?.leafletObject.flyTo([userCoords.value.latitude, userCoords.value.longitude], 12)
+  }
+}
 </script>
 
 <template>
   <Transition enter-from-class="opacity-0 translate-y-2"
     enter-active-class="transition-all duration-300 ease-out delay-500" enter-to-class="opacity-100 translate-y-0">
     <BikeFilters v-if="state.status === 'success'" :nb-uncovered="nonCoveredParkingsSpots"
-      :nb-covered="coveredParkingsSpots" :nb-korrigo="premiumParkingsSpots" />
+      :nb-covered="coveredParkingsSpots" :nb-korrigo="premiumParkingsSpots" @click-geoloc="handleClickGeoloc" />
   </Transition>
 
   <main class="relative z-0 h-screen w-screen grid place-items-center">