Added Context menu for building

apps/dispatch/app/(dispatch)/_components/map/ContextMenu.tsx

@@ -5,11 +5,12 @@ import { Popup, useMap } from "react-leaflet";
 
 export const ContextMenu = () => {
 	const map = useMap();
-	const { popup, setSearchElements, setPopup } = useMapStore();
+	const { popup, setSearchElements, setPopup, setSearchPopup } = useMapStore();
 
 	useEffect(() => {
 		map.on("contextmenu", (e) => {
 			setPopup({ isOpen: true, lat: e.latlng.lat, lng: e.latlng.lng });
+			setSearchPopup(undefined);
 		});
 	}, [popup]);
 
@@ -61,8 +62,8 @@ export const ContextMenu = () => {
 							`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(`
 							[out:json];
 							(
-							way["building"](around:50, ${popup.lat}, ${popup.lng});
+							way["building"](around:100, ${popup.lat}, ${popup.lng});
-							relation["building"](around:50, ${popup.lat}, ${popup.lng});
+							relation["building"](around:100, ${popup.lat}, ${popup.lng});
 							);
 							out body;
 							>;
@@ -90,7 +91,6 @@ export const ContextMenu = () => {
 									};
 								}),
 						);
-						console.log(data);
 					}}
 				>
 					<Search size={20} />

apps/dispatch/app/(dispatch)/_components/map/SearchElements.tsx

@@ -1,6 +1,6 @@
 import { useMapStore } from "_store/mapStore";
 import { Marker as LMarker } from "leaflet";
-import { Ref, use, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { Marker, Polygon, Polyline, Popup } from "react-leaflet";
 import L from "leaflet";
 
@@ -8,14 +8,31 @@ export const SearchElements = () => {
 	const { searchElements, searchPopup, setSearchPopup, setPopup } =
 		useMapStore();
 	const poppupRef = useRef<LMarker>(null);
+	const intervalRef = useRef<NodeJS.Timeout>(null);
+	const searchPopupElement = searchElements.find(
+		(element) => element.id === searchPopup?.elementId,
+	);
 
 	useEffect(() => {
-		if (searchPopup?.isOpen) {
+		intervalRef.current = setInterval(() => {
-			poppupRef.current?.openPopup();
+			if (searchPopup?.isOpen) {
-		} else {
+				poppupRef.current?.openPopup();
-			poppupRef.current?.closePopup();
+			} else {
-		}
+				poppupRef.current?.closePopup();
-	}, [searchPopup]);
+			}
+		}, 100);
+		poppupRef.current?.on("popupclose", () => {
+			setSearchPopup(undefined);
+		});
+		return () => {
+			if (poppupRef.current) {
+				poppupRef.current.off("popupclose");
+			}
+			if (intervalRef.current) {
+				clearInterval(intervalRef.current);
+			}
+		};
+	}, [searchPopup, searchPopupElement]);
 
 	const SearchElement = ({
 		element,
@@ -48,11 +65,37 @@ export const SearchElements = () => {
 			/>
 		);
 	};
-	console.log("searchPopup", searchPopup);
+
-	const searchPopupElement = searchElements.find(
+	const SearchElementPopup = ({
-		(element) => element.id === searchPopup?.elementId,
+		element,
-	);
+	}: {
-	console.log("searchPopupElement", searchPopupElement);
+		element: (typeof searchElements)[1];
+	}) => {
+		return (
+			<Popup>
+				<div className="bg-base-100/70 border border-rescuetrack w-[250px] text-white pointer-events-auto p-2">
+					<h3 className="text-lg font-bold">
+						{element.tags?.building === "yes"
+							? "Gebäude"
+							: element.tags?.building}
+					</h3>
+					<p className="">
+						{element.tags?.["addr:street"]} {element.tags?.["addr:housenumber"]}
+					</p>
+					<p className="">
+						{element.tags?.["addr:suburb"]} {element.tags?.["addr:postcode"]}
+					</p>
+					<div className="flex flex-col gap-2 mt-2">
+						<button className="btn bg-rescuetrack-highlight">
+							Zum Einsatz Hinzufügen
+						</button>
+					</div>
+				</div>
+			</Popup>
+		);
+	};
+
+	console.log("searchPopupElement", searchPopupElement, searchPopup);
 	return (
 		<>
 			{searchElements.map((element) => {
@@ -65,11 +108,12 @@ export const SearchElements = () => {
 					icon={new L.DivIcon()}
 					opacity={0}
 				>
-					<Popup>
+					{searchPopupElement && (
-						<div className="absolute z-1000 opacity-100 pointer-events-auto w-[250px] text-white border-rescuetrack border-2 bg-base-100/70">
+						<SearchElementPopup element={searchPopupElement} />
-							<div className="p-1 text-xl text-center">OSM-Element</div>
+					)}
-						</div>
+					{!searchPopupElement && (
-					</Popup>
+						<div className="w-20 border border-rescuetrack"></div>
+					)}
 				</Marker>
 			)}
 		</>

apps/dispatch/app/_store/mapStore.ts

@@ -17,14 +17,13 @@ interface MapStore {
 			lat: number;
 			lon: number;
 		}[];
-		tags: {
+		tags?: {
-			addr: {
+			"addr:country"?: string;
-				city?: string;
+			"addr:city"?: string;
-				housenumber?: string;
+			"addr:housenumber"?: string;
-				postcode?: string;
+			"addr:postcode"?: string;
-				street?: string;
+			"addr:street"?: string;
-				suburb?: string;
+			"addr:suburb"?: string;
-			};
 			building?: string;
 		};
 		type: string;

apps/dispatch/app/globals.css

@@ -11,6 +11,11 @@
 .leaflet-popup-tip-container {
 	display: none;
 }
+
+.leaflet-popup-content p {
+	margin: 0 !important;
+}
+
 .leaflet-popup-content-wrapper {
 	background: transparent !important;
 	pointer-events: none !important;