+
- {isSmallScreen ? (
+ {turnNavigation.showUI ? (
+ <>
+
+
+
+
+
+ ) : isSmallScreen ? (
{showSidebar ? (
@@ -213,7 +235,12 @@ function LargeScreenLayout({
drawAreas={drawAreas}
/>
)}
-
+
{!error.isDismissed && }
@@ -258,6 +286,7 @@ function SmallScreenLayout({
mapOptions,
encodedValues,
drawAreas,
+ turnNavigation,
currentLocation,
}: LayoutProps) {
return (
@@ -268,6 +297,7 @@ function SmallScreenLayout({
route={route}
error={error}
encodedValues={encodedValues}
+ turnNavigationSettings={turnNavigation.settings}
drawAreas={drawAreas}
map={map}
/>
@@ -281,7 +311,6 @@ function SmallScreenLayout({
-
diff --git a/src/Converters.ts b/src/Converters.ts
index fb435e70..fccafbd8 100644
--- a/src/Converters.ts
+++ b/src/Converters.ts
@@ -1,6 +1,6 @@
-import { GeocodingHit } from '@/api/graphhopper'
+import {GeocodingHit} from '@/api/graphhopper'
-import { Coordinate } from '@/utils'
+import {Coordinate} from '@/utils'
export function milliSecondsToText(ms: number) {
const hours = Math.floor(ms / 3600000)
@@ -12,7 +12,8 @@ export function milliSecondsToText(ms: number) {
return (hourText ? hourText + ' ' : '') + minutes + ' min'
}
-let distanceFormat: Intl.NumberFormat = new Intl.NumberFormat('en', { maximumFractionDigits: 1 })
+let distanceFormat: Intl.NumberFormat = new Intl.NumberFormat('en', {maximumFractionDigits: 1})
+
export function setDistanceFormat(_distanceFormat: Intl.NumberFormat) {
distanceFormat = _distanceFormat
}
@@ -51,6 +52,22 @@ export function metersToShortText(meters: number, showDistanceInMiles: boolean)
}
}
+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 hitToItem(hit: GeocodingHit) {
const mainText =
hit.street && hit.name.indexOf(hit.street) >= 0
diff --git a/src/SpeechSynthesizer.ts b/src/SpeechSynthesizer.ts
new file mode 100644
index 00000000..576d253d
--- /dev/null
+++ b/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')
+ }
+ }
+}
diff --git a/src/actions/Actions.ts b/src/actions/Actions.ts
index bc20514a..ddca240a 100644
--- a/src/actions/Actions.ts
+++ b/src/actions/Actions.ts
@@ -2,6 +2,7 @@ import { Action } from '@/stores/Dispatcher'
import { QueryPoint } from '@/stores/QueryStore'
import { ApiInfo, Bbox, Path, RoutingArgs, RoutingProfile, RoutingResult } from '@/api/graphhopper'
import { PathDetailsPoint } from '@/stores/PathDetailsStore'
+import { TNSettingsState } from '@/stores/TurnNavigationStore'
import { POI } from '@/stores/POIsStore'
import { Settings } from '@/stores/SettingsStore'
import { Coordinate } from '@/utils'
@@ -14,6 +15,50 @@ export class InfoReceived implements Action {
}
}
+export class TurnNavigationStop implements Action {}
+
+export class TurnNavigationStart implements Action {}
+
+export class LocationUpdateSync implements Action {
+ readonly enableViewSync: boolean
+
+ constructor(enableViewSync: boolean) {
+ this.enableViewSync = enableViewSync
+ }
+}
+
+export class LocationUpdate implements Action {
+ readonly coordinate: Coordinate
+ readonly speed: number // in meter/sec
+ readonly heading: number
+ readonly syncView: boolean
+
+ constructor(coordinate: Coordinate, syncView: boolean, speed: number, heading: number) {
+ this.coordinate = coordinate
+ this.speed = speed
+ this.syncView = syncView
+ this.heading = heading
+ }
+}
+
+export class TurnNavigationSettingsUpdate implements Action {
+ readonly settings: TNSettingsState
+
+ constructor(settings: TNSettingsState) {
+ this.settings = settings
+ }
+}
+
+export class TurnNavigationReroutingFailed implements Action {}
+export class TurnNavigationReroutingTimeResetForTest implements Action {}
+export class TurnNavigationRerouting implements Action {
+ readonly path: Path
+
+ constructor(path: Path) {
+ this.path = path
+ }
+}
+
export class SetPoint implements Action {
readonly point: QueryPoint
readonly zoomResponse: boolean
@@ -157,9 +202,11 @@ export class DismissLastError implements Action {}
export class SelectMapLayer implements Action {
readonly layer: string
+ readonly forNavigation: boolean
- constructor(layer: string) {
+ constructor(layer: string, forNavigation: boolean = false) {
this.layer = layer
+ this.forNavigation = forNavigation
}
}
@@ -249,6 +296,9 @@ export class InstructionClicked implements Action {
}
}
+export class ToggleVectorTilesForNavigation implements Action {}
+export class ToggleFullScreenForNavigation implements Action {}
+
export class UpdateSettings implements Action {
readonly updatedSettings: Partial
diff --git a/src/api/Api.ts b/src/api/Api.ts
index 3c79b855..4d5df4e2 100644
--- a/src/api/Api.ts
+++ b/src/api/Api.ts
@@ -301,6 +301,14 @@ export class ApiImpl implements Api {
request['timeout_ms'] = 10000
}
+ if (args.heading) {
+ // for navigation we use heading => we have to disable CH
+ request['ch.disable'] = true
+ request.headings = [args.heading]
+ request.heading_penalty = 120
+ request['timeout_ms'] = 10000
+ }
+
if (
args.points.length <= 2 &&
args.maxAlternativeRoutes > 1 &&
@@ -344,7 +352,7 @@ export class ApiImpl implements Api {
}
}
- private static decodeResult(result: RawResult, is3D: boolean) {
+ public static decodeResult(result: RawResult, is3D: boolean) {
return result.paths
.map((path: RawPath) => {
return {
diff --git a/src/api/graphhopper.d.ts b/src/api/graphhopper.d.ts
index 1c4c6b5f..13bbd950 100644
--- a/src/api/graphhopper.d.ts
+++ b/src/api/graphhopper.d.ts
@@ -7,6 +7,7 @@ export type Bbox = [number, number, number, number]
export interface RoutingArgs {
readonly points: [number, number][]
+ readonly heading?: number
readonly profile: string
readonly maxAlternativeRoutes: number
readonly customModel: CustomModel | null
@@ -20,6 +21,8 @@ export interface RoutingRequest {
points_encoded_multiplier: number
instructions: boolean
elevation: boolean
+ headings?: number[]
+ heading_penalty?: number
'alternative_route.max_paths'?: number
'alternative_route.max_weight_factor'?: number
'ch.disable'?: boolean
@@ -94,16 +97,19 @@ export interface Instruction {
readonly points: number[][]
readonly sign: number
readonly text: string
+ readonly street_name: string
readonly motorway_junction: string
readonly time: number
}
interface Details {
readonly street_name: [number, number, string][]
+ readonly surface: [number, number, string][]
+ readonly road_environment: [number, number, string][]
+ readonly road_class: [number, number, string][]
readonly toll: [number, number, string][]
readonly max_speed: [number, number, number][]
- readonly road_class: [number, number, string][]
- readonly road_environment: [number, number, string][]
+ readonly average_speed: [number, number, number][]
readonly road_access: [number, number, string][]
readonly access_conditional: [number, number, string][]
readonly foot_conditional: [number, number, string][]
diff --git a/src/custom.d.ts b/src/custom.d.ts
index d3374601..12566a33 100644
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -4,6 +4,10 @@ declare module '*.png'
declare module 'heightgraph/src/heightgraph'
declare module 'custom-model-editor/src/index'
+interface Window {
+ ghSaveFile: ({ fileName: string, mimeType: string, fileContents: xmlString }) => Promise
+}
+
declare module 'config' {
interface ProfileGroup {
readonly options: { profile: string }[]
@@ -12,6 +16,7 @@ declare module 'config' {
const routingApi: string
const geocodingApi: string
const defaultTiles: string
+ const navigationTiles: string
const keys: {
graphhopper: string
omniscale: string
diff --git a/src/index.html b/src/index.html
index 17810e2e..64165988 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,18 +3,25 @@
-
+
+
-
+
- GraphHopper Maps | Route Planner
+ GraphHopper Maps | Route Planner and GPS Navigation