diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx
index 3c0b35d..110a657 100644
--- a/frontend/src/components/Map/index.tsx
+++ b/frontend/src/components/Map/index.tsx
@@ -78,20 +78,24 @@ function Map({
boundsFromJson,
baseMapStyle,
hasToolbar,
+ onViewportChange,
...props
}: {
- viewportFromUrl?: boolean;
- children: React.ReactNode;
- boundsFromJson: GeoJSON.Geometry;
- baseMapStyle: string;
+ viewportFromUrl?: boolean
+ children: React.ReactNode
+ boundsFromJson: GeoJSON.Geometry
+ baseMapStyle: string
hasToolbar?: boolean;
+ onViewportChange: (viewport: Viewport) => void,
}) {
const [viewportState, setViewportState] = useState(EMPTY_VIEWPORT);
const [viewportUrl, setViewportUrl] = useViewportFromUrl();
- const [viewport, setViewport] = viewportFromUrl
- ? [viewportUrl, setViewportUrl]
- : [viewportState, setViewportState];
+ const [viewport, setViewport_] = viewportFromUrl ? [viewportUrl, setViewportUrl] : [viewportState, setViewportState]
+ const setViewport = useCallback((viewport: Viewport) => {
+ setViewport_(viewport);
+ onViewportChange?.(viewport);
+ }, [setViewport_, onViewportChange])
const config = useConfig();
useEffect(() => {
diff --git a/frontend/src/pages/MapPage/RegionInfo.tsx b/frontend/src/pages/MapPage/RegionInfo.tsx
new file mode 100644
index 0000000..cf29948
--- /dev/null
+++ b/frontend/src/pages/MapPage/RegionInfo.tsx
@@ -0,0 +1,33 @@
+import React, { useState, useCallback } from "react";
+import { createPortal } from "react-dom";
+import _ from "lodash";
+import { List, Header, Icon, Button } from "semantic-ui-react";
+
+import styles from "./styles.module.less";
+
+export default function RegionInfo({ region, mapInfoPortal, onClose }) {
+ const content = (
+ <>
+
+ {region.properties.name || "Unnamed region"}
+
+
+
+
+
+ Number of events
+ {region.properties.overtaking_event_count ?? 0}
+
+
+ >
+ );
+
+ return content && mapInfoPortal
+ ? createPortal(
+ {content}
,
+ mapInfoPortal
+ )
+ : null;
+}
diff --git a/frontend/src/pages/MapPage/RoadInfo.tsx b/frontend/src/pages/MapPage/RoadInfo.tsx
index a4c988a..8020ebc 100644
--- a/frontend/src/pages/MapPage/RoadInfo.tsx
+++ b/frontend/src/pages/MapPage/RoadInfo.tsx
@@ -1,22 +1,12 @@
-import React, { useState, useCallback } from "react";
-import _ from "lodash";
-import {
- Segment,
- Menu,
- Header,
- Label,
- Icon,
- Table,
- Message,
- Button,
-} from "semantic-ui-react";
-import { Layer, Source } from "react-map-gl";
-import { of, from, concat } from "rxjs";
-import { useObservable } from "rxjs-hooks";
-import { switchMap, distinctUntilChanged } from "rxjs/operators";
-import { Chart } from "components";
-import { pairwise } from "utils";
-import { useTranslation } from "react-i18next";
+import React, {useState, useCallback} from 'react'
+import _ from 'lodash'
+import {Segment, Menu, Header, Label, Icon, Table, Message, Button} from 'semantic-ui-react'
+import {Layer, Source} from 'react-map-gl'
+import {of, from, concat} from 'rxjs'
+import {useObservable} from 'rxjs-hooks'
+import {switchMap, distinctUntilChanged} from 'rxjs/operators'
+import {Chart} from 'components'
+import {pairwise} from 'utils'
import type { Location } from "types";
import api from "api";
@@ -224,42 +214,42 @@ export default function RoadInfo({
)}
- {info?.road.zone && (
-