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
2026-04-11 21:27:11 +01:00
parent a969c1b347
commit d25883ead4
3 changed files with 254 additions and 117 deletions
--- a/resources/js/components/LeafletMap.vue
+++ b/resources/js/components/LeafletMap.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="space-y-2">
 		<button
-            @click="toggleMap"
 			class="flex items-center gap-2 text-sm font-bold text-accent hover:text-accent-content transition-colors"
+			@click="toggleMap"
 		>
 			<iconify-icon :icon="isOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"></iconify-icon>
 			{{ isOpen ? 'Hide map' : 'Show map' }}
@@ -40,6 +40,7 @@
 import {ref, watch, onMounted, onUnmounted, nextTick} from 'vue'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
+import {zoom} from "leaflet/src/control/Control.Zoom.js";

 const CLASSIFICATION_COLOURS = {
 	current: '#22c55e',
@@ -100,12 +101,79 @@ function escHtml(str) {
 const props = defineProps({
 	stations: {type: Array, required: true},
 	defaultOpen: {type: Boolean, default: false},
+	radiusMiles: {type: Number, default: 10},
 })

 const mapContainer = ref(null)
 const isOpen = ref(false)
 let mapInstance = null
 let markersLayer = null
+let userMarker = null
+
+function getZoomForRadius(radiusMiles) {
+	if (radiusMiles <= 1) return 16
+	if (radiusMiles <= 2) return 15
+	if (radiusMiles <= 5) return 14
+	if (radiusMiles <= 10) return 13
+	if (radiusMiles <= 15) return 11
+	if (radiusMiles <= 25) return 10
+	if (radiusMiles <= 50) return 9
+	return 8
+}
+
+
+function addUserMarker(lat, lng) {
+	if (userMarker) {
+		userMarker.remove()
+	}
+
+	const pulseHtml =
+		'<div class="absolute w-full h-full bg-blue-500/30 rounded-full animate-ping"></div>'
+	;
+
+	const icon = L.divIcon({
+		html: `
+                    <div class="relative w-10 h-10 flex items-center justify-center">
+                        ${pulseHtml}
+                        <div class="relative w-4 h-4 bg-blue-600 border-2 border-white rounded-full shadow-lg"></div>
+                    </div>
+                `,
+		className: 'user-location-div-icon',
+		iconSize: [40, 40],
+		iconAnchor: [20, 20]
+	})
+
+	userMarker = L.marker([lat, lng], {icon, zIndexOffset: -100})
+		.bindPopup('Your location')
+		.addTo(mapInstance)
+}
+
+function locateUser() {
+	if (!navigator.geolocation) return
+
+	const ipFallback = () => {
+		fetch('https://ipapi.co/json/')
+			.then(r => r.json())
+			.then(d => d.latitude && d.longitude && addUserMarker(d.latitude, d.longitude))
+			.catch(() => {
+			})
+	}
+
+	navigator.geolocation.getCurrentPosition(
+		pos => {
+			addUserMarker(pos.coords.latitude, pos.coords.longitude)
+
+			navigator.geolocation.getCurrentPosition(
+				precise => addUserMarker(precise.coords.latitude, precise.coords.longitude),
+				() => {
+				},
+				{enableHighAccuracy: true, timeout: 10000, maximumAge: 0},
+			)
+		},
+		() => ipFallback(),
+		{enableHighAccuracy: false, timeout: 5000, maximumAge: 60000},
+	)
+}

 function initMap() {
 	if (mapInstance || !mapContainer.value) return
@@ -117,6 +185,8 @@ function initMap() {
 	}).addTo(mapInstance)

 	markersLayer = L.layerGroup().addTo(mapInstance)
+
+	locateUser()
 }

 function renderMarkers() {
@@ -163,9 +233,9 @@ function renderMarkers() {
 	})

 	if (bounds.length === 1) {
-        mapInstance.setView(bounds[0], 14)
+		mapInstance.setView(bounds[0], zoom)
 	} else {
-        mapInstance.fitBounds(bounds, { padding: [40, 40], maxZoom: 14 })
+		mapInstance.fitBounds(bounds, {padding: [40, 40], maxZoom: zoom})
 	}
 }

@@ -203,3 +273,39 @@ onUnmounted(() => {
 	}
 })
 </script>
+
+<style>
+.fuelalert-user-marker {
+	position: relative;
+	width: 16px;
+	height: 16px;
+}
+
+.fuelalert-user-dot {
+	position: absolute;
+	inset: 3px;
+	background: #3b82f6;
+	border-radius: 50%;
+	border: 2px solid #fff;
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.fuelalert-user-ring {
+	position: absolute;
+	inset: 0;
+	border-radius: 50%;
+	background: rgba(59, 130, 246, 0.25);
+	animation: fuelalert-pulse 2s ease-out infinite;
+}
+
+@keyframes fuelalert-pulse {
+	0% {
+		transform: scale(1);
+		opacity: 0.8;
+	}
+	100% {
+		transform: scale(3);
+		opacity: 0;
+	}
+}
+</style>
--- a/resources/js/components/SearchBar.vue
+++ b/resources/js/components/SearchBar.vue
@@ -4,17 +4,24 @@
        <div class="flex flex-col sm:flex-row gap-3">
            <div class="relative flex-1">
                <label for="postcode-input" class="sr-only">Postcode or city</label>
-                <span aria-hidden="true"
-					  class="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-500 p-4"
+                <button
+                    :disabled="locating"
+                    aria-label="Use my location"
+                    class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5 px-3 py-1.5
+                    bg-primary/85
+                    text-white rounded-sm  text-sm font-semibold transition-opacity hover:opacity-80"
+                    type="button"
+                    @click="useMyLocation"
                >
-                    <iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
-                </span>
+                    <iconify-icon :class="{ 'animate-spin': locating }" :icon="locating ? 'lucide:loader-circle' : 'lucide:map-pin'" style="font-size:1rem"></iconify-icon>
+					<span class="hidden md:inline-flex">Near me</span>
+                </button>
                <input
                    id="postcode-input"
                    v-model="postcode"
                    type="text"
                    placeholder="Enter postcode, e.g. SW1A 1AA"
-                    class="w-full h-14 pr-12 pl-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
+                    class="w-full h-14 pr-28 pl-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
                    @keyup.enter="onSearch"
                />
            </div>
@@ -75,6 +82,28 @@ const postcode = ref('')
 const fuelType = ref('e10')
 const radius = ref(10)
 const sort = ref('price')
+const locating = ref(false)
+
+function useMyLocation() {
+    if (!navigator.geolocation) return
+    locating.value = true
+    navigator.geolocation.getCurrentPosition(
+        async ({ coords }) => {
+            try {
+                const res = await fetch(`https://api.postcodes.io/postcodes?lon=${coords.longitude}&lat=${coords.latitude}&limit=1`)
+                const json = await res.json()
+                if (json.result?.[0]?.postcode) {
+                    postcode.value = json.result[0].postcode
+                    onSearch()
+                }
+            } finally {
+                locating.value = false
+            }
+        },
+        () => { locating.value = false },
+        { timeout: 8000, enableHighAccuracy: false, maximumAge: 30000 },
+    )
+}

 function onSearch() {
    if (!postcode.value.trim()) return
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -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)
 }