diff --git a/apps/dispatch/app/(dispatch)/_components/map/ContextMenu.tsx b/apps/dispatch/app/(dispatch)/_components/map/ContextMenu.tsx index ee3d9e3a..411795ea 100644 --- a/apps/dispatch/app/(dispatch)/_components/map/ContextMenu.tsx +++ b/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}); - relation["building"](around:50, ${popup.lat}, ${popup.lng}); + way["building"](around:100, ${popup.lat}, ${popup.lng}); + relation["building"](around:100, ${popup.lat}, ${popup.lng}); ); out body; >; @@ -90,7 +91,6 @@ export const ContextMenu = () => { }; }), ); - console.log(data); }} > diff --git a/apps/dispatch/app/(dispatch)/_components/map/SearchElements.tsx b/apps/dispatch/app/(dispatch)/_components/map/SearchElements.tsx index dc2cc159..54145b6c 100644 --- a/apps/dispatch/app/(dispatch)/_components/map/SearchElements.tsx +++ b/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(null); + const intervalRef = useRef(null); + const searchPopupElement = searchElements.find( + (element) => element.id === searchPopup?.elementId, + ); useEffect(() => { - if (searchPopup?.isOpen) { - poppupRef.current?.openPopup(); - } else { - poppupRef.current?.closePopup(); - } - }, [searchPopup]); + intervalRef.current = setInterval(() => { + if (searchPopup?.isOpen) { + poppupRef.current?.openPopup(); + } else { + poppupRef.current?.closePopup(); + } + }, 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( - (element) => element.id === searchPopup?.elementId, - ); - console.log("searchPopupElement", searchPopupElement); + + const SearchElementPopup = ({ + element, + }: { + element: (typeof searchElements)[1]; + }) => { + return ( + + + + {element.tags?.building === "yes" + ? "Gebäude" + : element.tags?.building} + + + {element.tags?.["addr:street"]} {element.tags?.["addr:housenumber"]} + + + {element.tags?.["addr:suburb"]} {element.tags?.["addr:postcode"]} + + + + Zum Einsatz Hinzufügen + + + + + ); + }; + + console.log("searchPopupElement", searchPopupElement, searchPopup); return ( <> {searchElements.map((element) => { @@ -65,11 +108,12 @@ export const SearchElements = () => { icon={new L.DivIcon()} opacity={0} > - - - OSM-Element - - + {searchPopupElement && ( + + )} + {!searchPopupElement && ( + + )} )} > diff --git a/apps/dispatch/app/_store/mapStore.ts b/apps/dispatch/app/_store/mapStore.ts index 3fb1a222..964efb12 100644 --- a/apps/dispatch/app/_store/mapStore.ts +++ b/apps/dispatch/app/_store/mapStore.ts @@ -17,14 +17,13 @@ interface MapStore { lat: number; lon: number; }[]; - tags: { - addr: { - city?: string; - housenumber?: string; - postcode?: string; - street?: string; - suburb?: string; - }; + tags?: { + "addr:country"?: string; + "addr:city"?: string; + "addr:housenumber"?: string; + "addr:postcode"?: string; + "addr:street"?: string; + "addr:suburb"?: string; building?: string; }; type: string; diff --git a/apps/dispatch/app/globals.css b/apps/dispatch/app/globals.css index bb7f5ae0..4178859a 100644 --- a/apps/dispatch/app/globals.css +++ b/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; diff --git a/grafana/grafana.db b/grafana/grafana.db index 6f86d671..cf037ba0 100644 Binary files a/grafana/grafana.db and b/grafana/grafana.db differ
+ {element.tags?.["addr:street"]} {element.tags?.["addr:housenumber"]} +
+ {element.tags?.["addr:suburb"]} {element.tags?.["addr:postcode"]} +