diff --git a/components/MapComponent.js b/components/MapComponent.js index 7023f5885..76f01f0e7 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -120,13 +120,32 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }), }).addTo(map); + // Popup beim Überfahren mit der Maus öffnen + marker.on("mouseover", function (e) { + this.openPopup(); + }); + + // Popup schließen, wenn die Maus den Marker verlässt + marker.on("mouseout", function (e) { + this.closePopup(); + }); // Ein Popup mit Informationen zur Station hinzufügen marker .bindPopup(`${station.LD_Name}
${station.Device}`) .openPopup(); - marker.bindTooltip(station.LD_Name, { - permanent: false, - direction: "top", + marker.bindTooltip( + `
${station.LD_Name}
`, + { permanent: false, direction: "top" } + ); + // Zugriff auf das Tooltip-Element und Anwendung von Stilen + marker.on("mouseover", () => { + document.querySelector(".tooltip-content").style.backgroundColor = + "#ffffff"; + document.querySelector(".tooltip-content").style.padding = "0.5rem"; + document.querySelector(".tooltip-content").style.borderRadius = + "0.25rem"; + document.querySelector(".tooltip-content").style.border = + "1px solid #d1d5db"; }); }); } @@ -405,10 +424,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => { marker.bindPopup( `${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}` ); - marker.bindTooltip(location.description, { - permanent: false, - direction: "top", - }); + marker.bindTooltip( + `
${location.description}
`, + { permanent: false, direction: "top" } + ); marker.on("dragend", function (e) { const newLat = e.target.getLatLng().lat; @@ -666,11 +685,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { //Informationen in Tooltips einfügen // Marker hinzufügen für GisStationsStaticDistrict useEffect(() => { - if ( - map && - GisStationsStaticDistrict.length > 0 && - GisStationsStatusDistrict.length > 0 - ) { + if (map && GisStationsStaticDistrict.length > 0) { // Zuerst alte Marker entfernen map.eachLayer((layer) => { if (layer instanceof L.Marker) { @@ -680,12 +695,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Neue Marker für jede Station hinzufügen GisStationsStaticDistrict.forEach((station) => { - // Find corresponding status message - const status = GisStationsStatusDistrict.find( - (status) => status.IdLD === station.IdLD - ); - const message = status ? status.Me : "Keine Statusmeldung verfügbar"; - const marker = L.marker([station.X, station.Y], { icon: L.icon({ iconUrl: getIconPath(station.Icon), @@ -696,15 +705,25 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }), }).addTo(map); - // Ein Popup mit Informationen zur Station und Statusmeldung hinzufügen + // Popup beim Überfahren mit der Maus öffnen + marker.on("mouseover", function (e) { + this.openPopup(); + }); + + // Popup schließen, wenn die Maus den Marker verlässt + marker.on("mouseout", function (e) { + this.closePopup(); + }); + // Ein Popup mit Informationen zur Station hinzufügen marker - .bindPopup( - `${station.LD_Name}
${station.Device}
Status: ${message}` - ) - .bindTooltip(`${station.LD_Name} - ${message}`, { - permanent: false, - direction: "top", - }); + .bindPopup(`${station.LD_Name}
${station.Device}`) + .openPopup(); + + // Diese Zeile entfernt das automatische Tooltip + // marker.bindTooltip(station.LD_Name, { + // permanent: false, + // direction: "top", + // }); }); } }, [map, GisStationsStaticDistrict, GisStationsStatusDistrict]); // Include GisStationsStatusDistrict in dependencies diff --git a/styles/global.css b/styles/global.css index 0e76163a4..d1c492ca3 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,5 +1,9 @@ +/* styles/global.css */ @tailwind base; @tailwind components; @tailwind utilities; -@import 'leaflet/dist/leaflet.css'; +@import "leaflet/dist/leaflet.css"; +.tooltip-tailwind .leaflet-tooltip { + @apply bg-white text-black p-2 border border-gray-300 rounded shadow !important; +}