Hide paths while pressing the "h" key or press a small icon next to the map attribution

Author: ratrun

src/App.tsx

@@ -219,7 +219,10 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
                 <LocationButton queryPoints={query.queryPoints} />
             </div>
             <div className={styles.map}>
-                <MapComponent map={map} />
+                <MapComponent map={map} paths={route.routingResult.paths}
+                                            selectedPath={route.selectedPath}
+                                            queryPoints={query.queryPoints}
+                                            smallScreenRoutingResultVisible={false}/>
             </div>
 
             <div className={styles.pathDetails}>
@@ -243,7 +246,10 @@ function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues
                 />
             </div>
             <div className={styles.smallScreenMap}>
-                <MapComponent map={map} />
+                <MapComponent map={map} paths={route.routingResult.paths}
+                                           selectedPath={route.selectedPath}
+                                           queryPoints={query.queryPoints}
+                                           smallScreenRoutingResultVisible={true}/>
             </div>
             <div className={styles.smallScreenMapOptions}>
                 <div className={styles.onMapRightSide}>

src/layers/UsePathsLayer.tsx

@@ -35,14 +35,14 @@ export default function usePathsLayer(map: Map, paths: Path[], selectedPath: Pat
     }, [map, paths, selectedPath])
 }
 
-function removeCurrentPathLayers(map: Map) {
+export function removeCurrentPathLayers(map: Map) {
     map.getLayers()
         .getArray()
         .filter(l => l.get(pathsLayerKey) || l.get(selectedPathLayerKey) || l.get(accessNetworkLayerKey))
         .forEach(l => map.removeLayer(l))
 }
 
-function addUnselectedPathsLayer(map: Map, paths: Path[]) {
+export function addUnselectedPathsLayer(map: Map, paths: Path[]) {
     const styleArray = [
         new Style({
             stroke: new Stroke({
@@ -118,7 +118,7 @@ function createBezierLineString(start: number[], end: number[]): LineString {
     return new LineString(bezierPoints)
 }
 
-function addAccessNetworkLayer(map: Map, selectedPath: Path, queryPoints: QueryPoint[]) {
+export function addAccessNetworkLayer(map: Map, selectedPath: Path, queryPoints: QueryPoint[]) {
     const style = new Style({
         stroke: new Stroke({
             color: 'rgba(143,183,241,0.9)',
@@ -143,7 +143,7 @@ function addAccessNetworkLayer(map: Map, selectedPath: Path, queryPoints: QueryP
     map.addLayer(layer)
 }
 
-function addSelectedPathsLayer(map: Map, selectedPath: Path) {
+export function addSelectedPathsLayer(map: Map, selectedPath: Path) {
     const styleArray = [
         new Style({
             stroke: new Stroke({

src/map/Map.module.css

@@ -41,3 +41,27 @@
 .customAttribution button {
     display: none;
 }
+
+.topBar {
+    position: absolute;
+    left: 0;
+    bottom: -0.3rem;
+    width: 100%;
+    z-index: 1;
+    padding: 1px 180px;
+}
+
+.hidePathsButton {
+    display: inline-block;
+    background: none;
+    border: none;
+    font-size: 13px;
+    padding: 8px 16px;
+    margin: 0;
+}
+
+@media (max-width: 44rem) {
+    .smallScreenRoutingResultVisible .topBar {
+        bottom: 8.25rem;
+    }
+}

src/map/MapComponent.tsx

@@ -1,24 +1,78 @@
 import 'ol/ol.css'
 import styles from '@/map/Map.module.css'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Map } from 'ol'
 import { Bbox } from '@/api/graphhopper'
 import Dispatcher from '@/stores/Dispatcher'
 import { ErrorAction } from '@/actions/Actions'
 import { tr } from '@/translation/Translation'
 import { Coordinate, getBBoxFromCoord } from '@/utils'
+import { addUnselectedPathsLayer, addSelectedPathsLayer, addAccessNetworkLayer, removeCurrentPathLayers } from '@/layers/UsePathsLayer'
+import { Path } from '@/api/graphhopper'
+import { QueryPoint } from '@/stores/QueryStore'
+import VisibilityOnIcon  from '@/sidebar/visibility_on.svg'
+import VisibilityOffIcon  from '@/sidebar/visibility_off.svg'
 
 type MapComponentProps = {
-    map: Map
+    map: Map,
+    paths: Path[],
+    selectedPath: Path,
+    queryPoints: QueryPoint[]
 }
 
 /** A small react component that simply attaches our map instance to a div to show the map **/
-export default function ({ map }: MapComponentProps) {
+export default function ({
+    map, paths, selectedPath, queryPoints, smallScreenRoutingResultVisible
+}: MapComponentProps & { smallScreenRoutingResultVisible?: boolean }) {
     const mapElement = useRef<HTMLDivElement | null>(null)
     useEffect(() => {
         map.setTarget(mapElement.current!)
     }, [map])
-    return <div ref={mapElement} className={styles.mapContainer} />
+    const [showPaths, setShowPaths] = useState(true)
+    useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+          if (e.key === 'h') setShowPaths(false)
+      }
+      const handleKeyUp = (e: KeyboardEvent) => {
+          if (e.key === 'h') setShowPaths(true)
+      }
+      window.addEventListener('keydown', handleKeyDown)
+      window.addEventListener('keyup', handleKeyUp)
+      return () => {
+          window.removeEventListener('keydown', handleKeyDown)
+          window.removeEventListener('keyup', handleKeyUp)
+      }
+    }, [])
+    useEffect(() => {
+        removeCurrentPathLayers(map)
+        if (showPaths) {
+            addUnselectedPathsLayer(map, paths.filter(p => p != selectedPath))
+            addSelectedPathsLayer(map, selectedPath)
+            addAccessNetworkLayer(map, selectedPath, queryPoints)
+        }
+        return () => {
+            removeCurrentPathLayers(map)
+        }
+    }, [map, paths, selectedPath, showPaths])
+    return (
+        <div
+            ref={mapElement}
+            className={
+                styles.mapContainer +
+                (smallScreenRoutingResultVisible ? ' ' + styles.smallScreenRoutingResultVisible : '')
+            }
+        >
+            <div className={styles.topBar}>
+                <button
+                  className={styles.hidePathsButton}
+                  onClick={() => setShowPaths(v => !v)}
+                  title={showPaths ? tr('hide_route') : tr('show_route')}
+                >
+                  {showPaths ? <VisibilityOffIcon width={20} height={20} /> : <VisibilityOnIcon width={20} height={20} />}
+                </button>
+            </div>
+        </div>
+    )
 }
 
 export function onCurrentLocationSelected(