Joururi/velo-park
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added geoloc marker to map

Browse Source
This commit is contained in:
Alexis
2026-04-10 21:06:18 +02:00
parent 2b1ed5c09e
commit a6a5fe892d
2 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/BikeFilters.vue
View File

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

13
src/components/BikeMap.vue
View File

@@ -10,12 +10,12 @@ import type { ApiResponse } from '@/types/Api'
import type { BikeParking } from '@/types/Bikes' import type { BikeParking } from '@/types/Bikes'
import { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL, SpotAccess, SpotType } from '@/utils/const' import { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL, SpotAccess, SpotType } from '@/utils/const'
import { useQuery } from '@pinia/colada' 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 BikeFilters from './BikeFilters.vue'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import BikeClusterLayer from './BikeClusterLayer.vue' import BikeClusterLayer from './BikeClusterLayer.vue'
import { PhCircleNotch } from '@phosphor-icons/vue' import { PhCircleNotch, PhMapPin } from '@phosphor-icons/vue'
const fetchedPages = ref(0) const fetchedPages = ref(0)
const totalPages = ref(1) const totalPages = ref(1)
@@ -78,6 +78,9 @@ const premiumParkingsSpots = computed(() =>
const { zoom, minZoom, center, maxBounds, maxBoundsViscosity, maxClusterRadius, disableClusteringAtZoom, extraOptions } = useMap() const { zoom, minZoom, center, maxBounds, maxBoundsViscosity, maxClusterRadius, disableClusteringAtZoom, extraOptions } = useMap()
const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap()) const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
// Geolocation
const { userCoords } = storeToRefs(useMap())
</script> </script>
<template> <template>
@@ -103,6 +106,12 @@ const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
<LControlZoom position="bottomright" /> <LControlZoom position="bottomright" />
<LTileLayer v-once :url="MAP_TILELAYER_URL" layer-type="base" /> <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 <BikeClusterLayer :parkings="coveredParkings" group="covered" :visible="filterCovered" :max-cluster-radius
:disable-clustering-at-zoom /> :disable-clustering-at-zoom />
<BikeClusterLayer :parkings="nonCoveredParkings" group="non-covered" :visible="filterUncovered" <BikeClusterLayer :parkings="nonCoveredParkings" group="non-covered" :visible="filterUncovered"