Chargement des parkings… {{ progress }}%
@@ -116,18 +128,20 @@ function handleClickGeoloc() {
+
+
-
-
-
+
+
+
diff --git a/src/components/BikeMarker.vue b/src/components/BikeMarker.vue
index 10a428b..ebba2cf 100644
--- a/src/components/BikeMarker.vue
+++ b/src/components/BikeMarker.vue
@@ -1,13 +1,14 @@
-
+
diff --git a/src/composables/useRouting.ts b/src/composables/useRouting.ts
new file mode 100644
index 0000000..208b1b0
--- /dev/null
+++ b/src/composables/useRouting.ts
@@ -0,0 +1,27 @@
+import { storeToRefs } from 'pinia'
+import { useMap } from '@/stores/map'
+import type { BikeParking } from '@/types/Bikes'
+
+export function useRouting() {
+ const { userCoords, activeRoute, isRoutingLoading } = storeToRefs(useMap())
+
+ async function routeTo(park: BikeParking) {
+ if (!userCoords.value) return false // caller handles the nudge
+
+ isRoutingLoading.value = true
+ activeRoute.value = null
+
+ const { latitude: uLat, longitude: uLon } = userCoords.value
+ const { lat: pLat, lon: pLon } = park.geo_point_2d
+
+ const url = `https://router.project-osrm.org/route/v1/bike/${uLon},${uLat};${pLon},${pLat}?geometries=geojson&overview=full`
+ const data = await fetch(url).then((r) => r.json())
+
+ activeRoute.value = data.routes[0].geometry
+ isRoutingLoading.value = false
+
+ return true
+ }
+
+ return { routeTo, activeRoute, isRoutingLoading }
+}
diff --git a/src/stores/map.ts b/src/stores/map.ts
index 4a6fde7..6eac25e 100644
--- a/src/stores/map.ts
+++ b/src/stores/map.ts
@@ -36,6 +36,10 @@ export const useMap = defineStore('map', () => {
const spotsRange = ref<[number, number]>([SPOTS_MIN, SPOTS_MAX])
+ // Routing
+ const activeRoute = ref(null)
+ const isRoutingLoading = ref(false)
+
return {
zoom,
minZoom,
@@ -52,5 +56,7 @@ export const useMap = defineStore('map', () => {
filterCargoOnly,
filterStdOnly,
spotsRange,
+ activeRoute,
+ isRoutingLoading,
}
})