added Map objekt polygon

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

@@ -0,0 +1,74 @@
+import { useMapStore } from "_store/mapStore";
+import { Marker as LMarker } from "leaflet";
+import { Ref, use, useEffect, useRef } from "react";
+import { Marker, Polygon, Polyline, Popup } from "react-leaflet";
+import L from "leaflet";
+
+export const SearchElements = () => {
+	const { searchElements, searchPopup, setSearchPopup } = useMapStore();
+	const poppupRef = useRef<LMarker>(null);
+
+	useEffect(() => {
+		if (searchPopup?.isOpen) {
+			poppupRef.current?.openPopup();
+		} else {
+			poppupRef.current?.closePopup();
+		}
+	}, [searchPopup]);
+
+	const SearchElement = ({
+		element,
+	}: {
+		element: (typeof searchElements)[1];
+	}) => {
+		const ref = useRef<any>(null);
+
+		useEffect(() => {
+			if (ref.current) {
+				console.log(ref.current);
+				ref.current.on("click", () => {
+					console.log("click");
+					const center = ref.current.getBounds().getCenter();
+					setSearchPopup({
+						isOpen: true,
+						lat: center.lat,
+						lng: center.lng,
+						elementId: element.id,
+					});
+					console.log(element);
+				});
+			}
+		}, []);
+
+		return (
+			<Polygon
+				key={element.id}
+				positions={element.nodes.map((node) => [node.lat, node.lon])}
+				color="#46b7a3"
+				ref={ref}
+			/>
+		);
+	};
+
+	return (
+		<>
+			{searchElements.map((element) => {
+				return <SearchElement key={element.id} element={element} />;
+			})}
+			{searchPopup && (
+				<Marker
+					position={[searchPopup.lat, searchPopup.lng]}
+					ref={poppupRef}
+					icon={new L.DivIcon()}
+					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>
+					</Popup>
+				</Marker>
+			)}
+		</>
+	);
+};