Use OpenLayers instead of Mapbox

package.json

@@ -11,14 +11,17 @@
         "test": "jest"
     },
     "dependencies": {
+        "geojson": "^0.5.0",
         "leaflet.heightgraph": "github:easbar/Leaflet.Heightgraph#82cff7b3013dd73d7221521c5b404ded6439e050",
+        "ol": "^6.9.0",
+        "ol-mapbox-style": "^6.5.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-map-gl": "^5.3.17",
         "react-responsive": "^8.2.0"
     },
     "devDependencies": {
         "@svgr/webpack": "^5.5.0",
+        "@types/geojson": "^7946.0.8",
         "@types/jest": "^26.0.24",
         "@types/react": "^17.0.36",
         "@types/react-dom": "^17.0.11",

src/App.tsx

@@ -8,9 +8,8 @@ import {
     getPathDetailsStore,
     getQueryStore,
     getRouteStore,
-    getViewportStore,
 } from '@/stores/Stores'
-import MapComponent from '@/map/Map'
+import MapComponent from '@/map/MapComponent'
 import { ApiInfo } from '@/api/graphhopper'
 import MapOptions from '@/map/MapOptions'
 import MobileSidebar from '@/sidebar/MobileSidebar'
@@ -23,11 +22,14 @@ import { MapOptionsStoreState } from '@/stores/MapOptionsStore'
 import { ErrorStoreState } from '@/stores/ErrorStore'
 import Search from '@/sidebar/search/Search'
 import ErrorMessage from '@/sidebar/ErrorMessage'
-import { ViewportStoreState } from '@/stores/ViewportStore'
-import createPathDetailsLayer from '@/layers/PathDetailsLayer'
-import createQueryPointsLayer from '@/layers/QueryPointsLayer'
-import createPathsLayer from '@/layers/PathsLayer'
-import { MapLayer } from '@/layers/MapLayer'
+import useBackgroundLayer from '@/layers/UseBackgroundLayer'
+import useQueryPointsLayer from '@/layers/UseQueryPointsLayer'
+import usePathsLayer from '@/layers/UsePathsLayer'
+import ContextMenu from '@/layers/ContextMenu'
+import usePathDetailsLayer from '@/layers/UsePathDetailsLayer'
+import PathDetailPopup from '@/layers/PathDetailPopup'
+import { Map } from 'ol'
+import { getMap } from '@/map/map'
 
 export const POPUP_CONTAINER_ID = 'popup-container'
 export const SIDEBAR_CONTENT_ID = 'sidebar-content'
@@ -39,7 +41,8 @@ export default function App() {
     const [error, setError] = useState(getErrorStore().state)
     const [mapOptions, setMapOptions] = useState(getMapOptionsStore().state)
     const [pathDetails, setPathDetails] = useState(getPathDetailsStore().state)
-    const [viewport, setViewport] = useState(getViewportStore().state)
+
+    const map = getMap()
 
     useEffect(() => {
         const onQueryChanged = () => setQuery(getQueryStore().state)
@@ -48,15 +51,13 @@ export default function App() {
         const onErrorChanged = () => setError(getErrorStore().state)
         const onMapOptionsChanged = () => setMapOptions(getMapOptionsStore().state)
         const onPathDetailsChanged = () => setPathDetails(getPathDetailsStore().state)
-        const onViewportChanged = () => setViewport(getViewportStore().state)
 
         getQueryStore().register(onQueryChanged)
         getApiInfoStore().register(onInfoChanged)
         getRouteStore().register(onRouteChanged)
         getErrorStore().register(onErrorChanged)
         getMapOptionsStore().register(onMapOptionsChanged)
         getPathDetailsStore().register(onPathDetailsChanged)
-        getViewportStore().register(onViewportChanged)
 
         return () => {
             getQueryStore().deregister(onQueryChanged)
@@ -65,26 +66,25 @@ export default function App() {
             getErrorStore().deregister(onErrorChanged)
             getMapOptionsStore().deregister(onMapOptionsChanged)
             getPathDetailsStore().deregister(onPathDetailsChanged)
-            getViewportStore().deregister(onViewportChanged)
         }
     })
 
-    const isSmallScreen = useMediaQuery({ query: '(max-width: 44rem)' })
-
-    const mapLayers: MapLayer[] = [
-        createQueryPointsLayer(query.queryPoints),
-        createPathsLayer(route.selectedPath, route.routingResult.paths),
-    ]
-    if (!isSmallScreen) mapLayers.push(createPathDetailsLayer(pathDetails))
+    // our different map layers
+    useBackgroundLayer(map, mapOptions.selectedStyle)
+    usePathsLayer(map, route.routingResult.paths, route.selectedPath)
+    useQueryPointsLayer(map, query.queryPoints)
+    usePathDetailsLayer(map, pathDetails)
 
+    const isSmallScreen = useMediaQuery({ query: '(max-width: 44rem)' })
     return (
         <div className={styles.appWrapper}>
+            <PathDetailPopup map={map} pathDetails={pathDetails} />
+            <ContextMenu map={map} route={route} queryPoints={query.queryPoints} />
             {isSmallScreen ? (
                 <SmallScreenLayout
                     query={query}
                     route={route}
-                    viewport={viewport}
-                    mapLayers={mapLayers}
+                    map={map}
                     mapOptions={mapOptions}
                     error={error}
                     info={info}
@@ -93,8 +93,7 @@ export default function App() {
                 <LargeScreenLayout
                     query={query}
                     route={route}
-                    viewport={viewport}
-                    mapLayers={mapLayers}
+                    map={map}
                     mapOptions={mapOptions}
                     error={error}
                     info={info}
@@ -107,14 +106,13 @@ export default function App() {
 interface LayoutProps {
     query: QueryStoreState
     route: RouteStoreState
-    viewport: ViewportStoreState
-    mapLayers: MapLayer[]
+    map: Map
     mapOptions: MapOptionsStoreState
     error: ErrorStoreState
     info: ApiInfo
 }
 
-function LargeScreenLayout({ query, route, viewport, mapLayers, error, mapOptions, info }: LayoutProps) {
+function LargeScreenLayout({ query, route, map, error, mapOptions, info }: LayoutProps) {
     return (
         <>
             <div className={styles.sidebar}>
@@ -140,13 +138,7 @@ function LargeScreenLayout({ query, route, viewport, mapLayers, error, mapOption
             </div>
             <div className={styles.popupContainer} id={POPUP_CONTAINER_ID} />
             <div className={styles.map}>
-                <MapComponent
-                    viewport={viewport}
-                    styleOption={mapOptions.selectedStyle}
-                    queryPoints={query.queryPoints}
-                    route={route}
-                    mapLayers={mapLayers}
-                />
+                <MapComponent map={map} />
             </div>
             <div className={styles.mapOptions}>
                 <MapOptions {...mapOptions} />
@@ -159,20 +151,14 @@ function LargeScreenLayout({ query, route, viewport, mapLayers, error, mapOption
     )
 }
 
-function SmallScreenLayout({ query, route, viewport, mapLayers, error, mapOptions, info }: LayoutProps) {
+function SmallScreenLayout({ query, route, map, error, mapOptions, info }: LayoutProps) {
     return (
         <>
             <div className={styles.smallScreenSidebar}>
                 <MobileSidebar info={info} query={query} route={route} error={error} />
             </div>
             <div className={styles.smallScreenMap}>
-                <MapComponent
-                    viewport={viewport}
-                    queryPoints={query.queryPoints}
-                    styleOption={mapOptions.selectedStyle}
-                    route={route}
-                    mapLayers={mapLayers}
-                />
+                <MapComponent map={map} />
             </div>
             <div className={styles.smallScreenMapOptions}>
                 <div className={styles.smallScreenMapOptionsContent}>

src/actions/Actions.ts

@@ -3,7 +3,6 @@ import { Coordinate, QueryPoint } from '@/stores/QueryStore'
 import { ApiInfo, Bbox, Path, RoutingArgs, RoutingProfile, RoutingResult } from '@/api/graphhopper'
 import { StyleOption } from '@/stores/MapOptionsStore'
 import { PathDetailsPoint } from '@/stores/PathDetailsStore'
-import { ViewportStoreState } from '@/stores/ViewportStore'
 
 export class InfoReceived implements Action {
     readonly result: ApiInfo
@@ -108,11 +107,13 @@ export class SelectMapStyle implements Action {
 
 export class MapIsLoaded implements Action {}
 
-export class SetViewport implements Action {
-    readonly viewport: ViewportStoreState
+export class ZoomMapToPoint implements Action {
+    readonly coordinate: Coordinate
+    readonly zoom: number
 
-    constructor(viewport: ViewportStoreState) {
-        this.viewport = viewport
+    constructor(coordinate: Coordinate, zoom: number) {
+        this.coordinate = coordinate
+        this.zoom = zoom
     }
 }
 
@@ -124,16 +125,6 @@ export class SetInitialBBox implements Action {
     }
 }
 
-export class SetViewportToPoint implements Action {
-    readonly coordinate: Coordinate
-    readonly zoom: number
-
-    constructor(coordinate: Coordinate, zoom: number) {
-        this.coordinate = coordinate
-        this.zoom = zoom
-    }
-}
-
 export class PathDetailsHover implements Action {
     readonly pathDetailsPoint: PathDetailsPoint | null
 

src/index.tsx

@@ -10,7 +10,6 @@ import {
     getPathDetailsStore,
     getQueryStore,
     getRouteStore,
-    getViewportStore,
     setStores,
 } from '@/stores/Stores'
 import Dispatcher from '@/stores/Dispatcher'
@@ -20,10 +19,11 @@ import QueryStore from '@/stores/QueryStore'
 import ErrorStore from '@/stores/ErrorStore'
 import MapOptionsStore from '@/stores/MapOptionsStore'
 import PathDetailsStore from '@/stores/PathDetailsStore'
-import ViewportStore from '@/stores/ViewportStore'
 import NavBar from '@/NavBar'
 import * as config from 'config'
 import { getApi, setApi } from '@/api/Api'
+import MapActionReceiver from '@/stores/MapActionReceiver'
+import { createMap, getMap, setMap } from '@/map/map'
 
 let locale = new URL(window.location.href).searchParams.get('locale')
 setTranslation(locale || navigator.language)
@@ -33,26 +33,29 @@ setApi(config.api, getApiKey())
 const queryStore = new QueryStore(getApi())
 const routeStore = new RouteStore(queryStore)
 
-const smallScreenMediaQuery = window.matchMedia('(max-width: 44rem)')
-
 setStores({
     queryStore: queryStore,
     routeStore: routeStore,
     infoStore: new ApiInfoStore(),
     errorStore: new ErrorStore(),
     mapOptionsStore: new MapOptionsStore(),
     pathDetailsStore: new PathDetailsStore(),
-    viewportStore: new ViewportStore(routeStore, () => smallScreenMediaQuery.matches),
 })
 
+setMap(createMap())
+
 // register stores at dispatcher to receive actions
 Dispatcher.register(getQueryStore())
 Dispatcher.register(getRouteStore())
 Dispatcher.register(getApiInfoStore())
 Dispatcher.register(getErrorStore())
 Dispatcher.register(getMapOptionsStore())
 Dispatcher.register(getPathDetailsStore())
-Dispatcher.register(getViewportStore())
+
+// register map action receiver
+const smallScreenMediaQuery = window.matchMedia('(max-width: 44rem)')
+const mapActionReceiver = new MapActionReceiver(getMap(), routeStore, () => smallScreenMediaQuery.matches)
+Dispatcher.register(mapActionReceiver)
 
 getApi().infoWithDispatch() // get infos about the api as soon as possible
 

src/layers/ContextMenu.module.css

@@ -0,0 +1,37 @@
+/* todo: this is just copy-pasta from https://openlayers.org/en/latest/examples/popup.html, I have no idea what all this means,
+   and the popup looks ugly still, at the very minimum the background color needs to be set though
+   the popup design needs an overhaul anyway... https://github.com/graphhopper/graphhopper-maps/issues/136
+   */
+.popup {
+    position: absolute;
+    background-color: white;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    padding: 15px;
+    border-radius: 10px;
+    border: 1px solid #cccccc;
+    bottom: 12px;
+    left: -50px;
+    min-width: 100px;
+}
+.popup:after,
+.popup:before {
+    top: 100%;
+    border: solid transparent;
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+.popup:after {
+    border-top-color: white;
+    border-width: 10px;
+    left: 48px;
+    margin-left: -10px;
+}
+.popup:before {
+    border-top-color: #cccccc;
+    border-width: 11px;
+    left: 48px;
+    margin-left: -11px;
+}