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;
+}