merged master

Author: karussell

.github/workflows/test_and_build.yml

@@ -3,13 +3,13 @@ on: push
 
 jobs:
   test_and_build:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org/
           node-version: v20.14.0

README.md

@@ -4,8 +4,12 @@ A route planner user interface for the [GraphHopper routing engine](https://gith
 
 [Try it out](https://graphhopper.com/maps/)!
 
+We have developed an intuite and simple user interface to find routes:
+
 [![GraphHopper Maps route planner](https://www.graphhopper.com/wp-content/uploads/2023/03/gh-maps-202303.png)](https://graphhopper.com/maps/)
 
+With autocomplete, alternative routes, information along the route and POI search and everything available in all major browsers including mobile browsers. Read more details about it [here](https://www.graphhopper.com/maps-route-planner/).
+
 ## Turn-by-Turn navigation
 
 There is [an experimental `navi` branch](https://github.com/graphhopper/graphhopper-maps/tree/navi) that implements turn-by-turn navigation
@@ -54,3 +58,4 @@ This project uses
  * the [codemirror](https://codemirror.net/) code editor for the custom model editor.
  * many icons from Google's [open source font library](https://fonts.google.com/icons).
  * many more open source projects - see the package.json
+

config.js

@@ -31,7 +31,6 @@ const config = {
             'track_type',
             'country',
         ],
-        snapPreventions: ['ferry'],
     },
 
     // Use 'profiles' to define which profiles are visible and how. Useful if the /info endpoint contains too many or too "ugly" profile

package-lock.json

@@ -15,14 +15,14 @@
         "test": "jest"
     },
     "dependencies": {
-        "custom-model-editor": "github:graphhopper/custom-model-editor#3a46b6981d170b7eb70d621bbb92caed149e5a97",
+        "custom-model-editor": "github:graphhopper/custom-model-editor#5ebd80570329f7abfc95c39624be1f1a379cf392",
         "geojson": "^0.5.0",
         "heightgraph": "github:easbar/Leaflet.Heightgraph#5f4f0b1fff3646aa071981381f5955c9e6f111f0",
-        "ol": "9.2.3",
-        "ol-mapbox-style": "12.3.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-responsive": "^9.0.0"
+        "ol": "10.4.0",
+        "ol-mapbox-style": "12.5.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-responsive": "^10.0.1"
     },
     "devDependencies": {
         "@svgr/webpack": "^8.0.1",
@@ -41,7 +41,7 @@
         "prettier": "2.8.8",
         "source-map-loader": "^4.0.0",
         "style-loader": "^3.3.1",
-        "ts-jest": "^29.0.5",
+        "ts-jest": "^29.1.4",
         "ts-loader": "^9.4.2",
         "typescript": "^5.1.3",
         "webpack": "^5.75.0",

package.json

@@ -7,6 +7,7 @@ import {
     getMapFeatureStore,
     getMapOptionsStore,
     getPathDetailsStore,
+    getPOIsStore,
     getQueryStore,
     getRouteStore,
     getSettingsStore,
@@ -42,7 +43,8 @@ import PlainButton from '@/PlainButton'
 import useAreasLayer from '@/layers/UseAreasLayer'
 import useExternalMVTLayer from '@/layers/UseExternalMVTLayer'
 import LocationButton from '@/map/LocationButton'
-import { SettingsContext } from './contexts/SettingsContext'
+import { SettingsContext } from '@/contexts/SettingsContext'
+import usePOIsLayer from '@/layers/UsePOIsLayer'
 
 export const POPUP_CONTAINER_ID = 'popup-container'
 export const SIDEBAR_CONTENT_ID = 'sidebar-content'
@@ -56,6 +58,7 @@ export default function App() {
     const [mapOptions, setMapOptions] = useState(getMapOptionsStore().state)
     const [pathDetails, setPathDetails] = useState(getPathDetailsStore().state)
     const [mapFeatures, setMapFeatures] = useState(getMapFeatureStore().state)
+    const [pois, setPOIs] = useState(getPOIsStore().state)
 
     const map = getMap()
 
@@ -68,6 +71,7 @@ export default function App() {
         const onMapOptionsChanged = () => setMapOptions(getMapOptionsStore().state)
         const onPathDetailsChanged = () => setPathDetails(getPathDetailsStore().state)
         const onMapFeaturesChanged = () => setMapFeatures(getMapFeatureStore().state)
+        const onPOIsChanged = () => setPOIs(getPOIsStore().state)
 
         getSettingsStore().register(onSettingsChanged)
         getQueryStore().register(onQueryChanged)
@@ -77,6 +81,7 @@ export default function App() {
         getMapOptionsStore().register(onMapOptionsChanged)
         getPathDetailsStore().register(onPathDetailsChanged)
         getMapFeatureStore().register(onMapFeaturesChanged)
+        getPOIsStore().register(onPOIsChanged)
 
         onQueryChanged()
         onInfoChanged()
@@ -85,6 +90,7 @@ export default function App() {
         onMapOptionsChanged()
         onPathDetailsChanged()
         onMapFeaturesChanged()
+        onPOIsChanged()
 
         return () => {
             getSettingsStore().register(onSettingsChanged)
@@ -95,6 +101,7 @@ export default function App() {
             getMapOptionsStore().deregister(onMapOptionsChanged)
             getPathDetailsStore().deregister(onPathDetailsChanged)
             getMapFeatureStore().deregister(onMapFeaturesChanged)
+            getPOIsStore().deregister(onPOIsChanged)
         }
     }, [])
 
@@ -108,11 +115,19 @@ export default function App() {
     usePathsLayer(map, route.routingResult.paths, route.selectedPath, query.queryPoints)
     useQueryPointsLayer(map, query.queryPoints)
     usePathDetailsLayer(map, pathDetails)
+    usePOIsLayer(map, pois)
+
     const isSmallScreen = useMediaQuery({ query: '(max-width: 44rem)' })
     return (
         <SettingsContext.Provider value={settings}>
             <div className={styles.appWrapper}>
-                <MapPopups map={map} pathDetails={pathDetails} mapFeatures={mapFeatures} />
+                <MapPopups
+                    map={map}
+                    pathDetails={pathDetails}
+                    mapFeatures={mapFeatures}
+                    poiState={pois}
+                    query={query}
+                />
                 <ContextMenu map={map} route={route} queryPoints={query.queryPoints} />
                 {isSmallScreen ? (
                     <SmallScreenLayout
@@ -178,7 +193,7 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
                                 drawAreas={drawAreas}
                             />
                         )}
-                        <Search points={query.queryPoints} profile={query.routingProfile} />
+                        <Search points={query.queryPoints} profile={query.routingProfile} map={map} />
                         <div>{!error.isDismissed && <ErrorMessage error={error} />}</div>
                         <RoutingResults
                             info={route.routingResult.info}
@@ -225,6 +240,7 @@ function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues
                     error={error}
                     encodedValues={encodedValues}
                     drawAreas={drawAreas}
+                    map={map}
                 />
             </div>
             <div className={styles.smallScreenMap}>

src/App.tsx

@@ -12,7 +12,10 @@ export function milliSecondsToText(ms: number) {
     return (hourText ? hourText + ' ' : '') + minutes + ' min'
 }
 
-const distanceFormat = new Intl.NumberFormat(navigator.language, { maximumFractionDigits: 1 })
+let distanceFormat: Intl.NumberFormat = new Intl.NumberFormat('en', { maximumFractionDigits: 1 })
+export function setDistanceFormat(_distanceFormat: Intl.NumberFormat) {
+    distanceFormat = _distanceFormat
+}
 
 export function metersToText(meters: number, showDistanceInMiles: boolean, forceSmallUnits: boolean = false) {
     if (showDistanceInMiles) {

src/Converters.ts

@@ -1,18 +1,13 @@
 import { coordinateToText } from '@/Converters'
-import { Bbox } from '@/api/graphhopper'
 import Dispatcher from '@/stores/Dispatcher'
 import { ClearPoints, SelectMapLayer, SetBBox, SetQueryPoints, SetVehicleProfile } from '@/actions/Actions'
 // import the window like this so that it can be mocked during testing
 import { window } from '@/Window'
-import QueryStore, {
-    Coordinate,
-    getBBoxFromCoord,
-    QueryPoint,
-    QueryPointType,
-    QueryStoreState,
-} from '@/stores/QueryStore'
+import QueryStore, { getBBoxFromCoord, QueryPoint, QueryPointType, QueryStoreState } from '@/stores/QueryStore'
 import MapOptionsStore, { MapOptionsStoreState } from './stores/MapOptionsStore'
-import { getApi } from '@/api/Api'
+import { ApiImpl, getApi } from '@/api/Api'
+import { AddressParseResult } from '@/pois/AddressParseResult'
+import { getQueryStore } from '@/stores/Stores'
 
 export default class NavBar {
     private readonly queryStore: QueryStore
@@ -116,6 +111,19 @@ export default class NavBar {
         if (parsedPoints.some(p => !p.isInitialized && p.queryText.length > 0)) {
             const promises = parsedPoints.map(p => {
                 if (p.isInitialized) return Promise.resolve(p)
+                const result = AddressParseResult.parse(p.queryText, false)
+                if (result.hasPOIs() && result.location) {
+                    // two stage POI search: 1. use extracted location to get coordinates 2. do reverse geocoding with this coordinates
+                    return getApi()
+                        .geocode(result.location, 'nominatim')
+                        .then(res => {
+                            if (res.hits.length == 0) return p
+                            getApi()
+                                .reverseGeocode(result.query, res.hits[0].extent)
+                                .then(res => AddressParseResult.handleGeocodingResponse(res, result))
+                            return p
+                        })
+                }
                 return (
                     getApi()
                         .geocode(p.queryText, 'nominatim')
@@ -129,7 +137,7 @@ export default class NavBar {
                             }
                         })
                         // if the geocoding request fails we just keep the point as it is, just as if no results were found
-                        .catch(() => Promise.resolve(p))
+                        .catch(() => p)
                 )
             })
             const points = await Promise.all(promises)
@@ -151,7 +159,7 @@ export default class NavBar {
         const bbox =
             initializedPoints.length == 1
                 ? getBBoxFromCoord(initializedPoints[0].coordinate)
-                : NavBar.getBBoxFromUrlPoints(initializedPoints.map(p => p.coordinate))
+                : ApiImpl.getBBoxPoints(initializedPoints.map(p => p.coordinate))
         if (bbox) Dispatcher.dispatch(new SetBBox(bbox))
         return Dispatcher.dispatch(new SetQueryPoints(points))
     }
@@ -169,18 +177,4 @@ export default class NavBar {
             this.mapStore.state
         ).toString()
     }
-
-    private static getBBoxFromUrlPoints(urlPoints: Coordinate[]): Bbox | null {
-        const bbox: Bbox = urlPoints.reduce(
-            (res: Bbox, c) => [
-                Math.min(res[0], c.lng),
-                Math.min(res[1], c.lat),
-                Math.max(res[2], c.lng),
-                Math.max(res[3], c.lat),
-            ],
-            [180, 90, -180, -90] as Bbox
-        )
-        // return null if the bbox is not valid, e.g. if no url points were given at all
-        return bbox[0] < bbox[2] && bbox[1] < bbox[3] ? bbox : null
-    }
 }

src/NavBar.ts

@@ -2,6 +2,7 @@ import { Action } from '@/stores/Dispatcher'
 import { Coordinate, QueryPoint } from '@/stores/QueryStore'
 import { ApiInfo, Bbox, Path, RoutingArgs, RoutingProfile, RoutingResult } from '@/api/graphhopper'
 import { PathDetailsPoint } from '@/stores/PathDetailsStore'
+import { POI } from '@/stores/POIsStore'
 import { Settings } from '@/stores/SettingsStore'
 
 export class InfoReceived implements Action {
@@ -246,3 +247,19 @@ export class UpdateSettings implements Action {
         this.updatedSettings = updatedSettings
     }
 }
+
+export class SelectPOI implements Action {
+    readonly selected: POI | null
+
+    constructor(selected: POI | null) {
+        this.selected = selected
+    }
+}
+
+export class SetPOIs implements Action {
+    readonly pois: POI[]
+
+    constructor(pois: POI[]) {
+        this.pois = pois
+    }
+}