details button on map with 3rd state to hide path (#445)

* show path details button

* now button gets 3 states

* keep dots gray

Author: karussell

src/App.module.css

@@ -72,6 +72,29 @@
     box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
 }
 
+.inclineButton {
+    position: absolute;
+    right: 10px;
+    top: 114px;
+    width: 34px;
+    height: 34px;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.inclineButton svg {
+    width: 100%;
+    height: 100%;
+}
+
+.inclineButtonActive {
+    background-color: #e0f0e4 !important;
+    border: 1px solid #2E7D32 !important;
+}
+
 .pathDetails {
     grid-column: 1 / span 1;
     grid-row: 1 / span 1;

src/App.tsx

@@ -122,35 +122,17 @@ export default function App() {
     useAreasLayer(map, settings.drawAreasEnabled, query.customModelStr, query.customModelEnabled)
     useRoutingGraphLayer(map, mapOptions.routingGraphEnabled)
     useUrbanDensityLayer(map, mapOptions.urbanDensityEnabled)
-    const [showPaths, setShowPaths] = useState(true)
+    type PathDisplayMode = 'normal' | 'incline' | 'hidden'
+    const [pathDisplayMode, setPathDisplayMode] = useState<PathDisplayMode>('normal')
+    const showPaths = pathDisplayMode !== 'hidden'
+    const inclineOnMap = pathDisplayMode === 'incline'
     usePathsLayer(map, route.routingResult.paths, route.selectedPath, query.queryPoints, showPaths)
     useQueryPointsLayer(map, query.queryPoints)
     const [activeDetail, setActiveDetail] = useState<ChartPathDetail | null>(null)
     usePathDetailsLayer(map, pathDetails, activeDetail, showPaths)
     usePOIsLayer(map, pois)
     useCurrentLocationLayer(map, currentLocation)
 
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'h') setShowPaths(false)
-        }
-        const handleKeyUp = (e: KeyboardEvent) => {
-            if (e.key === 'h') setShowPaths(true)
-        }
-
-        const viewport = map.getViewport()
-        if (!viewport) return
-
-        viewport.tabIndex = -1 // Make element focusable but not in tab order
-
-        window.addEventListener('keydown', handleKeyDown)
-        window.addEventListener('keyup', handleKeyUp)
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown)
-            window.removeEventListener('keyup', handleKeyUp)
-        }
-    }, [])
-
     const isSmallScreen = useMediaQuery({ query: '(max-width: 44rem)' })
     return (
         <SettingsContext.Provider value={settings}>
@@ -174,6 +156,8 @@ export default function App() {
                         drawAreas={settings.drawAreasEnabled}
                         currentLocation={currentLocation}
                         onActiveDetailChanged={setActiveDetail}
+                        pathDisplayMode={pathDisplayMode}
+                        onCyclePathDisplay={() => setPathDisplayMode(m => m === 'normal' ? 'incline' : m === 'incline' ? 'hidden' : 'normal')}
                     />
                 ) : (
                     <LargeScreenLayout
@@ -186,13 +170,39 @@ export default function App() {
                         drawAreas={settings.drawAreasEnabled}
                         currentLocation={currentLocation}
                         onActiveDetailChanged={setActiveDetail}
+                        pathDisplayMode={pathDisplayMode}
+                        onCyclePathDisplay={() => setPathDisplayMode(m => m === 'normal' ? 'incline' : m === 'incline' ? 'hidden' : 'normal')}
                     />
                 )}
             </div>
         </SettingsContext.Provider>
     )
 }
 
+function InclineIcon({ mode }: { mode: 'normal' | 'incline' | 'hidden' }) {
+    if (mode === 'incline') return (
+        <svg viewBox="0 0 14 14" fill="none">
+            <polyline points="3,11 5.5,5 8,9 11,3" stroke="#2E7D32" strokeWidth="1.2" fill="none" />
+            <circle cx="3" cy="11" r="1.5" fill="#2E7D32" />
+            <circle cx="11" cy="3" r="1.5" fill="#F44336" />
+        </svg>
+    )
+    if (mode === 'hidden') return (
+        <svg viewBox="0 0 14 14" fill="none">
+            <polyline points="3,11 5.5,5 8,9 11,3" stroke="gray" strokeWidth="1.2" fill="none" opacity="0.3" />
+            <circle cx="3" cy="11" r="1.5" fill="gray" />
+            <circle cx="11" cy="3" r="1.5" fill="gray" />
+        </svg>
+    )
+    return (
+        <svg viewBox="0 0 14 14" fill="none">
+            <polyline points="3,11 5.5,5 8,9 11,3" stroke="gray" strokeWidth="1.2" fill="none" />
+            <circle cx="3" cy="11" r="1.5" fill="gray" />
+            <circle cx="11" cy="3" r="1.5" fill="gray" />
+        </svg>
+    )
+}
+
 interface LayoutProps {
     query: QueryStoreState
     route: RouteStoreState
@@ -203,6 +213,8 @@ interface LayoutProps {
     encodedValues: object[]
     drawAreas: boolean
     onActiveDetailChanged: (detail: ChartPathDetail | null) => void
+    pathDisplayMode: 'normal' | 'incline' | 'hidden'
+    onCyclePathDisplay: () => void
 }
 
 function LargeScreenLayout({
@@ -215,7 +227,10 @@ function LargeScreenLayout({
     drawAreas,
     currentLocation,
     onActiveDetailChanged,
+    pathDisplayMode,
+    onCyclePathDisplay,
 }: LayoutProps) {
+    const inclineOnMap = pathDisplayMode === 'incline'
     const [showSidebar, setShowSidebar] = useState(true)
     const [showCustomModelBox, setShowCustomModelBox] = useState(false)
     const [elevationState, setElevationState] = useState<'compact' | 'expanded' | 'closed'>('closed')
@@ -285,6 +300,15 @@ function LargeScreenLayout({
             <div className={styles.onMapRightSide}>
                 <MapOptions {...mapOptions} />
                 <LocationButton currentLocation={currentLocation} />
+                {hasRoute && (
+                    <div
+                        className={styles.inclineButton + (pathDisplayMode === 'incline' ? ' ' + styles.inclineButtonActive : '')}
+                        onClick={onCyclePathDisplay}
+                        title={pathDisplayMode === 'normal' ? 'Show incline on map' : pathDisplayMode === 'incline' ? 'Hide path' : 'Show path'}
+                    >
+                        <InclineIcon mode={pathDisplayMode} />
+                    </div>
+                )}
             </div>
             <div className={styles.map}>
                 <MapComponent map={map} />
@@ -313,6 +337,7 @@ function LargeScreenLayout({
                     onToggleExpanded={() => setElevationState(s => s === 'expanded' ? 'compact' : 'expanded')}
                     onClose={() => setElevationState('closed')}
                     onActiveDetailChanged={onActiveDetailChanged}
+                    inclineOnMap={inclineOnMap}
                 />
             </div>
         </>
@@ -329,7 +354,10 @@ function SmallScreenLayout({
     drawAreas,
     currentLocation,
     onActiveDetailChanged,
+    pathDisplayMode,
+    onCyclePathDisplay,
 }: LayoutProps) {
+    const inclineOnMap = pathDisplayMode === 'incline'
     const hasPath = route.selectedPath.points.coordinates.length > 0
     const elevationWidget = hasPath ? (
         <ElevationInfoBar
@@ -339,6 +367,7 @@ function SmallScreenLayout({
             isExpanded={false}
             onToggleExpanded={() => {}}
             onActiveDetailChanged={onActiveDetailChanged}
+            inclineOnMap={inclineOnMap}
         />
     ) : undefined
     return (
@@ -360,6 +389,15 @@ function SmallScreenLayout({
                 <div className={styles.onMapRightSide}>
                     <MapOptions {...mapOptions} />
                     <LocationButton currentLocation={currentLocation} />
+                    {hasPath && (
+                        <div
+                            className={styles.inclineButton + (pathDisplayMode === 'incline' ? ' ' + styles.inclineButtonActive : '')}
+                            onClick={onCyclePathDisplay}
+                            title={pathDisplayMode === 'normal' ? 'Show incline on map' : pathDisplayMode === 'incline' ? 'Hide path' : 'Show path'}
+                        >
+                            <InclineIcon mode={pathDisplayMode} />
+                        </div>
+                    )}
                 </div>
             </div>
 

src/map/Map.module.css

@@ -9,7 +9,7 @@
 
 .customZoom {
     right: 17px;
-    top: 115px;
+    top: 165px;
 }
 
 @media (max-width: 44rem) {
@@ -42,3 +42,11 @@
 .customAttribution button {
     display: none;
 }
+
+@media (max-width: 44rem) {
+    .customAttribution {
+        right: auto;
+        left: 0;
+        border-radius: 0 4px 0 0;
+    }
+}

src/pathDetails/ElevationInfoBar.tsx

@@ -16,6 +16,7 @@ interface ElevationInfoBarProps {
     onToggleExpanded: () => void
     onClose?: () => void
     onActiveDetailChanged: (detail: ChartPathDetail | null) => void
+    inclineOnMap: boolean
 }
 
 export default function ElevationInfoBar({
@@ -26,9 +27,9 @@ export default function ElevationInfoBar({
     onToggleExpanded,
     onClose,
     onActiveDetailChanged,
+    inclineOnMap,
 }: ElevationInfoBarProps) {
     const settings = useContext(SettingsContext)
-    const [inclineOnMap, setInclineOnMap] = useState(false)
     const [selectedDropdownDetail, setSelectedDropdownDetail] = useState<ChartPathDetail | null>(null)
 
     const chartData = useMemo(
@@ -79,10 +80,6 @@ export default function ElevationInfoBar({
         setSelectedDropdownDetail(detail)
     }, [])
 
-    const handleToggleIncline = useCallback(() => {
-        setInclineOnMap(prev => !prev)
-    }, [])
-
     return (
         <ElevationWidget
             data={chartData}
@@ -93,8 +90,6 @@ export default function ElevationInfoBar({
             onToggleExpanded={onToggleExpanded}
             onClose={onClose}
             alternativeRouteNumbers={alternativeRouteNumbers}
-            showInclineOnMap={inclineOnMap}
-            onToggleInclineOnMap={handleToggleIncline}
             elevationLabel={tr('elevation')}
         />
     )

src/pathDetails/elevationWidget/ElevationWidget.module.css

@@ -74,29 +74,6 @@
     line-height: 1;
 }
 
-.inclineButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    background: #f8f8f9;
-    cursor: pointer;
-    flex-shrink: 0;
-    padding: 0;
-}
-
-.inclineButton:hover {
-    background: #e8e8e8;
-}
-
-.inclineButtonActive {
-    background: #e0f0e4;
-    border-color: #2E7D32;
-}
-
 .expandButton {
     display: flex;
     align-items: center;

src/pathDetails/elevationWidget/ElevationWidget.tsx

@@ -28,8 +28,6 @@ interface ElevationWidgetProps {
     onToggleExpanded: () => void
     onClose?: () => void
     alternativeRouteNumbers: number[]
-    showInclineOnMap: boolean
-    onToggleInclineOnMap: () => void
     elevationLabel: string
 }
 
@@ -44,8 +42,6 @@ export default function ElevationWidget({
     onToggleExpanded,
     onClose,
     alternativeRouteNumbers,
-    showInclineOnMap,
-    onToggleInclineOnMap,
     elevationLabel,
 }: ElevationWidgetProps) {
     const containerRef = useRef<HTMLDivElement>(null)
@@ -204,19 +200,6 @@ export default function ElevationWidget({
                             }
                         </button>
                     )}
-                    {!selectedDetail && (
-                        <button
-                            className={`${styles.inclineButton}${showInclineOnMap ? ' ' + styles.inclineButtonActive : ''}`}
-                            onClick={onToggleInclineOnMap}
-                            title="Show incline on map"
-                        >
-                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                                <line x1="1" y1="10" x2="5" y2="5" stroke="#2E7D32" strokeWidth="2.5" strokeLinecap="round" />
-                                <line x1="5" y1="5" x2="9" y2="3" stroke="#FF9800" strokeWidth="2.5" />
-                                <line x1="9" y1="3" x2="13" y2="10" stroke="#F44336" strokeWidth="2.5" strokeLinecap="round" />
-                            </svg>
-                        </button>
-                    )}
                     <button
                         className={styles.expandButton}
                         onClick={onToggleExpanded}