Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Dynamische Marker-Farben basierend auf API-Daten mit Standardfarbe Grün hinzugefügt

Browse Source 
- SVG-Icons für Marker implementiert und dynamisch eingefärbt basierend auf API-Daten (idLD und Attribute Co).
- Niedrigstes Level bestimmt die Farbe der Marker.
- Standardfarbe Grün (#008013) für Marker ohne ID hinzugefügt.
- Popup-Informationen mit Farbindikatoren und zusätzlichen Geräteinformationen erstellt.
- SVG-Struktur und innere Icons beibehalten, um eine konsistente Darstellung sicherzustellen.
This commit is contained in:
ISA
2024-12-30 10:13:41 +01:00
parent 7ccec2bde4
commit ba3bb1b7d4
1 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
utils/createAndSetDevices.js
View File

@@ -66,7 +66,9 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
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]));
const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, { color: s.Co, level: s.Le }]));
console.log("idLD , Farbe und Level: ", statisMap);
let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).map((station) => {
// Statusdaten für die Station abrufen
@@ -79,20 +81,17 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
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 outerColor = "rgba(255, 0, 0, 0.7)"; // Rot mit 70% Deckkraft
const statisData = statisMap.get(station.IdLD); // Hole Farbe und Level
const outerColor = statisData ? statisData.color : "#008013"; // Dynamische Farbe oder Standard-Grün
const innerColor = "rgba(255, 255, 255, 0.8)"; // Weiß mit 80% Deckkraft
const marker = L.marker([station.X, station.Y], {
icon: L.divIcon({
className: `custom-marker`,
html: `
<div style="
width: 30px;
height: 45px;
position: relative;">
<div >
<!-- SVG direkt eingebettet -->
<svg width="30" height="45" viewBox="0 0 25 41" xmlns="http://www.w3.org/2000/svg">
<svg width="50" height="50" viewBox="0 0 25 41" xmlns="http://www.w3.org/2000/svg">
<!-- Äußere Form -->
<path id="outer" fill="${outerColor}" stroke="#000000" stroke-width="0.3"
d="M 5.0582559,3.8656758 19.50163,3.616274 c 0,0 1.960457,0.6522815 2.770647,1.5827418 0.910212,1.0455689 0.670156,2.3789089 0.670156,2.3789089 l 0.120028,13.2470683 c 0,0 -0.460107,0.911276 -1.250292,1.649889 -0.630147,0.594727 -1.620378,1.055162 -1.620378,1.055162 0,0 -0.500117,0.508395 -4.190979,1.314155 0,0 -0.869675,1.874293 -1.31978,3.457035 -1.020238,3.577955 -2.304224,6.276531 -2.304224,6.276531 0,0 -0.824931,-2.365549 -1.84517,-5.972281 -0.480112,-1.717035 -1.4124335,-3.81884 -1.4124335,-3.81884 0,0 -3.7708809,-0.681058 -3.8609019,-0.748205 0,0 -1.2102827,-0.441249 -1.8804393,-1.170269 -0.7601775,-0.824944 -1.190278,-1.860921 -1.190278,-1.860921 L 2.0575549,7.0407517 C 1.5174288,7.0599367 4.3580923,3.8848605 5.0582559,3.8656758 Z" />
@@ -101,15 +100,14 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
d="m 5.1425811,7.1294233 c -0.5874766,0.6413053 -0.8634128,1.398402 -0.8634128,1.398402 0,0 0.2492327,12.0779207 0.2492327,12.0779207 0,0 0.5162673,0.641304 1.1927556,1.166818 0.5785757,0.445352 1.4686917,0.623491 1.4686917,0.623491 0.979128,0.01781 11.3845877,-0.338466 11.3845877,-0.338466 0,0 0.747696,-0.240489 1.30847,-0.863981 0.45396,-0.498793 0.818907,-0.855074 0.818907,-0.855074 0,0 -0.07122,-11.8641507 -0.07122,-11.7572665 0,0.071256 -0.23143,-0.9797723 -0.863412,-1.6834268 -0.400548,-0.4364441 -1.308466,-0.6502126 -1.308466,-0.6502126 0,0 -12.0699763,0 -12.0699763,0 0,0 -0.7922036,0.3919091 -1.2461636,0.8817952 z" />
</svg>
<!-- Dynamisch eingefügtes Symbol -->
<!-- Inneres Icon -->
<img src="img/icons/marker-icon-${station.Icon}.svg"
style="position: absolute;
top: 6px;
left: 5px;
top: 8px;
left: 15px;
width: 20px;
height: 20px;
filter: hue-rotate(${minLevel * 30}deg) brightness(0) saturate(100%)
drop-shadow(0 0 3px ${color});" />
" />
</div>`,
iconSize: [30, 45],
iconAnchor: [12, 41],