Add button to close road info overlay (fixes #275)

frontend/src/pages/MapPage/RoadInfo.tsx

@@ -8,6 +8,7 @@ import {
   Icon,
   Table,
   Message,
+  Button,
 } from "semantic-ui-react";
 import { Layer, Source } from "react-map-gl";
 import { of, from, concat } from "rxjs";
@@ -140,9 +141,11 @@ function HistogramChart({ bins, counts, zone }) {
 export default function RoadInfo({
   clickLocation,
   hasFilters,
+  onClose,
 }: {
   clickLocation: Location | null;
   hasFilters: boolean;
+  onClose: () => void;
 }) {
   const { t } = useTranslation();
   const [direction, setDirection] = useState("forwards");
@@ -201,6 +204,15 @@ export default function RoadInfo({
           {loading
             ? "..."
             : info?.road.name || t("MapPage.roadInfo.unnamedWay")}
+
+          <Button
+            style={{ float: "right" }}
+            onClick={onClose}
+            title={t("MapPage.roadInfo.closeTooltip")}
+            size="small"
+            icon="close"
+            basic
+          />
         </Header>
 
         {hasFilters && (

frontend/src/pages/MapPage/index.tsx

@@ -134,6 +134,9 @@ function MapPage({ login }) {
     },
     [setClickLocation]
   );
+  const onCloseRoadInfo = useCallback(() => {
+    setClickLocation(null);
+  }, [setClickLocation]);
 
   const [layerSidebar, setLayerSidebar] = useState(true);
 
@@ -240,7 +243,9 @@ function MapPage({ login }) {
               ))}
             </Source>
 
-            <RoadInfo {...{ clickLocation, hasFilters }} />
+            <RoadInfo
+              {...{ clickLocation, hasFilters, onClose: onCloseRoadInfo }}
+            />
           </Map>
         </div>
       </div>

frontend/src/translations/de.yaml

@@ -175,6 +175,7 @@ MapPage:
 
 
   roadInfo:
+    closeTooltip: Infobox schließen
     unnamedWay: Unbenannter Weg
     oneway: Einbahnstraße
     direction: Richtung

frontend/src/translations/en.yaml

@@ -179,6 +179,7 @@ MapPage:
       after: After
 
   roadInfo:
+    closeTooltip: Close overlay
     unnamedWay: Unnamed way
     oneway: oneway
     direction: Direction