+
{layerSidebar && (
)}
-
- );
+ )
}
-export default connect((state) => ({ login: state.login }))(MapPage);
+export default connect((state) => ({login: state.login}))(MapPage)
diff --git a/frontend/src/pages/MapPage/styles.module.less b/frontend/src/pages/MapPage/styles.module.less
index 9af8b42..a88c095 100644
--- a/frontend/src/pages/MapPage/styles.module.less
+++ b/frontend/src/pages/MapPage/styles.module.less
@@ -24,12 +24,11 @@
}
.mapInfoBox {
- position: absolute;
- right: 16px;
- top: 32px;
- max-height: 100%;
width: 36rem;
overflow: auto;
+ border-left: 1px solid @borderColor;
+ background: white;
+ padding: 16px;
}
.mapToolbar {
@@ -37,3 +36,32 @@
left: 16px;
top: 16px;
}
+
+.closeHeader {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+}
+
+
+@media @mobile {
+ .mapContainer {
+ height: auto;
+ min-height: calc(100vh - @menuHeight);
+ flex-direction: column;
+ }
+
+ .map {
+ height: 60vh;
+ }
+
+ .mapSidebar {
+ width: auto;
+ height: auto;
+ }
+
+ .mapInfoBox {
+ width: auto;
+ height: auto;
+ }
+}
diff --git a/frontend/src/reducers/mapConfig.ts b/frontend/src/reducers/mapConfig.ts
index 2ec5398..56151d3 100644
--- a/frontend/src/reducers/mapConfig.ts
+++ b/frontend/src/reducers/mapConfig.ts
@@ -1,95 +1,92 @@
-import { useMemo } from "react";
-import { useSelector } from "react-redux";
-import produce from "immer";
-import _ from "lodash";
+import {useMemo} from 'react'
+import {useSelector} from 'react-redux'
+import produce from 'immer'
+import _ from 'lodash'
-type BaseMapStyle = "positron" | "bright";
+type BaseMapStyle = 'positron' | 'bright'
type RoadAttribute =
- | "distance_overtaker_mean"
- | "distance_overtaker_min"
- | "distance_overtaker_max"
- | "distance_overtaker_median"
- | "overtaking_event_count"
- | "usage_count"
- | "zone";
+ | 'distance_overtaker_mean'
+ | 'distance_overtaker_min'
+ | 'distance_overtaker_max'
+ | 'distance_overtaker_median'
+ | 'overtaking_event_count'
+ | 'usage_count'
+ | 'zone'
export type MapConfig = {
baseMap: {
- style: BaseMapStyle;
- };
+ style: BaseMapStyle
+ }
obsRoads: {
- show: boolean;
- showUntagged: boolean;
- attribute: RoadAttribute;
- maxCount: number;
- };
+ show: boolean
+ showUntagged: boolean
+ attribute: RoadAttribute
+ maxCount: number
+ }
obsEvents: {
- show: boolean;
- };
+ show: boolean
+ }
+ obsRegions: {
+ show: boolean
+ }
filters: {
- currentUser: boolean;
- dateMode: "none" | "range" | "threshold";
- startDate?: null | string;
- endDate?: null | string;
- thresholdAfter?: null | boolean;
- };
-};
+ currentUser: boolean
+ dateMode: 'none' | 'range' | 'threshold'
+ startDate?: null | string
+ endDate?: null | string
+ thresholdAfter?: null | boolean
+ }
+}
export const initialState: MapConfig = {
baseMap: {
- style: "positron",
+ style: 'positron',
},
obsRoads: {
show: true,
showUntagged: true,
- attribute: "distance_overtaker_median",
+ attribute: 'distance_overtaker_median',
maxCount: 20,
},
obsEvents: {
show: false,
},
+ obsRegions: {
+ show: true,
+ },
filters: {
currentUser: false,
- dateMode: "none",
+ dateMode: 'none',
startDate: null,
endDate: null,
thresholdAfter: true,
},
-};
+}
type MapConfigAction = {
- type: "MAP_CONFIG.SET_FLAG";
- payload: { flag: string; value: any };
-};
+ type: 'MAP_CONFIG.SET_FLAG'
+ payload: {flag: string; value: any}
+}
-export function setMapConfigFlag(
- flag: string,
- value: unknown
-): MapConfigAction {
- return { type: "MAP_CONFIG.SET_FLAG", payload: { flag, value } };
+export function setMapConfigFlag(flag: string, value: unknown): MapConfigAction {
+ return {type: 'MAP_CONFIG.SET_FLAG', payload: {flag, value}}
}
export function useMapConfig() {
- const mapConfig = useSelector((state) => state.mapConfig);
- const result = useMemo(
- () => _.merge({}, initialState, mapConfig),
- [mapConfig]
- );
- return result;
+ const mapConfig = useSelector((state) => state.mapConfig)
+ const result = useMemo(() => _.merge({}, initialState, mapConfig), [mapConfig])
+ return result
}
-export default function mapConfigReducer(
- state: MapConfig = initialState,
- action: MapConfigAction
-) {
+export default function mapConfigReducer(state: MapConfig = initialState, action: MapConfigAction) {
switch (action.type) {
- case "MAP_CONFIG.SET_FLAG":
+ case 'MAP_CONFIG.SET_FLAG':
return produce(state, (draft) => {
- _.set(draft, action.payload.flag, action.payload.value);
- });
+ _.set(draft, action.payload.flag, action.payload.value)
+ })
default:
- return state;
+ return state
}
}