merged master

.github/workflows/push_dist_to_npm.yml

@@ -17,7 +17,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: lts/gallium
+          node-version: v20.14.0
 
       - name: Build
 

.github/workflows/test_and_build.yml

@@ -12,7 +12,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: lts/gallium
+          node-version: v20.14.0
 
       - name: Test and Build
         run: |

README.md

@@ -14,7 +14,7 @@ There is [an experimental `navi` branch](https://github.com/graphhopper/graphhop
 ## Start development:
 
  * Clone this repository.
- * Make sure node and npm are installed. We recommend using the gallium LTS (node v16.17.0 & npm v8.15.0).
+ * Make sure node and npm are installed. We recommend using the iron LTS (node v20.14.0 and npm 10.7.0).
  * npm install
  * npm run serve
  * Open your browser at http://0.0.0.0:3000/.

package.json

@@ -21,8 +21,8 @@
         "custom-model-editor": "github:graphhopper/custom-model-editor#3a46b6981d170b7eb70d621bbb92caed149e5a97",
         "geojson": "^0.5.0",
         "heightgraph": "github:easbar/Leaflet.Heightgraph#5f4f0b1fff3646aa071981381f5955c9e6f111f0",
-        "ol": "8.1.0",
-        "ol-mapbox-style": "12.2.1",
+        "ol": "9.2.3",
+        "ol-mapbox-style": "12.3.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-responsive": "^9.0.0"

src/api/Api.ts

@@ -28,7 +28,7 @@ export default interface Api {
 
     routeWithDispatch(args: RoutingArgs, zoom: boolean): void
 
-    geocode(query: string, provider: string): Promise<GeocodingResult>
+    geocode(query: string, provider: string, additionalOptions?: Record<string, string>): Promise<GeocodingResult>
 
     supportsGeocoding(): boolean
 }
@@ -79,7 +79,11 @@ export class ApiImpl implements Api {
         }
     }
 
-    async geocode(query: string, provider: string): Promise<GeocodingResult> {
+    async geocode(
+        query: string,
+        provider: string,
+        additionalOptions?: Record<string, string>
+    ): Promise<GeocodingResult> {
         if (!this.supportsGeocoding())
             return {
                 hits: [],
@@ -96,6 +100,12 @@ export class ApiImpl implements Api {
         url.searchParams.append('osm_tag', '!boundary')
         url.searchParams.append('osm_tag', '!historic')
 
+        if (additionalOptions) {
+            for (const key in additionalOptions) {
+                url.searchParams.append(key, additionalOptions[key])
+            }
+        }
+
         const response = await fetch(url.toString(), {
             headers: { Accept: 'application/json' },
         })
@@ -370,7 +380,13 @@ export class ApiImpl implements Api {
     }
 
     public static isMotorVehicle(profile: string) {
-        return profile.includes('car') || profile.includes('truck') || profile.includes('scooter')
+        return (
+            profile.includes('car') ||
+            profile.includes('truck') ||
+            profile.includes('scooter') ||
+            profile.includes('bus') ||
+            profile.includes('motorcycle')
+        )
     }
 
     public static isTruck(profile: string) {

src/index.tsx

@@ -52,7 +52,7 @@ setApi(config.routingApi, config.geocodingApi, apiKey || '')
 const initialCustomModelStr = url.searchParams.get('custom_model')
 const queryStore = new QueryStore(getApi(), initialCustomModelStr)
 const settingsStore = new SettingsStore()
-const routeStore = new RouteStore(queryStore)
+const routeStore = new RouteStore()
 const speechSynthesizer = new SpeechSynthesizerImpl(navigator.language)
 
 class CoordSysImpl implements MapCoordinateSystem {

src/layers/UseExternalMVTLayer.tsx

@@ -10,6 +10,7 @@ import Dispatcher from '@/stores/Dispatcher'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import * as config from 'config'
+import RenderFeature from 'ol/render/Feature'
 
 export default function useExternalMVTLayer(map: Map, externalMVTLayerEnabled: boolean) {
     useEffect(() => {
@@ -19,7 +20,7 @@ export default function useExternalMVTLayer(map: Map, externalMVTLayerEnabled: b
                 attributions: '',
                 format: new MVT({
                     // without this we won't be able to simply add the features to the selectionSource below, see: https://gis.stackexchange.com/a/407634
-                    featureClass: Feature,
+                    featureClass: RenderFeature,
                 }),
                 url: config.externalMVTLayer ? config.externalMVTLayer.url : '',
                 maxZoom: config.externalMVTLayer ? config.externalMVTLayer.maxZoom : 14,

src/layers/UseQueryPointsLayer.tsx

@@ -3,7 +3,7 @@ import { QueryPoint, QueryPointType } from '@/stores/QueryStore'
 import { useEffect } from 'react'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
-import { Point } from 'ol/geom'
+import { Geometry, Point } from 'ol/geom'
 import { fromLonLat, toLonLat } from 'ol/proj'
 import { Modify } from 'ol/interaction'
 import Dispatcher from '@/stores/Dispatcher'
@@ -35,7 +35,7 @@ function removeQueryPoints(map: Map) {
 }
 
 function addQueryPointsLayer(map: Map, queryPoints: QueryPoint[]) {
-    const features = queryPoints
+    const features: Feature<Geometry>[] = queryPoints
         .map((point, i) => {
             return { index: i, point: point }
         })
@@ -85,10 +85,12 @@ function removeDragInteractions(map: Map) {
         .forEach(i => map.removeInteraction(i))
 }
 
-function addDragInteractions(map: Map, queryPointsLayer: VectorLayer<any>) {
+function addDragInteractions(map: Map, queryPointsLayer: VectorLayer<Feature<Geometry>>) {
+    let tmp = queryPointsLayer.getSource()
+    if (tmp == null) throw new Error('source must not be null') // typescript requires this
     const modify = new Modify({
         hitDetection: queryPointsLayer,
-        source: queryPointsLayer.getSource(),
+        source: tmp,
         style: [],
     })
     modify.on('modifystart', e => {

src/sidebar/RoutingResult.module.css

@@ -173,6 +173,7 @@
 .routeHints .icons {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     column-gap: 8px;
     padding-bottom: 0.5rem;
 }

src/sidebar/RoutingResults.tsx

@@ -475,20 +475,28 @@ function RHButton(p: {
             className={p.selected == p.type ? styles.selectedRouteHintButton : styles.routeHintButton}
             onClick={() => {
                 p.setType(p.type)
-                let tmpDescription
-                if (p.type == 'get_off_bike') tmpDescription = p.description
-                else if (p.type == 'border') tmpDescription = p.description + ': ' + p.values[index]
-                else if (p.values && p.values[index]) {
-                    if (p.type.includes('rating'))
-                        tmpDescription = p.description + ': ' + p.value + ' (' + p.type + ':' + p.values[index] + ')'
-                    else if (p.type.includes('steep')) tmpDescription = p.description + ': ' + p.values[index]
-                    else tmpDescription = p.description + ': ' + p.value + ' ' + p.values[index]
-                } else tmpDescription = p.description + ': ' + p.value
-
-                p.setDescription(tmpDescription)
-                Dispatcher.dispatch(new PathDetailsElevationSelected(p.segments))
-                if (p.segments.length > index) Dispatcher.dispatch(new SetBBox(toBBox(p.segments[index])))
-                setIndex((index + 1) % p.segments.length)
+
+                if (index < 0) {
+                    Dispatcher.dispatch(new PathDetailsElevationSelected([]))
+                    p.setDescription('')
+                } else {
+                    let tmpDescription
+                    if (p.type == 'get_off_bike') tmpDescription = p.description
+                    else if (p.type == 'border') tmpDescription = p.description + ': ' + p.values[index]
+                    else if (p.values && p.values[index]) {
+                        if (p.type.includes('rating'))
+                            tmpDescription =
+                                p.description + ': ' + p.value + ' (' + p.type + ':' + p.values[index] + ')'
+                        else if (p.type.includes('steep')) tmpDescription = p.description + ': ' + p.values[index]
+                        else tmpDescription = p.description + ': ' + p.value + ' ' + p.values[index]
+                    } else tmpDescription = p.description + ': ' + p.value
+
+                    p.setDescription(tmpDescription)
+                    Dispatcher.dispatch(new PathDetailsElevationSelected(p.segments))
+                    if (p.segments.length > index) Dispatcher.dispatch(new SetBBox(toBBox(p.segments[index])))
+                }
+
+                setIndex(index + 1 >= p.segments.length ? -1 : index + 1)
             }}
             title={p.description}
         >

src/sidebar/SettingsBox.tsx

@@ -122,7 +122,7 @@ function SettingsToggle({ title, enabled, onClick }: { title: string; enabled: b
 function SettingsCheckbox({ title, enabled, onClick }: { title: string; enabled: boolean; onClick: () => void }) {
     return (
         <div className={styles.settingsCheckbox} onClick={onClick}>
-            <input type="checkbox" checked={enabled}></input>
+            <input type="checkbox" checked={enabled} onChange={ignore => {}}></input>
             <label style={{ color: enabled ? '#5b616a' : 'gray' }}>{title}</label>
         </div>
     )

src/sidebar/search/AddressInput.tsx

@@ -13,14 +13,15 @@ import Cross from '@/sidebar/times-solid-thin.svg'
 import styles from './AddressInput.module.css'
 import Api, { getApi } from '@/api/Api'
 import { tr } from '@/translation/Translation'
-import { hitToItem, nominatimHitToItem, textToCoordinate } from '@/Converters'
+import { coordinateToText, hitToItem, nominatimHitToItem, textToCoordinate } from '@/Converters'
 import { useMediaQuery } from 'react-responsive'
 import PopUp from '@/sidebar/search/PopUp'
 import PlainButton from '@/PlainButton'
 import { onCurrentLocationSelected } from '@/map/MapComponent'
 
 export interface AddressInputProps {
     point: QueryPoint
+    points: QueryPoint[]
     onCancel: () => void
     onAddressSelected: (queryText: string, coord: Coordinate | undefined, bbox: Bbox | undefined) => void
     onChange: (value: string) => void
@@ -134,6 +135,11 @@ export default function AddressInput(props: AddressInputProps) {
     const containerClass = hasFocus ? styles.fullscreen : ''
     const type = props.point.type
 
+    // get the bias point for the geocoder
+    // (the query point above the current one)
+    const autocompleteIndex = props.points.findIndex(point => !point.isInitialized)
+    const biasCoord = props.points[autocompleteIndex - 1]?.coordinate
+
     return (
         <div className={containerClass}>
             <div
@@ -166,7 +172,7 @@ export default function AddressInput(props: AddressInputProps) {
                     onChange={e => {
                         setText(e.target.value)
                         const coordinate = textToCoordinate(e.target.value)
-                        if (!coordinate) geocoder.request(e.target.value, 'default')
+                        if (!coordinate) geocoder.request(e.target.value, biasCoord, 'default')
                         props.onChange(e.target.value)
                     }}
                     onKeyDown={onKeypress}
@@ -213,7 +219,7 @@ export default function AddressInput(props: AddressInputProps) {
                                 } else if (item instanceof MoreResultsItem) {
                                     // do not hide autocomplete items
                                     const coordinate = textToCoordinate(item.search)
-                                    if (!coordinate) geocoder.request(item.search, 'nominatim')
+                                    if (!coordinate) geocoder.request(item.search, biasCoord, 'nominatim')
                                 }
                                 searchInput.current!.blur()
                             }}
@@ -271,23 +277,26 @@ class Geocoder {
         this.onSuccess = onSuccess
     }
 
-    request(query: string, provider: string) {
-        this.requestAsync(query, provider).then(() => {})
+    request(query: string, bias: Coordinate | undefined, provider: string) {
+        this.requestAsync(query, bias, provider).then(() => {})
     }
 
     cancel() {
         // invalidates last request if there is one
         this.getNextId()
     }
 
-    async requestAsync(query: string, provider: string) {
+    async requestAsync(query: string, bias: Coordinate | undefined, provider: string) {
         const currentId = this.getNextId()
         this.timeout.cancel()
         if (!query || query.length < 2) return
 
         await this.timeout.wait()
         try {
-            const result = await this.api.geocode(query, provider)
+            const options: Record<string, string> = bias
+                ? { point: coordinateToText(bias), location_bias_scale: '0.5', zoom: '9' }
+                : {}
+            const result = await this.api.geocode(query, provider, options)
             const hits = Geocoder.filterDuplicates(result.hits)
             if (currentId === this.requestId) this.onSuccess(query, provider, hits)
         } catch (reason) {

src/sidebar/search/Search.tsx

@@ -173,6 +173,7 @@ const SearchBox = ({
                     dropPreviewIndex={dropPreviewIndex}
                     index={index}
                     point={point}
+                    points={points}
                     onCancel={() => console.log('cancel')}
                     onAddressSelected={(queryText, coordinate) => {
                         const initCount = points.filter(p => p.isInitialized).length

src/sidebar/search/routingProfiles/RoutingProfiles.module.css

@@ -1,7 +1,7 @@
 .profilesParent {
     display: flex;
     flex-direction: row;
-    padding: 0.6em 0 0 0;
+    padding: 0.7em 0 0.1em 0;
 }
 
 .carousel {
@@ -20,6 +20,7 @@
     flex-direction: row;
     justify-content: start;
     overflow: scroll;
+    gap: 0.1rem;
 
     /* Hide scrollbar for IE, Edge and Firefox */
     -ms-overflow-style: none;
@@ -66,16 +67,35 @@
 }
 
 .profileBtn {
+    position: relative;
     border-radius: 50%;
-    margin: 0.1em;
     padding: 0.3em;
-    transform: scale(1.1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.iconContainer {
+    position: relative;
+}
+
+.batchNumber {
+    position: absolute;
+    top: -7.1px;
+    right: -5px;
+    font-size: 0.75em;
+    font-weight: bold;
+    -webkit-text-stroke: 2px #fff;
+    paint-order: stroke fill;
 }
 
 .asIndicator {
     position: absolute;
-    left: -21px;
-    top: -40px;
+    fill: none;
+    stroke: #193b6e;
+    left: -20px;
+    top: -41px;
     z-index: 1;
     scale: 0.1;
 }