From dc55b46385c9505529250a00ca2a2de8c9034687 Mon Sep 17 00:00:00 2001 From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com> Date: Tue, 8 Apr 2025 17:53:06 -0700 Subject: [PATCH] Added Context menu for building --- .../_components/map/ContextMenu.tsx | 8 +- .../_components/map/SearchElements.tsx | 78 ++++++++++++++---- apps/dispatch/app/_store/mapStore.ts | 15 ++-- apps/dispatch/app/globals.css | 5 ++ grafana/grafana.db | Bin 1122304 -> 1122304 bytes 5 files changed, 77 insertions(+), 29 deletions(-) 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"]} +

+
+ +
+
+ + ); + }; + + 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 6f86d6716cb0f59a54dc399a81b7c6ccd149d7b2..cf037ba0264d0a3e8de4df9afc4b7784a92cfd50 100644 GIT binary patch delta 98 zcmZoT;L>owWr8&0q=_=ljFTD@S`!#s6PQ{Pm|GKAS`%1X6WCf4*taHdl0hff+yCiv05K;Ja{)0o5c2>rFA(zqG5_{|`T|TJ07fk*LjV8( delta 98 zcmZoT;L>owWr8$g)0g6P sr{B`&kY{C1e-b^p{hvMu5OV@C7Z7s;F%J;)0x=&D^KbvBFTnHx0PsB}*#H0l