show current location as blue dot - fix #430

Author: oblonski

src/layers/UseCurrentLocationLayer.tsx

@@ -0,0 +1,162 @@
+import { Feature, Map } from 'ol'
+import { useEffect, useRef, useState } from 'react'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+import { Point, Circle as CircleGeom } from 'ol/geom'
+import { fromLonLat } from 'ol/proj'
+import { Style, Fill, Stroke, Circle as CircleStyle } from 'ol/style'
+import Geolocation from 'ol/Geolocation'
+
+interface CurrentLocationState {
+    enabled: boolean
+    tracking: boolean
+}
+
+const LOCATION_LAYER_KEY = 'gh:current_location'
+
+export default function useCurrentLocationLayer(map: Map, locationState: CurrentLocationState) {
+    const geolocationRef = useRef<Geolocation | null>(null)
+    const [hasPermission, setHasPermission] = useState<boolean | null>(null)
+
+    useEffect(() => {
+        if (!locationState.enabled) {
+            removeCurrentLocationLayer(map)
+            if (geolocationRef.current) {
+                geolocationRef.current.setTracking(false)
+                geolocationRef.current = null
+            }
+            return
+        }
+
+        // Check for geolocation permission
+        if ('permissions' in navigator) {
+            navigator.permissions.query({ name: 'geolocation' }).then((result) => {
+                setHasPermission(result.state === 'granted')
+                result.addEventListener('change', () => {
+                    setHasPermission(result.state === 'granted')
+                })
+            })
+        }
+
+        // Create geolocation instance
+        const geolocation = new Geolocation({
+            trackingOptions: {
+                enableHighAccuracy: true
+            },
+            projection: map.getView().getProjection()
+        })
+
+        geolocationRef.current = geolocation
+
+        // Create the location layer
+        const locationLayer = createLocationLayer()
+        map.addLayer(locationLayer)
+
+        // Handle position updates
+        const positionFeature = new Feature()
+        const accuracyFeature = new Feature()
+
+        geolocation.on('change:position', () => {
+            const coordinates = geolocation.getPosition()
+            if (coordinates) {
+                positionFeature.setGeometry(new Point(coordinates))
+                
+                // Update view if tracking is enabled
+                if (locationState.tracking) {
+                    map.getView().animate({
+                        center: coordinates,
+                        duration: 500
+                    })
+                }
+            }
+        })
+
+        geolocation.on('change:accuracyGeometry', () => {
+            const accuracy = geolocation.getAccuracyGeometry()
+            if (accuracy) {
+                accuracyFeature.setGeometry(accuracy)
+            }
+        })
+
+        geolocation.on('error', (error) => {
+            console.error('Geolocation error:', error)
+            setHasPermission(false)
+        })
+
+        // Add features to the layer
+        const source = locationLayer.getSource()
+        if (source) {
+            source.addFeature(accuracyFeature)
+            source.addFeature(positionFeature)
+        }
+
+        // Start tracking
+        geolocation.setTracking(true)
+
+        return () => {
+            geolocation.setTracking(false)
+            removeCurrentLocationLayer(map)
+        }
+    }, [map, locationState.enabled, locationState.tracking])
+
+    return hasPermission
+}
+
+function removeCurrentLocationLayer(map: Map) {
+    map.getLayers()
+        .getArray()
+        .filter(l => l.get(LOCATION_LAYER_KEY))
+        .forEach(l => map.removeLayer(l))
+}
+
+function createLocationLayer(): VectorLayer<VectorSource> {
+    const layer = new VectorLayer({
+        source: new VectorSource(),
+        style: (feature) => {
+            const geometry = feature.getGeometry()
+            if (geometry instanceof Point) {
+                // Blue dot style for position
+                return [
+                    new Style({
+                        image: new CircleStyle({
+                            radius: 8,
+                            fill: new Fill({
+                                color: '#4285F4'
+                            }),
+                            stroke: new Stroke({
+                                color: '#FFFFFF',
+                                width: 2
+                            })
+                        })
+                    }),
+                    // Pulsing effect outer ring
+                    new Style({
+                        image: new CircleStyle({
+                            radius: 16,
+                            fill: new Fill({
+                                color: 'rgba(66, 133, 244, 0.2)'
+                            })
+                        })
+                    })
+                ]
+            } else if (geometry instanceof CircleGeom) {
+                // Accuracy circle style
+                return new Style({
+                    fill: new Fill({
+                        color: 'rgba(66, 133, 244, 0.1)'
+                    }),
+                    stroke: new Stroke({
+                        color: 'rgba(66, 133, 244, 0.3)',
+                        width: 1
+                    })
+                })
+            }
+            return []
+        }
+    })
+    
+    layer.set(LOCATION_LAYER_KEY, true)
+    layer.setZIndex(4) // Above paths and query points
+    
+    return layer
+}

src/layers/UseQueryPointsLayer.tsx

@@ -85,7 +85,7 @@ function removeDragInteractions(map: Map) {
         .forEach(i => map.removeInteraction(i))
 }
 
-function addDragInteractions(map: Map, queryPointsLayer: VectorLayer<VectorSource<Feature<Geometry>>>) {
+function addDragInteractions(map: Map, queryPointsLayer: VectorLayer<VectorSource>) {
     let tmp = queryPointsLayer.getSource()
     if (tmp == null) throw new Error('source must not be null') // typescript requires this
     const modify = new Modify({

src/stores/CurrentLocationStore.ts

@@ -0,0 +1,67 @@
+import Store from '@/stores/Store'
+import { Action } from '@/stores/Dispatcher'
+
+export interface CurrentLocationStoreState {
+    enabled: boolean
+    tracking: boolean
+    hasPermission: boolean | null
+}
+
+export class ToggleCurrentLocation implements Action {
+    readonly enabled: boolean
+
+    constructor(enabled: boolean) {
+        this.enabled = enabled
+    }
+}
+
+export class ToggleLocationTracking implements Action {
+    readonly tracking: boolean
+
+    constructor(tracking: boolean) {
+        this.tracking = tracking
+    }
+}
+
+export class SetLocationPermission implements Action {
+    readonly hasPermission: boolean | null
+
+    constructor(hasPermission: boolean | null) {
+        this.hasPermission = hasPermission
+    }
+}
+
+export default class CurrentLocationStore extends Store<CurrentLocationStoreState> {
+    constructor() {
+        super(CurrentLocationStore.getInitialState())
+    }
+
+    private static getInitialState(): CurrentLocationStoreState {
+        return {
+            enabled: false,
+            tracking: false,
+            hasPermission: null
+        }
+    }
+
+    reduce(state: CurrentLocationStoreState, action: Action): CurrentLocationStoreState {
+        if (action instanceof ToggleCurrentLocation) {
+            return {
+                ...state,
+                enabled: action.enabled,
+                tracking: action.enabled ? state.tracking : false
+            }
+        } else if (action instanceof ToggleLocationTracking) {
+            return {
+                ...state,
+                tracking: action.tracking
+            }
+        } else if (action instanceof SetLocationPermission) {
+            return {
+                ...state,
+                hasPermission: action.hasPermission
+            }
+        }
+        return state
+    }
+}