feat: add geolocation support with Near Me button and user location marker on map
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (8.3) (push) Has been cancelled
tests / ci (8.4) (push) Has been cancelled
tests / ci (8.5) (push) Has been cancelled

- Add "Near Me" button to SearchBar with loading state and geolocation via postcodes.io API
- Display user location on map with pulsing blue marker using geolocation API with IP fallback
- Adjust map zoom level based on search radius for better context
- Pass radiusMiles prop from
This commit is contained in:
Ovidiu U
2026-04-11 21:27:11 +01:00
parent a969c1b347
commit d25883ead4
3 changed files with 254 additions and 117 deletions

View File

@@ -118,7 +118,7 @@
<span class="font-medium">No stations found near you. Try a different postcode or increase the radius.</span>
</div>
<template v-else>
<LeafletMap :stations="stations" :default-open="true" />
<LeafletMap :default-open="true" :radius-miles="radiusMiles" :stations="stations" />
<StationList :stations="stations" :current-sort="sort" @sort="onSort" />
</template>
</template>
@@ -423,10 +423,12 @@ const { stations, loading, error, search } = useStations()
const sort = ref('price')
const lastParams = ref(null)
const searchAttempted = ref(false)
const radiusMiles = ref(10)
async function onSearch(params) {
lastParams.value = params
sort.value = params.sort ?? sort.value
radiusMiles.value = params.radius ?? radiusMiles.value
searchAttempted.value = true
await search(params)
}