Turn-by-Turn Voice Navigation in the Browser

package.json

@@ -5,16 +5,19 @@
         "type": "git",
         "url": "git+https://github.com/graphhopper/graphhopper-maps.git"
     },
-    "version": "0.7",
+    "version": "2.0.2",
     "license": "Apache-2.0",
     "scripts": {
         "format": "prettier --write \"src/**/*.{css,ts,tsx,html}\" \"test/**/*.{js,ts,jsx,tsx}\" \"jest.config.js\" \"webpack.*.js\" \"config.js\"",
         "serve": "webpack serve --config webpack.dev.js",
         "build": "webpack --config webpack.prod.js",
+        "fdroid": "webpack --config webpack.fdroid.js",
         "build-debug": "webpack --config webpack.dev.js",
         "test": "jest"
     },
     "dependencies": {
+        "maplibre-gl": "^3.1.0",
+
         "custom-model-editor": "github:graphhopper/custom-model-editor#3a46b6981d170b7eb70d621bbb92caed149e5a97",
         "geojson": "^0.5.0",
         "heightgraph": "github:easbar/Leaflet.Heightgraph#5f4f0b1fff3646aa071981381f5955c9e6f111f0",

src/App.module.css

@@ -12,6 +12,32 @@
     user-select: none; /* firefox does not ignore -webkit-user-select so make this explicit, see #217 */
 }
 
+.appNaviWrapper {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: 30rem 1fr;
+    grid-template-rows: 1fr auto;
+    justify-content: space-between;
+    overflow: auto;
+    -webkit-user-select: none;
+    user-select: none; /* firefox does not ignore -webkit-user-select so make this explicit, see #217 */
+}
+
+@media (max-width: 44rem) {
+    .appWrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: auto 0 1fr auto auto;
+    }
+
+    .appNaviWrapper {
+        grid-template-columns: 100%;
+        grid-template-rows: 1fr auto;
+    }
+}
+
 .map {
     grid-column: 1 / span 3;
     grid-row: 1 / span 1;
@@ -107,14 +133,6 @@
     box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
 }
 
-.smallScreenRoutingResult {
-    grid-row: 4 / span 1;
-    grid-column: 1 / span 1;
-    margin: 0;
-    z-index: 2;
-    background-color: white;
-}
-
 .smallScreenPoweredBy {
     grid-row: 5 / span 1;
     grid-column: 1 / span 1;
@@ -123,13 +141,6 @@
     z-index: 2;
 }
 
-@media (max-width: 44rem) {
-    .appWrapper {
-        grid-template-columns: 100%;
-        grid-template-rows: auto 0 1fr auto auto;
-    }
-}
-
 /* mapilion */
 @font-face {
     font-family: 'Open Sans';
@@ -152,16 +163,16 @@
     src: url(./fonts/RobotoCondensed-Regular.ttf) format('truetype');
 }
 
-.sidebarCloseButton {
+.sidebarCloseButton svg {
     position: absolute;
 
-    color: lightgray !important; /* unsure why !important is necessary here but not in ErrorMessage.module.css for same <Cross/> */
+    fill: lightgray;
 
-    height: 10px;
-    width: 10px;
+    height: 12px;
+    width: 12px;
 
-    right: 7px;
-    top: 6px;
+    right: 6px;
+    top: 5px;
 }
 
 .sidebarCloseButton:hover {

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import PathDetails from '@/pathDetails/PathDetails'
 import styles from './App.module.css'
 import {
@@ -11,6 +11,7 @@ import {
     getQueryStore,
     getRouteStore,
     getSettingsStore,
+    getTurnNavigationStore,
 } from '@/stores/Stores'
 import MapComponent from '@/map/MapComponent'
 import MapOptions from '@/map/MapOptions'
@@ -24,6 +25,7 @@ import { MapOptionsStoreState } from '@/stores/MapOptionsStore'
 import { ErrorStoreState } from '@/stores/ErrorStore'
 import Search from '@/sidebar/search/Search'
 import ErrorMessage from '@/sidebar/ErrorMessage'
+import { TurnNavigationStoreState } from './stores/TurnNavigationStore'
 import useBackgroundLayer from '@/layers/UseBackgroundLayer'
 import useQueryPointsLayer from '@/layers/UseQueryPointsLayer'
 import usePathsLayer from '@/layers/UsePathsLayer'
@@ -36,10 +38,12 @@ import useRoutingGraphLayer from '@/layers/UseRoutingGraphLayer'
 import useUrbanDensityLayer from '@/layers/UseUrbanDensityLayer'
 import useMapBorderLayer from '@/layers/UseMapBorderLayer'
 import RoutingProfiles from '@/sidebar/search/routingProfiles/RoutingProfiles'
+import PlainButton from '@/PlainButton'
+import TurnNavigation from '@/turnNavigation/TurnNavigation'
 import MapPopups from '@/map/MapPopups'
+import useCurrentLocationLayer from '@/layers/CurrentLocationLayer'
 import Menu from '@/sidebar/menu.svg'
 import Cross from '@/sidebar/times-solid.svg'
-import PlainButton from '@/PlainButton'
 import useAreasLayer from '@/layers/UseAreasLayer'
 import useExternalMVTLayer from '@/layers/UseExternalMVTLayer'
 import LocationButton from '@/map/LocationButton'
@@ -54,6 +58,7 @@ export default function App() {
     const [query, setQuery] = useState(getQueryStore().state)
     const [info, setInfo] = useState(getApiInfoStore().state)
     const [route, setRoute] = useState(getRouteStore().state)
+    const [turnNavigation, setTurnNavigation] = useState(getTurnNavigationStore().state)
     const [error, setError] = useState(getErrorStore().state)
     const [mapOptions, setMapOptions] = useState(getMapOptionsStore().state)
     const [pathDetails, setPathDetails] = useState(getPathDetailsStore().state)
@@ -69,6 +74,7 @@ export default function App() {
         const onRouteChanged = () => setRoute(getRouteStore().state)
         const onErrorChanged = () => setError(getErrorStore().state)
         const onMapOptionsChanged = () => setMapOptions(getMapOptionsStore().state)
+        const onTurnNavigationChanged = () => setTurnNavigation(getTurnNavigationStore().state)
         const onPathDetailsChanged = () => setPathDetails(getPathDetailsStore().state)
         const onMapFeaturesChanged = () => setMapFeatures(getMapFeatureStore().state)
         const onPOIsChanged = () => setPOIs(getPOIsStore().state)
@@ -79,6 +85,7 @@ export default function App() {
         getRouteStore().register(onRouteChanged)
         getErrorStore().register(onErrorChanged)
         getMapOptionsStore().register(onMapOptionsChanged)
+        getTurnNavigationStore().register(onTurnNavigationChanged)
         getPathDetailsStore().register(onPathDetailsChanged)
         getMapFeatureStore().register(onMapFeaturesChanged)
         getPOIsStore().register(onPOIsChanged)
@@ -88,6 +95,7 @@ export default function App() {
         onRouteChanged()
         onErrorChanged()
         onMapOptionsChanged()
+        onTurnNavigationChanged()
         onPathDetailsChanged()
         onMapFeaturesChanged()
         onPOIsChanged()
@@ -99,6 +107,7 @@ export default function App() {
             getRouteStore().deregister(onRouteChanged)
             getErrorStore().deregister(onErrorChanged)
             getMapOptionsStore().deregister(onMapOptionsChanged)
+            getTurnNavigationStore().deregister(onTurnNavigationChanged)
             getPathDetailsStore().deregister(onPathDetailsChanged)
             getMapFeatureStore().deregister(onMapFeaturesChanged)
             getPOIsStore().deregister(onPOIsChanged)
@@ -112,15 +121,16 @@ export default function App() {
     useAreasLayer(map, settings.drawAreasEnabled, query.customModelStr, query.customModelEnabled)
     useRoutingGraphLayer(map, mapOptions.routingGraphEnabled)
     useUrbanDensityLayer(map, mapOptions.urbanDensityEnabled)
-    usePathsLayer(map, route.routingResult.paths, route.selectedPath, query.queryPoints)
+    usePathsLayer(map, route, query.queryPoints, turnNavigation)
     useQueryPointsLayer(map, query.queryPoints)
     usePathDetailsLayer(map, pathDetails)
+    useCurrentLocationLayer(map, turnNavigation)
     usePOIsLayer(map, pois)
 
     const isSmallScreen = useMediaQuery({ query: '(max-width: 44rem)' })
     return (
         <SettingsContext.Provider value={settings}>
-            <div className={styles.appWrapper}>
+            <div className={turnNavigation.showUI ? styles.appNaviWrapper : styles.appWrapper}>
                 <MapPopups
                     map={map}
                     pathDetails={pathDetails}
@@ -129,13 +139,21 @@ export default function App() {
                     query={query}
                 />
                 <ContextMenu map={map} route={route} queryPoints={query.queryPoints} />
-                {isSmallScreen ? (
+                {turnNavigation.showUI ? (
+                    <>
+                        <TurnNavigation turnNavigation={turnNavigation} />
+                        <div className={styles.map}>
+                            <MapComponent map={map} />
+                        </div>
+                    </>
+                ) : isSmallScreen ? (
                     <SmallScreenLayout
                         query={query}
                         route={route}
                         map={map}
                         mapOptions={mapOptions}
                         error={error}
+                        turnNavigation={turnNavigation}
                         encodedValues={info.encoded_values}
                         drawAreas={settings.drawAreasEnabled}
                     />
@@ -146,6 +164,7 @@ export default function App() {
                         map={map}
                         mapOptions={mapOptions}
                         error={error}
+                        turnNavigation={turnNavigation}
                         encodedValues={info.encoded_values}
                         drawAreas={settings.drawAreasEnabled}
                     />
@@ -163,11 +182,22 @@ interface LayoutProps {
     error: ErrorStoreState
     encodedValues: object[]
     drawAreas: boolean
+    turnNavigation: TurnNavigationStoreState
 }
 
-function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues, drawAreas }: LayoutProps) {
+function LargeScreenLayout({
+    query,
+    route,
+    map,
+    error,
+    mapOptions,
+    encodedValues,
+    drawAreas,
+    turnNavigation,
+}: LayoutProps) {
     const [showSidebar, setShowSidebar] = useState(true)
     const [showCustomModelBox, setShowCustomModelBox] = useState(false)
+
     return (
         <>
             {showSidebar ? (
@@ -192,14 +222,15 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
                                 drawAreas={drawAreas}
                             />
                         )}
-                        <Search points={query.queryPoints} map={map} />
+                        <Search points={query.queryPoints} map={map} turnNavigationSettings={turnNavigation.settings} />
                         <div>{!error.isDismissed && <ErrorMessage error={error} />}</div>
                         <RoutingResults
                             info={route.routingResult.info}
                             paths={route.routingResult.paths}
                             selectedPath={route.selectedPath}
                             currentRequest={query.currentRequest}
                             profile={query.routingProfile.name}
+                            turnNavigation={turnNavigation}
                         />
                         <div>
                             <PoweredBy />
@@ -229,7 +260,16 @@ 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,
+    turnNavigation,
+}: LayoutProps) {
     return (
         <>
             <div className={styles.smallScreenSidebar}>
@@ -238,6 +278,7 @@ function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues
                     route={route}
                     error={error}
                     encodedValues={encodedValues}
+                    turnNavigationSettings={turnNavigation.settings}
                     drawAreas={drawAreas}
                     map={map}
                 />
@@ -251,14 +292,14 @@ function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues
                     <LocationButton queryPoints={query.queryPoints} />
                 </div>
             </div>
-
             <div className={styles.smallScreenRoutingResult}>
                 <RoutingResults
                     info={route.routingResult.info}
                     paths={route.routingResult.paths}
                     selectedPath={route.selectedPath}
                     currentRequest={query.currentRequest}
                     profile={query.routingProfile.name}
+                    turnNavigation={turnNavigation}
                 />
             </div>
 

src/Converters.ts

@@ -13,13 +13,33 @@ export function milliSecondsToText(ms: number) {
 }
 
 let distanceFormat: Intl.NumberFormat = new Intl.NumberFormat('en', { maximumFractionDigits: 1 })
-export function setDistanceFormat(_distanceFormat: Intl.NumberFormat) {
-    distanceFormat = _distanceFormat
+let distanceFormat2 = new Intl.NumberFormat('en', { maximumFractionDigits: 2 })
+
+export function initDistanceFormat(lang: string) {
+    distanceFormat = new Intl.NumberFormat(lang, { maximumFractionDigits: 1 })
+    distanceFormat2 = new Intl.NumberFormat(lang, { maximumFractionDigits: 2 })
+}
+
+export function kmToMPHIfMiles(value: number, showDistanceInMiles: boolean, roundTo10 = false) {
+    return showDistanceInMiles
+        ? roundTo10
+            ? Math.round(value / 1.60934 / 10.0) * 10
+            : Math.round(value / 1.60934)
+        : Math.round(value)
+}
+
+export function meterToFt(value: number) {
+    return value / 0.3048
+}
+
+export function meterToMiles(value: number) {
+    return value / 1609.34
 }
 
 export function metersToText(meters: number, showDistanceInMiles: boolean, forceSmallUnits: boolean = false) {
     if (showDistanceInMiles) {
         if (meters < 160.934 || forceSmallUnits) return Math.floor(meters / 0.3048) + ' ft'
+        if (meters < 600) return distanceFormat2.format(meters / 1609.34) + ' mi'
         return distanceFormat.format(meters / 1609.34) + ' mi'
     } else {
         if (meters < 1000 || forceSmallUnits) return Math.floor(meters) + ' m'

src/SpeechSynthesizer.ts

@@ -0,0 +1,24 @@
+export interface SpeechSynthesizer {
+    synthesize(text: string): void
+}
+
+export class SpeechSynthesizerImpl implements SpeechSynthesizer {
+    private readonly locale: string
+    private readonly speechSynthesisAPIAvailable: boolean
+
+    constructor(locale: string) {
+        this.locale = locale
+        this.speechSynthesisAPIAvailable = 'speechSynthesis' in window
+    }
+
+    synthesize(text: string) {
+        if (this.speechSynthesisAPIAvailable) {
+            let utterance = new SpeechSynthesisUtterance(text)
+            utterance.lang = this.locale
+            if (speechSynthesis.pending) speechSynthesis.cancel()
+            speechSynthesis.speak(utterance)
+        } else {
+            console.log('no speechSynthesis API available')
+        }
+    }
+}