show current location as blue dot - fix #430

Author: oblonski

src/App.tsx

@@ -11,6 +11,7 @@ import {
     getQueryStore,
     getRouteStore,
     getSettingsStore,
+    getCurrentLocationStore,
 } from '@/stores/Stores'
 import MapComponent from '@/map/MapComponent'
 import MapOptions from '@/map/MapOptions'
@@ -22,6 +23,7 @@ import { QueryStoreState, RequestState } from '@/stores/QueryStore'
 import { RouteStoreState } from '@/stores/RouteStore'
 import { MapOptionsStoreState } from '@/stores/MapOptionsStore'
 import { ErrorStoreState } from '@/stores/ErrorStore'
+import { CurrentLocationStoreState } from '@/stores/CurrentLocationStore'
 import Search from '@/sidebar/search/Search'
 import ErrorMessage from '@/sidebar/ErrorMessage'
 import useBackgroundLayer from '@/layers/UseBackgroundLayer'
@@ -45,6 +47,7 @@ import useExternalMVTLayer from '@/layers/UseExternalMVTLayer'
 import LocationButton from '@/map/LocationButton'
 import { SettingsContext } from '@/contexts/SettingsContext'
 import usePOIsLayer from '@/layers/UsePOIsLayer'
+import useCurrentLocationLayer from '@/layers/UseCurrentLocationLayer'
 
 export const POPUP_CONTAINER_ID = 'popup-container'
 export const SIDEBAR_CONTENT_ID = 'sidebar-content'
@@ -59,6 +62,7 @@ export default function App() {
     const [pathDetails, setPathDetails] = useState(getPathDetailsStore().state)
     const [mapFeatures, setMapFeatures] = useState(getMapFeatureStore().state)
     const [pois, setPOIs] = useState(getPOIsStore().state)
+    const [currentLocation, setCurrentLocation] = useState(getCurrentLocationStore().state)
 
     const map = getMap()
 
@@ -72,6 +76,7 @@ export default function App() {
         const onPathDetailsChanged = () => setPathDetails(getPathDetailsStore().state)
         const onMapFeaturesChanged = () => setMapFeatures(getMapFeatureStore().state)
         const onPOIsChanged = () => setPOIs(getPOIsStore().state)
+        const onCurrentLocationChanged = () => setCurrentLocation(getCurrentLocationStore().state)
 
         getSettingsStore().register(onSettingsChanged)
         getQueryStore().register(onQueryChanged)
@@ -82,6 +87,7 @@ export default function App() {
         getPathDetailsStore().register(onPathDetailsChanged)
         getMapFeatureStore().register(onMapFeaturesChanged)
         getPOIsStore().register(onPOIsChanged)
+        getCurrentLocationStore().register(onCurrentLocationChanged)
 
         onQueryChanged()
         onInfoChanged()
@@ -91,6 +97,7 @@ export default function App() {
         onPathDetailsChanged()
         onMapFeaturesChanged()
         onPOIsChanged()
+        onCurrentLocationChanged()
 
         return () => {
             getSettingsStore().deregister(onSettingsChanged)
@@ -102,6 +109,7 @@ export default function App() {
             getPathDetailsStore().deregister(onPathDetailsChanged)
             getMapFeatureStore().deregister(onMapFeaturesChanged)
             getPOIsStore().deregister(onPOIsChanged)
+            getCurrentLocationStore().deregister(onCurrentLocationChanged)
         }
     }, [])
 
@@ -116,6 +124,7 @@ export default function App() {
     useQueryPointsLayer(map, query.queryPoints)
     usePathDetailsLayer(map, pathDetails)
     usePOIsLayer(map, pois)
+    useCurrentLocationLayer(map, currentLocation)
 
     const isSmallScreen = useMediaQuery({ query: '(max-width: 44rem)' })
     return (
@@ -138,6 +147,7 @@ export default function App() {
                         error={error}
                         encodedValues={info.encoded_values}
                         drawAreas={settings.drawAreasEnabled}
+                        currentLocation={currentLocation}
                     />
                 ) : (
                     <LargeScreenLayout
@@ -148,6 +158,7 @@ export default function App() {
                         error={error}
                         encodedValues={info.encoded_values}
                         drawAreas={settings.drawAreasEnabled}
+                        currentLocation={currentLocation}
                     />
                 )}
             </div>
@@ -163,9 +174,10 @@ interface LayoutProps {
     error: ErrorStoreState
     encodedValues: object[]
     drawAreas: boolean
+    currentLocation: CurrentLocationStoreState
 }
 
-function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues, drawAreas }: LayoutProps) {
+function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues, drawAreas, currentLocation }: LayoutProps) {
     const [showSidebar, setShowSidebar] = useState(true)
     const [showCustomModelBox, setShowCustomModelBox] = useState(false)
     return (
@@ -216,7 +228,7 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
             <div className={styles.popupContainer} id={POPUP_CONTAINER_ID} />
             <div className={styles.onMapRightSide}>
                 <MapOptions {...mapOptions} />
-                <LocationButton queryPoints={query.queryPoints} />
+                <LocationButton queryPoints={query.queryPoints} currentLocation={currentLocation} />
             </div>
             <div className={styles.map}>
                 <MapComponent map={map} />
@@ -229,7 +241,7 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
     )
 }
 
-function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues, drawAreas }: LayoutProps) {
+function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues, drawAreas, currentLocation }: LayoutProps) {
     return (
         <>
             <div className={styles.smallScreenSidebar}>
@@ -248,7 +260,7 @@ function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues
             <div className={styles.smallScreenMapOptions}>
                 <div className={styles.onMapRightSide}>
                     <MapOptions {...mapOptions} />
-                    <LocationButton queryPoints={query.queryPoints} />
+                    <LocationButton queryPoints={query.queryPoints} currentLocation={currentLocation} />
                 </div>
             </div>
 

src/index.tsx

@@ -13,6 +13,7 @@ import {
     getQueryStore,
     getRouteStore,
     getSettingsStore,
+    getCurrentLocationStore,
     setStores,
 } from '@/stores/Stores'
 import Dispatcher from '@/stores/Dispatcher'
@@ -31,6 +32,7 @@ import MapFeatureStore from '@/stores/MapFeatureStore'
 import SettingsStore from '@/stores/SettingsStore'
 import { ErrorAction, InfoReceived } from '@/actions/Actions'
 import POIsStore from '@/stores/POIsStore'
+import CurrentLocationStore from '@/stores/CurrentLocationStore'
 import { setDistanceFormat } from '@/Converters'
 import { AddressParseResult } from '@/pois/AddressParseResult'
 
@@ -61,6 +63,7 @@ setStores({
     pathDetailsStore: new PathDetailsStore(),
     mapFeatureStore: new MapFeatureStore(),
     poisStore: new POIsStore(),
+    currentLocationStore: new CurrentLocationStore(),
 })
 
 setMap(createMap())
@@ -75,6 +78,7 @@ Dispatcher.register(getMapOptionsStore())
 Dispatcher.register(getPathDetailsStore())
 Dispatcher.register(getMapFeatureStore())
 Dispatcher.register(getPOIsStore())
+Dispatcher.register(getCurrentLocationStore())
 
 // register map action receiver
 const smallScreenMediaQuery = window.matchMedia('(max-width: 44rem)')

src/map/LocationButton.tsx

@@ -9,13 +9,20 @@ import LocationOn from '@/map/location_on.svg'
 import { useState } from 'react'
 import { tr } from '@/translation/Translation'
 import { getBBoxFromCoord } from '@/utils'
+import { ToggleCurrentLocation } from '@/stores/CurrentLocationStore'
+import { CurrentLocationStoreState } from '@/stores/CurrentLocationStore'
 
-export default function LocationButton(props: { queryPoints: QueryPoint[] }) {
+export default function LocationButton(props: { queryPoints: QueryPoint[]; currentLocation: CurrentLocationStoreState }) {
     const [locationSearch, setLocationSearch] = useState('synched_map_or_initial')
+    
     return (
         <div
             className={styles.locationOnOff}
             onClick={() => {
+                // First toggle location display
+                Dispatcher.dispatch(new ToggleCurrentLocation(!props.currentLocation.enabled))
+                
+                // Then handle the location button click for routing/centering
                 setLocationSearch('search')
                 onCurrentLocationButtonClicked(coordinate => {
                     if (coordinate) {

src/stores/Stores.ts

@@ -7,6 +7,7 @@ import PathDetailsStore from '@/stores/PathDetailsStore'
 import MapFeatureStore from '@/stores/MapFeatureStore'
 import SettingsStore from '@/stores/SettingsStore'
 import POIsStore from '@/stores/POIsStore'
+import CurrentLocationStore from '@/stores/CurrentLocationStore'
 
 let settingsStore: SettingsStore
 let queryStore: QueryStore
@@ -17,6 +18,7 @@ let mapOptionsStore: MapOptionsStore
 let pathDetailsStore: PathDetailsStore
 let mapFeatureStore: MapFeatureStore
 let poisStore: POIsStore
+let currentLocationStore: CurrentLocationStore
 
 interface StoresInput {
     settingsStore: SettingsStore
@@ -28,6 +30,7 @@ interface StoresInput {
     pathDetailsStore: PathDetailsStore
     mapFeatureStore: MapFeatureStore
     poisStore: POIsStore
+    currentLocationStore: CurrentLocationStore
 }
 
 export const setStores = function (stores: StoresInput) {
@@ -40,6 +43,7 @@ export const setStores = function (stores: StoresInput) {
     pathDetailsStore = stores.pathDetailsStore
     mapFeatureStore = stores.mapFeatureStore
     poisStore = stores.poisStore
+    currentLocationStore = stores.currentLocationStore
 }
 
 export const getSettingsStore = () => settingsStore
@@ -51,3 +55,4 @@ export const getMapOptionsStore = () => mapOptionsStore
 export const getPathDetailsStore = () => pathDetailsStore
 export const getMapFeatureStore = () => mapFeatureStore
 export const getPOIsStore = () => poisStore
+export const getCurrentLocationStore = () => currentLocationStore