diff --git a/frontend/src/pages/MapPage.tsx b/frontend/src/pages/MapPage.tsx index e9e30bd..bb8ea0d 100644 --- a/frontend/src/pages/MapPage.tsx +++ b/frontend/src/pages/MapPage.tsx @@ -10,6 +10,7 @@ import {switchMap, distinctUntilChanged} from 'rxjs/operators' import {Page} from 'components' import {useConfig, Config} from 'config' +import api from 'api' import {roadsLayer, basemap} from '../mapstyles' @@ -103,6 +104,10 @@ export function CustomMap({ ) } +const UNITS = {distanceOvertaker: 'm', distanceStationary: 'm', speed: 'm/s'} +const LABELS = {distanceOvertaker: 'Overtaker', distanceStationary: 'Stationary', speed: 'Speed'} +const ZONE_COLORS = {urban: 'olive', rural: 'brown', motorway: 'purple'} + function CurrentRoadInfo({clickLocation}) { const info = useObservable( (_$, inputs$) => @@ -139,43 +144,46 @@ function CurrentRoadInfo({clickLocation}) { 'No road found.' ) : ( <> -
{loading ? '...' : info?.road.name || 'Unnamed way'}
+
{loading ? '...' : info?.road.name || 'Unnamed way'}
- - - Zone + {info?.road.zone && ( + - - Tags - {info?.road.oneway && ( - - )} - + + )} - - Statistics - - - - n - min - q50 - max - mean - - - - {['distanceOvertaker', 'distanceStationary', 'speed'].map(prop => - {prop} - {['count', 'min', 'median', 'max', 'mean'].map(stat => {info?.[prop]?.statistics?.[stat]?.toFixed(3)})} - )} - -
-
-
+ {info?.road.oneway && ( + + )} + + + + + Property + n + min + q50 + max + mean + unit + + + + {['distanceOvertaker', 'distanceStationary', 'speed'].map((prop) => ( + + {LABELS[prop]} + {['count', 'min', 'median', 'max', 'mean'].map((stat) => ( + + {info?.[prop]?.statistics?.[stat]?.toFixed(stat === 'count' ? 0 : 3)} + + ))} + {UNITS[prop]} + + ))} + +
)