show accurracy radius and show search animation

Author: karussell

src/actions/Actions.ts

@@ -295,8 +295,10 @@ export class CurrentLocationError implements Action {
 
 export class CurrentLocation implements Action {
     readonly coordinate: Coordinate
+    readonly accuracy: number
 
-    constructor(coordinate: Coordinate) {
+    constructor(coordinate: Coordinate, accuracy: number) {
         this.coordinate = coordinate
+        this.accuracy = accuracy
     }
 }

src/layers/UseCurrentLocationLayer.tsx

@@ -1,44 +1,39 @@
 import { Feature, Map } from 'ol'
-import { useEffect, useRef } from 'react'
+import { useEffect } from 'react'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
-import { Circle as CircleGeom, Point } from 'ol/geom'
+import { Circle, Circle as CircleGeom, Point } from 'ol/geom'
 import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style'
 import { CurrentLocationStoreState } from '@/stores/CurrentLocationStore'
 import { fromLonLat } from 'ol/proj'
-import { getMap } from '@/map/map'
-import Dispatcher from '@/stores/Dispatcher'
 
 const LOCATION_LAYER_KEY = 'gh:current_location'
 
 export default function useCurrentLocationLayer(map: Map, locationState: CurrentLocationStoreState) {
     useEffect(() => {
-        console.log('NOW useEffect, syncView = ', locationState.syncView)
-
         if (!locationState.enabled) {
             removeCurrentLocationLayer(map)
             return
         }
 
         const positionFeature = new Feature()
+        const accuracyFeature = new Feature()
         if (locationState.coordinate) {
-            positionFeature.setGeometry(
-                new Point(fromLonLat([locationState.coordinate.lng, locationState.coordinate.lat]))
-            )
+            const coord = fromLonLat([locationState.coordinate.lng, locationState.coordinate.lat])
+            positionFeature.setGeometry(new Point(coord))
+            accuracyFeature.setGeometry(new Circle(coord, locationState.accuracy))
 
             if (locationState.syncView) {
                 // TODO same code as for MoveMapToPoint action, but calling Dispatcher here is ugly
                 let zoom = map.getView().getZoom()
                 if (zoom == undefined || zoom < 8) zoom = 8
-                map.getView().animate({
-                    zoom: zoom,
-                    center: fromLonLat([locationState.coordinate.lng, locationState.coordinate.lat]),
-                    duration: 400,
-                })
+                map.getView().animate({ zoom: zoom, center: coord, duration: 400 })
             }
         }
 
-        const layer = createLocationLayer(positionFeature)
+        const layer = createLocationLayer()
+        layer.getSource()?.addFeature(positionFeature)
+        layer.getSource()?.addFeature(accuracyFeature)
         map.addLayer(layer)
 
         return () => {
@@ -54,7 +49,7 @@ function removeCurrentLocationLayer(map: Map) {
         .forEach(l => map.removeLayer(l))
 }
 
-function createLocationLayer(positionFeature: Feature): VectorLayer<VectorSource> {
+function createLocationLayer(): VectorLayer<VectorSource> {
     const layer = new VectorLayer({
         source: new VectorSource(),
         style: feature => {
@@ -86,22 +81,20 @@ function createLocationLayer(positionFeature: Feature): VectorLayer<VectorSource
                 ]
             } 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 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.setZIndex(4) // Above paths and query points
-
-    layer.getSource()?.addFeature(positionFeature)
     return layer
 }

src/map/LocationButton.tsx

@@ -15,9 +15,15 @@ export default function LocationButton(props: { currentLocation: CurrentLocation
         if (props.currentLocation.enabled) {
             if (!props.currentLocation.syncView) setLocationSearch('on_but_not_in_sync')
             else if (props.currentLocation.error) setLocationSearch('error')
-            else setLocationSearch('initial')
+            else if (props.currentLocation.coordinate != null) setLocationSearch('initial')
+            else setLocationSearch('search')
         }
-    }, [props.currentLocation.syncView, props.currentLocation.error, props.currentLocation.enabled])
+    }, [
+        props.currentLocation.syncView,
+        props.currentLocation.error,
+        props.currentLocation.enabled,
+        props.currentLocation.coordinate,
+    ])
 
     return (
         <div

src/stores/CurrentLocationStore.ts

@@ -3,7 +3,6 @@ import Dispatcher, { Action } from '@/stores/Dispatcher'
 import {
     CurrentLocation,
     CurrentLocationError,
-    MoveMapToPoint,
     StartSyncCurrentLocation,
     StartWatchCurrentLocation,
     StopSyncCurrentLocation,
@@ -16,6 +15,7 @@ export interface CurrentLocationStoreState {
     error: string | null
     enabled: boolean
     syncView: boolean
+    accuracy: number // meters
     coordinate: Coordinate | null
 }
 
@@ -27,6 +27,7 @@ export default class CurrentLocationStore extends Store<CurrentLocationStoreStat
             error: null,
             enabled: false,
             syncView: false,
+            accuracy: 0,
             coordinate: null,
         })
     }
@@ -38,7 +39,6 @@ export default class CurrentLocationStore extends Store<CurrentLocationStoreStat
                 return state
             }
 
-            console.log('NOW start ' + JSON.stringify(action, null, 2))
             this.start()
             return {
                 ...state,
@@ -48,7 +48,7 @@ export default class CurrentLocationStore extends Store<CurrentLocationStoreStat
                 coordinate: null,
             }
         } else if (action instanceof StopWatchCurrentLocation) {
-            console.log('NOW stop ' + JSON.stringify(action, null, 2))
+            // TODO NOW stop location watching e.g. when pressing the location button once again if it shows 'success'
             this.stop()
             return {
                 ...state,
@@ -57,26 +57,24 @@ export default class CurrentLocationStore extends Store<CurrentLocationStoreStat
                 syncView: false,
             }
         } else if (action instanceof CurrentLocationError) {
-            console.log('NOW error ' + JSON.stringify(action, null, 2))
             return {
                 ...state,
                 enabled: false,
                 error: action.error,
                 coordinate: null,
             }
         } else if (action instanceof CurrentLocation) {
-            console.log('NOW current ' + JSON.stringify(action, null, 2))
             return {
                 ...state,
+                accuracy: action.accuracy,
                 coordinate: action.coordinate,
             }
         } else if (action instanceof StartSyncCurrentLocation) {
             if (!state.enabled) {
-                console.log('NOW cannot start sync as not enabled')
+                console.warn('cannot start synchronizing view as current location not enabled')
                 return state
             }
 
-            console.log('NOW start sync ' + JSON.stringify(action, null, 2))
             return {
                 ...state,
                 error: null,
@@ -86,7 +84,6 @@ export default class CurrentLocationStore extends Store<CurrentLocationStoreStat
         } else if (action instanceof StopSyncCurrentLocation) {
             if (!state.enabled) return state
 
-            console.log('NOW stop sync ' + JSON.stringify(action, null, 2))
             return {
                 ...state,
                 error: null,
@@ -106,7 +103,10 @@ export default class CurrentLocationStore extends Store<CurrentLocationStoreStat
         this.watchId = navigator.geolocation.watchPosition(
             position => {
                 Dispatcher.dispatch(
-                    new CurrentLocation({ lng: position.coords.longitude, lat: position.coords.latitude })
+                    new CurrentLocation(
+                        { lng: position.coords.longitude, lat: position.coords.latitude },
+                        position.coords.accuracy
+                    )
                 )
             },
             error => {