SVG background image and icon from iconify icons router example
This commit is contained in:
ISA
@@ -4,16 +4,56 @@ import "leaflet.smooth_marker_bouncing";
|
||||
import { SERVER_URL } from "../config/urls.js";
|
||||
import * as config from "../config/config.js";
|
||||
|
||||
// Funktion zur Bestimmung der Farbklasse basierend auf der Priorität
|
||||
const getColorClass = (level) => {
|
||||
if (level === 1) return "red";
|
||||
if (level === 2) return "orange";
|
||||
if (level === 3) return "yellow";
|
||||
return "green"; // Standardfarbe
|
||||
// Variable zum Speichern der Prioritätskonfiguration (z.B. Level und Farben)
|
||||
let priorityConfig = [];
|
||||
|
||||
// Funktion zum Abrufen der Prioritätsdaten von der API
|
||||
const fetchPriorityConfig = async () => {
|
||||
try {
|
||||
// Ruft die API auf, um die Prioritätsdaten zu laden
|
||||
const response = await fetch(`${SERVER_URL}:3000/api/prio`);
|
||||
|
||||
// Konvertiert die Antwort in ein JSON-Format
|
||||
const data = await response.json();
|
||||
|
||||
// Gibt die empfangenen Daten in der Konsole aus, um die Struktur zu überprüfen
|
||||
// console.log("Prioritätsdaten: ", data);
|
||||
|
||||
// Speichert die empfangenen Prioritätsdaten in der Variablen priorityConfig
|
||||
priorityConfig = data;
|
||||
} catch (error) {
|
||||
// Gibt einen Fehler in der Konsole aus, falls die API nicht erreichbar ist
|
||||
console.error("Fehler beim Abrufen der Prioritätsdaten: ", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Funktion zur Bestimmung der Farbe basierend auf dem Level
|
||||
const getColorClass = (level) => {
|
||||
// Sucht in priorityConfig nach einem Objekt, dessen level-Wert dem übergebenen Level entspricht
|
||||
const priority = priorityConfig.find((p) => p.level === level);
|
||||
|
||||
// Gibt die Farbe zurück, wenn das Level gefunden wurde, ansonsten die Standardfarbe (#999999)
|
||||
return priority ? priority.color : "#999999"; // Fallback-Farbe, wenn kein Level gefunden wurde
|
||||
};
|
||||
|
||||
// Ruft die Funktion zum Abrufen der Prioritätsdaten auf und wartet, bis sie abgeschlossen ist
|
||||
fetchPriorityConfig().then(() => {
|
||||
// Gibt die geladenen Prioritätsdaten in der Konsole aus, um zu überprüfen, ob die Daten korrekt geladen wurden
|
||||
console.log("Prioritätsdaten wurden geladen:", priorityConfig);
|
||||
|
||||
// Testet die Funktion getColorClass für verschiedene Level und gibt die entsprechenden Farben aus
|
||||
console.log("Farbe für Level 0:", getColorClass(0)); // Farbe für Level 0 anzeigen
|
||||
console.log("Farbe für Level 1:", getColorClass(1)); // Farbe für Level 1 anzeigen
|
||||
console.log("Farbe für Level 2:", getColorClass(2)); // Farbe für Level 2 anzeigen
|
||||
console.log("Farbe für Level 3:", getColorClass(3)); // Farbe für Level 3 anzeigen
|
||||
console.log("Farbe für Level 4:", getColorClass(4)); // Farbe für Level 4 anzeigen
|
||||
console.log("Farbe für Level 100:", getColorClass(100)); // Farbe für Level 100 anzeigen
|
||||
console.log("Farbe für Level 101:", getColorClass(101)); // Farbe für Level 101 anzeigen
|
||||
});
|
||||
|
||||
// Funktion zum Erstellen und Setzen von Markern
|
||||
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
|
||||
// Funktion zum Erstellen und Setzen von Markern
|
||||
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic) => {
|
||||
try {
|
||||
// Lade die statischen Daten
|
||||
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
|
||||
@@ -21,48 +61,66 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
|
||||
|
||||
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
||||
const statusResponse = await response2.json();
|
||||
console.log("statusResponse: ", statusResponse);
|
||||
|
||||
const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));
|
||||
|
||||
if (jsonResponse.Points && statusResponse.Statis) {
|
||||
const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
|
||||
|
||||
let markersData = jsonResponse.Points
|
||||
.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1)
|
||||
.map((station) => {
|
||||
const statis = statisMap.get(station.IdLD);
|
||||
let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => {
|
||||
// Statusdaten für die Station abrufen
|
||||
const statisForStation = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD);
|
||||
|
||||
// Priorität und Farbklasse bestimmen
|
||||
const priorityConfigForStation = priorityConfig.find((p) => p.location_id === station.IdLD);
|
||||
const level = priorityConfigForStation ? priorityConfigForStation.prio_level : 5; // Standardlevel
|
||||
const colorClass = getColorClass(level); // Farbklasse ermitteln
|
||||
// Niedrigstes Level ermitteln
|
||||
const minLevel = Math.min(...statisForStation.map((status) => status.Le));
|
||||
|
||||
// Dynamische CSS-Filter verwenden
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.divIcon({
|
||||
className: `leaflet-marker-icon ${colorClass}`, // Dynamische CSS-Klasse für Filter
|
||||
html: `<img src="img/icons/marker-icon-${station.Icon}.png" style="filter: hue-rotate(${level * 30}deg);" />`, // Dynamischer Filter
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
zIndexOffset: 100 * (6 - level), // Z-Index nach Priorität
|
||||
});
|
||||
// Farbe für das niedrigste Level bestimmen
|
||||
const color = getColorClass(minLevel); // Farbe anhand des Levels
|
||||
|
||||
// Popup-Info dynamisch erstellen
|
||||
const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
|
||||
.reverse()
|
||||
.map(
|
||||
(status) => `
|
||||
console.log(`Station: ${station.LD_Name}, Min Level: ${minLevel}, Color: ${color}`);
|
||||
|
||||
// **CSS-Filter für dynamische Einfärbung des Icons**
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.divIcon({
|
||||
className: `custom-marker`,
|
||||
html: `
|
||||
<div style="
|
||||
width: 25px;
|
||||
height: 41px;
|
||||
background-image: url('img/icons/icon-background.svg'); /* SVG als Hintergrund */
|
||||
background-size: cover; /* Passt SVG an Größe an */
|
||||
position: relative;">
|
||||
<img src="img/icons/marker-icon-${station.Icon}.svg"
|
||||
style="position: absolute;
|
||||
top: 4px; /* Höher verschieben (weniger Pixel) */
|
||||
left: 4px; /* Weiter nach links verschieben */
|
||||
width: 17px; /* Optional anpassen für zentrierte Größe */
|
||||
height: 17px;
|
||||
filter: hue-rotate(${minLevel * 30}deg) brightness(0) saturate(100%)
|
||||
drop-shadow(0 0 3px ${color});"
|
||||
class="marker-icon-${minLevel}" />
|
||||
</div>`,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
zIndexOffset: 100 * (6 - minLevel),
|
||||
});
|
||||
|
||||
// Popup-Info dynamisch erstellen
|
||||
const statusInfo = statisForStation
|
||||
.map(
|
||||
(status) => `
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
||||
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
)
|
||||
.join("");
|
||||
|
||||
marker.bindPopup(`
|
||||
marker.bindPopup(`
|
||||
<div class="bg-white rounded-lg">
|
||||
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
|
||||
<span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
|
||||
@@ -72,23 +130,22 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
|
||||
</div>
|
||||
`);
|
||||
|
||||
// **Mouseover zeigt Popup**
|
||||
marker.on("mouseover", function () {
|
||||
this.openPopup();
|
||||
});
|
||||
|
||||
// **Mouseout schließt Popup**
|
||||
marker.on("mouseout", function () {
|
||||
this.closePopup();
|
||||
});
|
||||
|
||||
return marker;
|
||||
// **Mouseover zeigt Popup**
|
||||
marker.on("mouseover", function () {
|
||||
this.openPopup();
|
||||
});
|
||||
|
||||
// **Mouseout schließt Popup**
|
||||
marker.on("mouseout", function () {
|
||||
this.closePopup();
|
||||
});
|
||||
|
||||
return marker;
|
||||
});
|
||||
|
||||
setMarkersFunction(markersData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der Daten: ", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user