SVG background image and icon from iconify icons router example
This commit is contained in:
ISA
49
public/img/icons/icon-background.svg
Normal file
49
public/img/icons/icon-background.svg
Normal file
@@ -0,0 +1,49 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="8.81834mm" height="14.4621mm"
|
||||
viewBox="0 0 25 41">
|
||||
|
||||
<path id="outer"
|
||||
fill="blue"
|
||||
stroke="black"
|
||||
stroke-width="0.3"
|
||||
d="M 5.06,3.88
|
||||
C 5.06,3.88 19.50,3.62 19.50,3.62
|
||||
19.50,3.62 21.46,4.30 22.27,5.27
|
||||
23.18,6.36 22.94,7.75 22.94,7.75
|
||||
22.94,7.75 23.06,21.56 23.06,21.56
|
||||
23.06,21.56 22.60,22.51 21.81,23.28
|
||||
21.18,23.90 20.19,24.38 20.19,24.38
|
||||
20.19,24.38 19.69,24.91 16.00,25.75
|
||||
16.00,25.75 15.68,26.94 15.23,28.59
|
||||
14.21,32.32 12.56,38.38 12.56,38.38
|
||||
12.56,38.38 11.14,31.76 10.12,28.00
|
||||
9.64,26.21 9.12,25.69 9.12,25.69
|
||||
9.12,25.69 5.35,24.98 5.26,24.91
|
||||
5.26,24.91 4.05,24.45 3.38,23.69
|
||||
2.62,22.83 2.19,21.75 2.19,21.75
|
||||
2.19,21.75 2.06,7.19 2.06,7.19
|
||||
1.52,7.21 4.36,3.90 5.06,3.88 Z" />
|
||||
|
||||
|
||||
<path id="inner"
|
||||
fill="lightgreen"
|
||||
stroke="black"
|
||||
stroke-width="0.3"
|
||||
d="M 4.35,6.43
|
||||
C 3.69,7.15 3.38,8.00 3.38,8.00
|
||||
3.38,8.00 3.66,21.56 3.66,21.56
|
||||
3.66,21.56 4.24,22.28 5.00,22.87
|
||||
5.65,23.37 6.65,23.57 6.65,23.57
|
||||
7.75,23.59 19.44,23.19 19.44,23.19
|
||||
19.44,23.19 20.28,22.92 20.91,22.22
|
||||
21.42,21.66 21.83,21.26 21.83,21.26
|
||||
21.83,21.26 21.75,7.94 21.75,8.06
|
||||
21.75,8.14 21.49,6.96 20.78,6.17
|
||||
20.33,5.68 19.31,5.44 19.31,5.44
|
||||
19.31,5.44 5.75,5.44 5.75,5.44
|
||||
5.75,5.44 4.86,5.88 4.35,6.43 Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
1
public/img/icons/marker-icon-20.svg
Normal file
1
public/img/icons/marker-icon-20.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19v-4q0-.825.588-1.412T5 13h10V9h2v4h2q.825 0 1.413.588T21 15v4q0 .825-.587 1.413T19 21zm2-3q.425 0 .713-.288T8 17t-.288-.712T7 16t-.712.288T6 17t.288.713T7 18m3.5 0q.425 0 .713-.288T11.5 17t-.288-.712T10.5 16t-.712.288T9.5 17t.288.713t.712.287m3.5 0q.425 0 .713-.288T15 17t-.288-.712T14 16t-.712.288T13 17t.288.713T14 18m.25-9.75L12.8 6.8q.65-.6 1.45-.95T16 5.5t1.75.35t1.45.95l-1.45 1.45q-.35-.35-.788-.55T16 7.5t-.963.2t-.787.55m-2.5-2.5l-1.4-1.4q1.1-1.1 2.55-1.725T16 2t3.1.625t2.55 1.725l-1.4 1.4q-.825-.825-1.912-1.287T16 4t-2.337.463T11.75 5.75"/></svg>
|
||||
|
After Width: | Height: | Size: 699 B |
@@ -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,37 +61,55 @@ 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
|
||||
// Farbe für das niedrigste Level bestimmen
|
||||
const color = getColorClass(minLevel); // Farbe anhand des Levels
|
||||
|
||||
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: `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
|
||||
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 - level), // Z-Index nach Priorität
|
||||
zIndexOffset: 100 * (6 - minLevel),
|
||||
});
|
||||
|
||||
// Popup-Info dynamisch erstellen
|
||||
const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
|
||||
.reverse()
|
||||
const statusInfo = statisForStation
|
||||
.map(
|
||||
(status) => `
|
||||
<div class="flex items-center my-1">
|
||||
@@ -91,4 +149,3 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
|
||||
console.error("Fehler beim Abrufen der Daten: ", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user