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 && ( -