added hightlight

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

@@ -5,7 +5,8 @@ import { Marker, Polygon, Polyline, Popup } from "react-leaflet";
 import L from "leaflet";
 
 export const SearchElements = () => {
-	const { searchElements, searchPopup, setSearchPopup } = useMapStore();
+	const { searchElements, searchPopup, setSearchPopup, setPopup } =
+		useMapStore();
 	const poppupRef = useRef<LMarker>(null);
 
 	useEffect(() => {
@@ -25,9 +26,7 @@ export const SearchElements = () => {
 
 		useEffect(() => {
 			if (ref.current) {
-				console.log(ref.current);
 				ref.current.on("click", () => {
-					console.log("click");
 					const center = ref.current.getBounds().getCenter();
 					setSearchPopup({
 						isOpen: true,
@@ -35,7 +34,7 @@ export const SearchElements = () => {
 						lng: center.lng,
 						elementId: element.id,
 					});
-					console.log(element);
+					setPopup(null);
 				});
 			}
 		}, []);
@@ -44,12 +43,16 @@ export const SearchElements = () => {
 			<Polygon
 				key={element.id}
 				positions={element.nodes.map((node) => [node.lat, node.lon])}
-				color="#46b7a3"
+				color={searchPopup?.elementId === element.id ? "#ff4500" : "#46b7a3"}
 				ref={ref}
 			/>
 		);
 	};
-
+	console.log("searchPopup", searchPopup);
+	const searchPopupElement = searchElements.find(
+		(element) => element.id === searchPopup?.elementId,
+	);
+	console.log("searchPopupElement", searchPopupElement);
 	return (
 		<>
 			{searchElements.map((element) => {
@@ -63,8 +66,8 @@ export const SearchElements = () => {
 					opacity={0}
 				>
 					<Popup>
-						<div className="absolute z-1000 opacity-100 pointer-events-auto w-[500px] text-white">
-							<div className="bg-red-600 w-7 h-6">test</div>
+						<div className="absolute z-1000 opacity-100 pointer-events-auto w-[250px] text-white border-rescuetrack border-2 bg-base-100/70">
+							<div className="p-1 text-xl text-center">OSM-Element</div>
 						</div>
 					</Popup>
 				</Marker>

apps/dispatch/app/globals.css

@@ -3,6 +3,11 @@
 	themes: dark, nord;
 }
 
+@theme {
+	--color-rescuetrack: #46b7a3;
+	--color-rescuetrack-highlight: #ff4500;
+}
+
 .leaflet-popup-tip-container {
 	display: none;
 }