diff --git a/frontend/src/pages/MapPage/RoadInfo.tsx b/frontend/src/pages/MapPage/RoadInfo.tsx
index e48ff06..a4c988a 100644
--- a/frontend/src/pages/MapPage/RoadInfo.tsx
+++ b/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")}
+
+
{hasFilters && (
diff --git a/frontend/src/pages/MapPage/index.tsx b/frontend/src/pages/MapPage/index.tsx
index af2f638..7b37d7d 100644
--- a/frontend/src/pages/MapPage/index.tsx
+++ b/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 }) {
))}
-
+
diff --git a/frontend/src/translations/de.yaml b/frontend/src/translations/de.yaml
index b73d4e6..7b59764 100644
--- a/frontend/src/translations/de.yaml
+++ b/frontend/src/translations/de.yaml
@@ -175,6 +175,7 @@ MapPage:
roadInfo:
+ closeTooltip: Infobox schließen
unnamedWay: Unbenannter Weg
oneway: Einbahnstraße
direction: Richtung
diff --git a/frontend/src/translations/en.yaml b/frontend/src/translations/en.yaml
index 18c1d4b..6820f51 100644
--- a/frontend/src/translations/en.yaml
+++ b/frontend/src/translations/en.yaml
@@ -179,6 +179,7 @@ MapPage:
after: After
roadInfo:
+ closeTooltip: Close overlay
unnamedWay: Unnamed way
oneway: oneway
direction: Direction