feat: add geolocation support with Near Me button and user location marker on map
- 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:
@@ -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)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user