static/js/map.js

// GLOBAL VARIABLE TO HOLD THE CURRENT MARKER
    const playerMarkers = {}
    let currentMarker = null
    const client_id = Date.now()
    //const transform = [0.1855, 113.1, 0.1855, 167.8]
    const transform = mapData.transform
    const bounds = mapData.bounds
    const svgBounds = mapData.svgBounds ? mapData.svgBounds : bounds
    const coordinateRotation = mapData.coordinateRotation ? mapData.coordinateRotation : 0
    const svgPath = mapData.svgPath
    const imageUrl = mapData.svgPath
    const minZoom = mapData.minZoom ? mapData.minZoom : 1
    const maxZoom = mapData.maxZoom ? mapData.maxZoom : 6
    const showElevation = false;
    const showStaticMarkers = false
    const wsgroup = "1234"
    let currentZoom = 3;
    //MARK: INIT WEBSOCKET
    // Initialize WebSocket connection
    const ws = new WebSocket(`wss://sebastiankay-eft-group-map-websocket.hf.space/ws`);
    // WebSocket event handlers
    ws.onmessage = function (event) {
      console.log(event.data);
      const data = JSON.parse(event.data);
      switch (data.type) {
        case "coordinates":
          const parsedData = data.data;
          localStorage.setItem("last_marker", JSON.stringify(parsedData));
          loadLocalData();
          break;
        case "location_map":
          const map_name = data.data.map.toLowerCase().replaceAll(" ", "-");
          localStorage.setItem("last_map_name", map_name);
          localStorage.removeItem("last_marker");
          removeAllMarkers(); // Clear all markers when the map changes
          if (!location.pathname.includes(map_name)) {
            location.pathname = `/map/${map_name}`;
          } else {
            location.reload();
          }
          break;
        case "new_rade_data":
          console.log(data.data);
          const radeData = JSON.parse(data.data);
          localStorage.setItem("rade_data", JSON.stringify(radeData));
          loadLocalData();
          break;
      }
    };
    ws.onopen = function (event) {
      ws.send(JSON.stringify({ type: "join", group: wsgroup }));
    };
    // Function to remove all markers
    function removeAllMarkers() {
      for (const playername in playerMarkers) {
        if (playerMarkers.hasOwnProperty(playername)) {
          map.removeLayer(playerMarkers[playername]);
        }
      }
      Object.keys(playerMarkers).forEach(key => delete playerMarkers[key]);
      console.log("Alle Marker wurden entfernt.");
    }
    // Function to load and display local marker data
    function loadLocalData() {
      const map_name = localStorage.getItem("last_map_name");
      if (map_name) {
        if (!location.pathname.includes(map_name)) {
          localStorage.removeItem("last_marker");
        }
      } else {
        localStorage.removeItem("last_marker");
      }
      const markerData = localStorage.getItem("last_marker");
      if (markerData) {
        const parsedData = JSON.parse(markerData);
        // Use the new addMarker function with all required parameters
        addMarker(
          parsedData.x,
          parsedData.y,
          parsedData.z,
          parsedData.timestamp,
          parsedData.preview || false,
          parsedData.actualmap || "Unbekannte Map",
          parsedData.playername || "Unnamed Player",
          parsedData.markercolor || false
        );
      }
    }
    const images = {
      'container_bank-cash-register': 'container_cash-register',
      'container_bank-safe': 'container_safe',
      'container_buried-barrel-cache': 'container_buried-barrel-cache',
      'container_cash-register': 'container_cash-register',
      'container_cash-register-tar2-2': 'container_cash-register',
      'container_dead-civilian': 'container_dead-scav',
      'container_dead-scav': 'container_dead-scav',
      'container_festive-airdrop-supply-crate': 'container_festive-airdrop-supply-crate',
      'container_pmc-body': 'container_dead-scav',
      'container_civilian-body': 'container_dead-scav',
      'container_drawer': 'container_drawer',
      'container_duffle-bag': 'container_duffle-bag',
      'container_grenade-box': 'container_grenade-box',
      'container_ground-cache': 'container_ground-cache',
      'container_jacket': 'container_jacket',
      'container_lab-technician-body': 'container_dead-scav',
      'container_medbag-smu06': 'container_medbag-smu06',
      'container_medcase': 'container_medcase',
      'container_medical-supply-crate': 'container_crate',
      'container_pc-block': 'container_pc-block',
      'container_plastic-suitcase': 'container_plastic-suitcase',
      'container_ration-supply-crate': 'container_crate',
      'container_safe': 'container_safe',
      'container_scav-body': 'container_dead-scav',
      'container_shturmans-stash': 'container_weapon-box',
      'container_technical-supply-crate': 'container_crate',
      'container_toolbox': 'container_toolbox',
      'container_weapon-box': 'container_weapon-box',
      'container_wooden-ammo-box': 'container_wooden-ammo-box',
      'container_wooden-crate': 'container_wooden-crate',
      'extract_pmc': 'extract_pmc',
      'extract_scav': 'extract_scav',
      'extract_shared': 'extract_shared',
      'extract_transit': 'extract_transit',
      'hazard': 'hazard',
      'hazard_mortar': 'hazard_mortar',
      'hazard_minefield': 'hazard',
      'hazard_sniper': 'hazard',
      'key': 'key',
      'lock': 'lock',
      'loose_loot': 'loose_loot',
      'quest_item': 'quest_item',
      'quest_objective': 'quest_objective',
      'spawn_sniper_scav': 'spawn_sniper_scav',
      'spawn_bloodhound': 'spawn_bloodhound',
      'spawn_boss': 'spawn_boss',
      'spawn_cultist-priest': 'spawn_cultist-priest',
      'spawn_pmc': 'spawn_pmc',
      'spawn_rogue': 'spawn_rogue',
      'spawn_scav': 'spawn_scav',
      'stationarygun': 'stationarygun',
      'switch': 'switch',
    };
    const categories = {
      'extract_pmc': 'PMC',
      'extract_shared': 'Shared',
      'extract_scav': 'Scav',
      'extract_transit': 'Transit',
      'spawn_sniper_scav': 'Sniper Scav',
      'spawn_pmc': 'PMC',
      'spawn_scav': 'Scav',
      'spawn_boss': 'Boss',
      'quest_item': 'Item',
      'quest_objective': 'Objective',
      'lock': 'Locks',
      'lever': 'Lever',
      'stationarygun': 'Stationary Gun',
      'switch': 'Switch',
      'place-names': 'Place Names',
    };
    function getCRS(transform) {
      let scaleX = 1;
      let scaleY = 1;
      let marginX = 0;
      let marginY = 0;
      if (transform) {
        scaleX = transform[0];
        scaleY = transform[2] * -1;
        marginX = transform[1];
        marginY = transform[3];
      }
      return L.extend({}, L.CRS.Simple, {
        transformation: new L.Transformation(scaleX, marginX, scaleY, marginY),
        projection: L.extend({}, L.Projection.LonLat, {
          project: latLng => {
            return L.Projection.LonLat.project(applyRotation(latLng, coordinateRotation));
          },
          unproject: point => {
            return applyRotation(L.Projection.LonLat.unproject(point), coordinateRotation * -1);
          },
        }),
      });
    }
    function applyRotation(latLng, rotation) {
      if (!latLng.lng && !latLng.lat) {
        return L.latLng(0, 0);
      }
      if (!rotation) {
        return latLng;
      }
      const angleInRadians = (rotation * Math.PI) / 180;
      const cosAngle = Math.cos(angleInRadians);
      const sinAngle = Math.sin(angleInRadians);
      const { lng: x, lat: y } = latLng;
      const rotatedX = x * cosAngle - y * sinAngle;
      const rotatedY = x * sinAngle + y * cosAngle;
      return L.latLng(rotatedY, rotatedX);
    }
    function pos(position) {
      return [position.z, position.x];
    }
    function addElevation(item, popup) {
      if (!showElevation) {
        return;
      }
      const elevationContent = L.DomUtil.create('div', undefined, popup);
      elevationContent.textContent = `Elevation: ${item.position.y.toFixed(2)}`;
      if (item.top && item.bottom && item.top !== item.position.y && item.bottom !== item.position.y) {
        const heightContent = L.DomUtil.create('div', undefined, popup);
        heightContent.textContent = `Top ${item.top.toFixed(2)}, bottom: ${item.bottom.toFixed(2)}`;
      }
    }
    function markerIsOnLayer(marker, layer) {
      if (!layer) {
        return true;
      }
      var top = marker.options.top || marker.options.position.y;
      var bottom = marker.options.bottom || marker.options.position.y;
      for (const extent of layer.options.extents) {
        if (top >= extent.height[0] && bottom < extent.height[1]) {
          let containedType = 'partial';
          if (bottom >= extent.height[0] && top <= extent.height[1]) {
            containedType = 'full';
          }
          if (extent.bounds) {
            for (const boundsArray of extent.bounds) {
              const bounds = getBounds(boundsArray);
              if (bounds.contains(pos(marker.options.position))) {
                return containedType;
              }
            }
          } else {
            return containedType;
          }
        }
      }
      return false;
    }
    function markerIsOnActiveLayer(marker) {
      if (!marker.options.position) {
        return true;
      }
      const map = marker._map;
      // check if marker is completely contained by inactive layer
      const overlays = map.layerControl._layers.map(l => l.layer).filter(l => Boolean(l.options.extents) && l.options.overlay);
      for (const layer of overlays) {
        for (const extent of layer.options.extents) {
          if (markerIsOnLayer(marker, layer) === 'full' && !map.hasLayer(layer) && extent.bounds) {
            return false;
          }
        }
      }
      // check if marker is on active overlay
      const activeOverlay = Object.values(map._layers).find(l => l.options?.extents && l.options?.overlay);
      if (activeOverlay && markerIsOnLayer(marker, activeOverlay)) {
        return true;
      }
      // check if marker is on base layer
      const baseLayer = Object.values(map._layers).find(l => l.options?.extents && !L.options?.overlay);
      if (!activeOverlay && markerIsOnLayer(marker, baseLayer)) {
        return true;
      }
      return false;
    }
    function checkMarkerForActiveLayers(event) {
      const marker = event.target || event;
      const outline = marker.options.outline;
      const onLevel = markerIsOnActiveLayer(marker);
      if (onLevel) {
        marker._icon?.classList.remove('off-level');
        if (outline) {
          outline._path?.classList.remove('off-level');
        }
      } else {
        marker._icon?.classList.add('off-level');
        if (outline) {
          outline._path?.classList.add('off-level');
        }
      }
    }
    function activateMarkerLayer(event) {
      const marker = event.target || event;
      if (markerIsOnActiveLayer(marker)) {
        return;
      }
      const activeLayers = Object.values(marker._map._layers).filter(l => l.options?.extents && l.options?.overlay);
      for (const layer of activeLayers) {
        layer.removeFrom(marker._map);
      }
      const heightLayers = marker._map.layerControl._layers.filter(l => l.layer.options.extents && l.layer.options.overlay).map(l => l.layer);
      for (const layer of heightLayers) {
        if (markerIsOnLayer(marker, layer)) {
          layer.addTo(marker._map);
          break;
        }
      }
    }
    const getALink = (path, contents) => {
      const a = L.DomUtil.create('a');
      a.setAttribute('href', path);
      a.setAttribute('target', '_blank');
      a.append(contents);
      // a.addEventListener('click', (event) => {
      //     navigate(path);
      //     event.preventDefault();
      // });
      return a;
    };
    function getScaledBounds(bounds, scaleFactor) {
      // Calculate the center point of the bounds
      const centerX = (bounds[0][0] + bounds[1][0]) / 2;
      const centerY = (bounds[0][1] + bounds[1][1]) / 2;
      // Calculate the new width and height
      const width = bounds[1][0] - bounds[0][0];
      const height = bounds[1][1] - bounds[0][1];
      const newWidth = width * scaleFactor;
      const newHeight = height * scaleFactor;
      // Update the coordinates of the two points defining the bounds
      const newBounds = [
        [centerY - newHeight / 2, centerX - newWidth / 2],
        [centerY + newHeight / 2, centerX + newWidth / 2]
      ];
      // console.log("Initial Rectangle:", bounds);
      // console.log("Scaled Rectangle:", newBounds);
      // console.log("Center:", L.bounds(bounds).getCenter(true));
      return newBounds;
    }
    // Erstelle die Karte
    //const map = L.map('map').setView([0, 0], 2);
    const map = L.map('map', {
      maxBounds: getScaledBounds(svgBounds, 1.5),
      //maxBounds: bounds,
      center: [0, 0],
      zoom: 2,
      minZoom: minZoom,
      maxZoom: maxZoom,
      zoomSnap: 0.1,
      scrollWheelZoom: true,
      wheelPxPerZoomLevel: 120,
      crs: getCRS(transform),
      attributionControl: false,
      id: "wwoodsMap",
    });
    const layerControl = L.control.groupedLayers(null, null, {
      position: 'topleft',
      collapsed: true,
      groupCheckboxes: true,
      groupsCollapsable: true,
      exclusiveOptionalGroups: ['Levels'],
    }).addTo(map);
    layerControl.on('overlayToggle', (e) => {
      const layerState = e.detail;
      if (layerState.checked) {
        mapViewRef.current.layer = layerState.key;
      } else {
        mapViewRef.current.layer = undefined;
      }
    });
    layerControl.on('layerToggle', (e) => {
      const layerState = e.detail;
      if (!layerState.checked) {
        mapSettingsRef.current.hiddenLayers.push(layerState.key);
      } else {
        mapViewRef.current.layer = layerState.key;
        mapSettingsRef.current.hiddenLayers = mapSettingsRef.current.hiddenLayers.filter(key => key !== layerState.key);
      }
      updateSavedMapSettings();
    });
    layerControl.on('groupToggle', (e) => {
      const groupState = e.detail;
      for (const groupLayer of layerControl._layers) {
        if (groupLayer.group?.key !== groupState.key) {
          continue;
        }
        if (!groupState.checked) {
          mapSettingsRef.current.hiddenLayers.push(groupLayer.key);
        } else {
          mapSettingsRef.current.hiddenLayers = mapSettingsRef.current.hiddenLayers.filter(key => key !== groupLayer.key);
        }
      }
      if (!groupState.checked) {
        mapSettingsRef.current.hiddenGroups.push(groupState.key);
      } else {
        mapSettingsRef.current.hiddenGroups = mapSettingsRef.current.hiddenGroups.filter(key => key !== groupState.key);
      }
      updateSavedMapSettings();
    });
    layerControl.on('groupCollapseToggle', (e) => {
      const groupState = e.detail;
      if (groupState.collapsed) {
        mapSettingsRef.current.collapsedGroups.push(groupState.key);
      } else {
        mapSettingsRef.current.collapsedGroups = mapSettingsRef.current.collapsedGroups.filter(key => key !== groupState.key);
      }
      updateSavedMapSettings();
    });
    const getLayerOptions = (layerKey, groupKey, layerName) => {
      return {
        groupKey,
        layerKey,
        groupName: groupKey,
        layerName: layerName || categories[layerKey] || layerKey,
        //groupHidden: Boolean(mapSettingsRef.current.hiddenGroups?.includes(groupKey)),
        //layerHidden: Boolean(mapSettingsRef.current.hiddenLayers?.includes(layerKey)),
        image: images[layerKey] ? "/static/maps/interactive/${images[layerKey]}.png" : undefined,
        //groupCollapsed: Boolean(mapSettingsRef.current.collapsedGroups?.includes(groupKey)),
      };
    };
    const addLayer = (layer, layerKey, groupKey, layerName) => {
      layer.key = layerKey;
      const layerOptions = getLayerOptions(layerKey, groupKey, layerName);
      if (!layerOptions.layerHidden) {
        layer.addTo(map);
      }
      layerControl.addOverlay(layer, layerOptions.layerName, layerOptions);
    };
    map.layerControl = layerControl;
    // Hinzufügen des Image-Overlays
    const overlay = L.imageOverlay(imageUrl, getBounds(svgBounds));
    overlay.addTo(map);
    function checkMarkerBounds(position, markerBounds) {
      if (position.x < markerBounds.TL.x) markerBounds.TL.x = position.x;
      if (position.z > markerBounds.TL.z) markerBounds.TL.z = position.z;
      if (position.x > markerBounds.BR.x) markerBounds.BR.x = position.x;
      if (position.z < markerBounds.BR.z) markerBounds.BR.z = position.z;
    }
    function getBounds(bounds) {
      if (!bounds) {
        return undefined;
      }
      return L.latLngBounds([bounds[0][1], bounds[0][0]], [bounds[1][1], bounds[1][0]]);
      //return [[bounds[0][1], bounds[0][0]], [bounds[1][1], bounds[1][0]]];
    }
    function mouseHoverOutline(event) {
      const outline = event.target.options.outline;
      if (event.originalEvent.type === 'mouseover') {
        outline._path.classList.remove('not-shown');
      } else if (!outline._path.classList.contains('force-show')) {
        outline._path.classList.add('not-shown');
      }
    }
    function toggleForceOutline(event) {
      const outline = event.target.options.outline;
      outline._path.classList.toggle('force-show');
      if (outline._path.classList.contains('force-show')) {
        outline._path.classList.remove('not-shown');
      }
      activateMarkerLayer(event);
    }
    function activateMarkerLayer(event) {
      const marker = event.target || event;
      if (markerIsOnActiveLayer(marker)) {
        return;
      }
      const activeLayers = Object.values(marker._map._layers).filter(l => l.options?.extents && l.options?.overlay);
      for (const layer of activeLayers) {
        layer.removeFrom(marker._map);
      }
      const heightLayers = marker._map.layerControl._layers.filter(l => l.layer.options.extents && l.layer.options.overlay).map(l => l.layer);
      for (const layer of heightLayers) {
        if (markerIsOnLayer(marker, layer)) {
          layer.addTo(marker._map);
          break;
        }
      }
    }
    function outlineToPoly(outline) {
      if (!outline) return [];
      return outline.map(vector => [vector.z, vector.x]);
    }
    const layerOptions = {
      maxZoom: maxZoom,
      maxNativeZoom: maxZoom,
      extents: [
        {
          height: [Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER],
          bounds: [bounds],
        }
      ],
      type: 'map-layer',
    };
    let tileLayer = false;
    const baseLayers = [];
    const tileSize = 256;
    let svgLayer = false;
    if (svgPath) {
      const svgBounds2 = svgBounds ? getBounds(svgBounds) : bounds;
      svgLayer = L.imageOverlay(svgPath, svgBounds2, layerOptions);
      baseLayers.push(svgLayer);
    }
    const positionIsInBounds = (position) => {
      return getBounds(bounds).contains(pos(position));
    };
    let markerBounds = {
      'TL': { x: Number.MAX_SAFE_INTEGER, z: Number.MIN_SAFE_INTEGER },
      'BR': { x: Number.MIN_SAFE_INTEGER, z: Number.MAX_SAFE_INTEGER }
    }
    if (mapData.labels?.length > 0) {
      const labelsGroup = L.layerGroup();
      const defaultHeight = ((layerOptions.extents[0].height[1] - layerOptions.extents[0].height[0]) / 2) + layerOptions.extents[0].height[0];
      for (const label of mapData.labels) {
        const fontSize = label.size ? label.size : 100;
        const height = label.position.length < 3 ? defaultHeight : label.position[2];
        const rotation = label.rotation ? label.rotation : 0;
        L.marker(pos({ x: label.position[0], z: label.position[1] }), {
          icon: L.divIcon({ html: `<div class="label" style="font-size: ${fontSize}%; transform: translate3d(-50%, -50%, 0) rotate(${rotation}deg)">${label.text}</div>`, className: 'map-area-label', layers: baseLayers, }),
          interactive: false,
          zIndexOffset: -100000,
          position: {
            x: label.position[0],
            y: height,
            z: label.position[1],
          },
          top: typeof label.top !== 'undefined' ? label.top : 1000,
          bottom: typeof label.bottom !== 'undefined' ? label.bottom : -1000,
        }).addTo(labelsGroup);
      }
      addLayer(labelsGroup, 'place-names', 'Landmarks');
      //labelsGroup.addTo(map);
    }
    // Add spawns
    if (mapData.spawns.length > 0) {
      const spawnLayers = {
        'pmc': L.layerGroup(),
        'scav': L.layerGroup(),
        'sniper_scav': L.layerGroup(),
        'boss': L.layerGroup(),
        'cultist-priest': L.layerGroup(),
        'rogue': L.layerGroup(),
        'bloodhound': L.layerGroup(),
      }
      for (const spawn of mapData.spawns) {
        if (!positionIsInBounds(spawn.position)) {
          continue;
        }
        let spawnType = '';
        let bosses = [];
        if (spawn.categories.includes('boss')) {
          bosses = mapData.bosses.filter(boss => boss.spawnLocations.some(sl => sl.spawnKey === spawn.zoneName));
          if (bosses.length === 0) {
            if (spawn.categories.includes('bot') && spawn.sides.includes('scav')) {
              spawnType = 'scav';
            }
            else {
              console.error(`Unusual spawn: ${spawn.sides}, ${spawn.categories}`);
              continue;
            }
          }
          else if (bosses.length === 1 && (bosses[0].normalizedName === 'bloodhound' || bosses[0].normalizedName === 'cultist-priest' || bosses[0].normalizedName === 'rogue')) {
            spawnType = bosses[0].normalizedName;
          }
          else {
            spawnType = 'boss';
          }
        } else if (spawn.categories.includes('sniper')) {
          spawnType = 'sniper_scav';
        } else if (spawn.sides.includes('scav')) {
          if (spawn.categories.includes('bot') || spawn.categories.includes('all')) {
            spawnType = 'scav';
          }
          else {
            console.error(`Unusual spawn: ${spawn.sides}, ${spawn.categories}`);
            continue;
          }
        }
        else if (spawn.categories.includes('player')) {
          if (spawn.sides.includes('pmc') || spawn.sides.includes('all')) {
            spawnType = 'pmc'
          }
          else {
            console.error(`Unusual spawn: ${spawn.sides}, ${spawn.categories}`);
            continue;
          }
        }
        else {
          console.error(`Unusual spawn: ${spawn.sides}, ${spawn.categories}`);
          continue;
        }
        const spawnIcon = L.icon({
          iconUrl: `/static/maps/interactive/spawn_${spawnType}.png`,
          iconSize: [24, 24],
          popupAnchor: [0, -12],
        });
        if (spawnType === 'pmc') {
          spawnIcon.iconAnchor = [12, 24];
          spawnIcon.popupAnchor = [0, -24];
        }
        const popupContent = L.DomUtil.create('div')
        if (spawn.categories.includes('boss') && bosses.length > 0) {
          bosses = bosses.reduce((unique, current) => {
            if (!unique.some(b => b.normalizedName === current.normalizedName)) {
              unique.push(current)
              if (!categories[`spawn_${current.normalizedName}`]) {
                categories[`spawn_${current.normalizedName}`] = current.name
              }
            }
            return unique;
          }, []);
          const bossList = L.DomUtil.create('div', undefined, popupContent)
          for (const boss of bosses) {
            if (bossList.childNodes.length > 0) {
              const comma = L.DomUtil.create('span', undefined, bossList)
              comma.textContent = ', '
            }
            bossList.append(getALink(`https://escapefromtarkov.fandom.com/wiki/Special:Search?scope=internal&query=${boss.name}`, `${boss.name} (${Math.round(boss.spawnChance * 100)}%)`))
          }
        }
        else {
          const spawnDiv = L.DomUtil.create('div', undefined, popupContent)
          spawnDiv.textContent = categories[`spawn_${spawnType}`]
        }
        addElevation(spawn, popupContent)
        const marker = L.marker(pos(spawn.position), {
          icon: spawnIcon,
          position: spawn.position,
        });
        if (popupContent.childNodes.length > 0) {
          marker.bindPopup(L.popup().setContent(popupContent))
        }
        marker.position = spawn.position
        marker.on('add', checkMarkerForActiveLayers)
        marker.on('click', activateMarkerLayer)
        marker.addTo(spawnLayers[spawnType])
        checkMarkerBounds(spawn.position, markerBounds)
      }
      for (const key in spawnLayers) {
        if (Object.keys(spawnLayers[key]._layers).length > 0) {
          addLayer(spawnLayers[key], `spawn_${key}`, 'Spawns')
        }
      }
    }
    //add extracts
    if (mapData.extracts.length > 0) {
      const extractLayers = {
        pmc: L.layerGroup(),
        scav: L.layerGroup(),
        shared: L.layerGroup(),
      }
      const zIndexOffsets = {
        pmc: 150,
        shared: 125,
        scav: 100,
      };
      for (const extract of mapData.extracts) {
        const faction = extract.faction ?? 'shared';
        if (!positionIsInBounds(extract.position)) {
          //continue;
        }
        const colorMap = {
          scav: '#ff7800',
          pmc: '#00e599',
          shared: '#00e4e5',
        }
        const rect = L.polygon(outlineToPoly(extract.outline), { color: colorMap[faction], weight: 1, className: 'not-shown' });
        const extractIcon = L.divIcon({
          className: 'extract-icon',
          html: `<img src="/static/maps/interactive/extract_${faction}.png"/><span class="extract-name ${faction}">${extract.name}</span>`,
          iconAnchor: [12, 12]
        });
        const extractMarker = L.marker(pos(extract.position), {
          icon: extractIcon,
          title: extract.name,
          zIndexOffset: zIndexOffsets[faction],
          position: extract.position,
          top: extract.top,
          bottom: extract.bottom,
          outline: rect,
          id: extract.id,
        });
        extractMarker.on('mouseover', mouseHoverOutline);
        extractMarker.on('mouseout', mouseHoverOutline);
        extractMarker.on('click', toggleForceOutline);
        if (extract.switches?.length > 0) {
          const popup = L.DomUtil.create('div');
          const textElement = L.DomUtil.create('div');
          textElement.textContent = `${tMaps('Activated by')}:`;
          popup.appendChild(textElement);
          for (const sw of extract.switches) {
            const linkElement = getPoiLinkElement(sw.id, 'switch');
            const nameElement = L.DomUtil.create('span');
            nameElement.innerHTML = `<strong>${sw.name}</strong>`;
            linkElement.append(nameElement);
            popup.appendChild(linkElement);
          }
          addElevation(extract, popup);
          extractMarker.bindPopup(L.popup().setContent(popup));
        } else if (showElevation) {
          const popup = L.DomUtil.create('div');
          addElevation(extract, popup);
          extractMarker.bindPopup(L.popup().setContent(popup));
        }
        extractMarker.on('add', checkMarkerForActiveLayers);
        L.layerGroup([rect, extractMarker]).addTo(extractLayers[faction]);
        checkMarkerBounds(extract.position, markerBounds);
      }
      if (mapData.transits.length > 0) {
        extractLayers.transit = L.layerGroup();
        for (const transit of mapData.transits) {
          if (!positionIsInBounds(transit.position)) {
            //continue;
          }
          const rect = L.polygon(outlineToPoly(transit.outline), { color: '#e53500', weight: 1, className: 'not-shown' });
          const transitIcon = L.divIcon({
            className: 'extract-icon',
            html: `<img src="/static/maps/interactive/extract_transit.png"/><span class="extract-name transit">${transit.description}</span>`,
            iconAnchor: [12, 12]
          });
          const transitMarker = L.marker(pos(transit.position), {
            icon: transitIcon,
            title: transit.description,
            zIndexOffset: zIndexOffsets.pmc,
            position: transit.position,
            top: transit.top,
            bottom: transit.bottom,
            outline: rect,
            id: transit.id,
          });
          transitMarker.on('mouseover', mouseHoverOutline);
          transitMarker.on('mouseout', mouseHoverOutline);
          transitMarker.on('click', toggleForceOutline);
          if (showElevation) {
            const popup = L.DomUtil.create('div');
            addElevation(transit, popup);
            transitMarker.bindPopup(L.popup().setContent(popup));
          }
          transitMarker.on('add', checkMarkerForActiveLayers);
          L.layerGroup([rect, transitMarker]).addTo(extractLayers.transit);
          checkMarkerBounds(transit.position, markerBounds);
        }
      }
      for (const key in extractLayers) {
        if (Object.keys(extractLayers[key]._layers).length > 0) {
          addLayer(extractLayers[key], `extract_${key}`, 'Extracts');
        }
      }
    }
    // Add static items 
    if (showStaticMarkers) {
      for (const category in mapData) {
        const markerLayer = L.layerGroup();
        const items = mapData[category];
        for (const item of items) {
          const itemIcon = L.icon({
            iconUrl: `/static/maps/interactive/${category}.png`,
            iconSize: [24, 24],
            popupAnchor: [0, -12],
            //className: layerIncludesMarker(heightLayer, item) ? '' : 'off-level',
          });
          L.marker(pos(item.position), { icon: itemIcon, position: item.position })
            .bindPopup(L.popup().setContent(`${item.name}<br>Elevation: ${item.position.y}`))
            .addTo(markerLayer);
          checkMarkerBounds(item.position, markerBounds);
        }
        if (items.length > 0) {
          var section;
          if (category.startsWith('extract')) {
            section = 'Extracts';
          }
          else if (category.startsWith('spawn')) {
            section = 'Spawns';
          }
          else {
            section = 'Lootable Items';
          }
          markerLayer.addTo(map);
          addLayer(markerLayer, category, section);
          // layerControl.addOverlay(markerLayer, `<img src='${process.env.PUBLIC_URL}/maps/interactive/${category}.png' class='control-item-image' /> ${categories[category] || category}`, section);
        }
      }
    }
    // Erstelle ein neues Control-Element
    const customControl = L.Control.extend({
      onAdd: function (map) {
        this.container = L.DomUtil.create('div', 'custom-control leaflet-control-layers leaflet-control-layers-expanded')
        this.container.innerHTML = '<h2>Add Marker to Pos: </h2>'
        return this.container
      },
      updateText: function (html) {
        if (this.container) {
          this.container.innerHTML = html
        }
      },
      clearText: function () {
        if (this.container) {
          this.container.innerHTML = ''
        }
      },
      onRemove: function (map) {
        // Nichts zu tun hier
      }
    });
    const myControl = new customControl({ position: 'topright' })
    map.addControl(myControl)
    function startCountdown(elementId) {
      const element = document.getElementById(elementId);
      if (!element) {
        console.error(`Element with id ${elementId} not found.`);
        return;
      }
      //let secondsStart = Math.floor(new Date().getTime() / 1000.0) - parseInt(element.getAttribute('data-rade-end')) - 60
      let secondsStart = parseInt(element.getAttribute('data-seconds')) - 60
      let seconds = secondsStart
      if (isNaN(secondsStart)) {
        console.error('Invalid data-seconds attribute.');
        return;
      }
      const intervalId = setInterval(() => {
        if (!document.hidden) {
          //seconds = (secondsStart - parseInt(Math.floor(new Date().getTime() / 1000.0)))
          //localStorage.setItem('rade_data', JSON.stringify({ remaining_time: seconds }));
          seconds--
          if (seconds <= 0) {
            clearInterval(intervalId);
            element.textContent = '0:00:00';
            myControl.updateText("")
            document.querySelector("head > title").textContent = `${mapData.name} | Map with friends`
            return;
          }
          //seconds--;
          const hours = Math.floor(seconds / 3600);
          const minutes = Math.floor((seconds % 3600) / 60);
          const remainingSeconds = seconds % 60;
          const timeString = `${hours}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
          element.textContent = timeString;
          document.querySelector("head > title").textContent = `${mapData.name} | ${timeString}`
        }
      }, 1000);
    }
    function addNewRadeData(new_html) {
      myControl.updateText(new_html)
      startCountdown("rade_time_remain")
    };
    //MARK: ADDMARKER
    // Funktion zum Hinzufügen eines Markers
    function addMarker(x, y, z, timestamp, preview, actualmap, playername, markercolor) {
      // Validate position
      const position = {
        x: parseFloat(x),
        y: parseFloat(y),
        z: parseFloat(z)
      };
      if (!positionIsInBounds(position)) {
        console.error("Position außerhalb der Karte:", position);
        return;
      }
      // SVG-Icon als String mit dynamischer Farbe
      let markerColor;
      if (markercolor) {
        markerColor = '#' + markercolor;
      } else {
        markerColor = 'currentColor';
      }
      const svgString = `
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 76" class="marker-svg">
                	<path d="M60.8 50.5 38 72.9 15.2 50.5 8.1 3.9 38 13.3l29.8-9.4-7 46.6z" style="stroke-linecap:round;stroke-linejoin:round;fill:#fff;stroke:#fff;stroke-width:4.4px"/><path d="M58.8 49.4 38 69.9 17.1 49.4 10.7 6.9 38 15.5l27.2-8.6-6.4 42.5z" style="fill:${markerColor};stroke:#000;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round"/>
                </svg>
            `;
      const svgString2 = `
                <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' class="marker-svg">
                    <path fill='${markerColor}' d='M172.3 501.7C27 291 0 269.4 0 192 0 86 86 0 192 0s192 86 192 192c0 77.4-27 99-172.3 309.7-9.5 13.8-29.9 13.8-39.5 0zM192 272c44.2 0 80-35.8 80-80s-35.8-80-80-80-80 35.8-80 80 35.8 80 80 80z'/>
                </svg>
            `;
      // DivIcon mit dynamischem SVG erstellen
      const markerIcon = L.divIcon({
        html: svgString,
        className: 'custom-marker',
        iconSize: [32, 32],
        iconAnchor: [16, 32],
        popupAnchor: [0, -32]
      });
      const playerMarkerName = playername.toLowerCase().replaceAll(" ", "-")
      // Remove old marker for this player, if it exists
      if (playerMarkers[playerMarkerName]) {
        map.removeLayer(playerMarkers[playerMarkerName]);
      }
      // Create new marker
      playerMarkers[playerMarkerName] = L.marker(pos(position), {
        icon: markerIcon,
        position: position,
        title: `Koordinaten: ${x}, ${y}, ${z}`,
        riseOnHover: true,
        zIndexOffset: 400
      });
      // Popup mit Informationen erstellen
      const popupContent = `
            <div class="marker-popup">
                ${playername ? `<strong>Player: ${playername}</strong>` : ''}
                <strong>Koordinaten:</strong>
                <span>X: ${x} Y: ${y} Z: ${z}</span>
                ${preview ? `<img class="preview-image" src="${preview}"><br>` : ''}
                <small>${timestamp}</small>
            </div>
        `;
      playerMarkers[playerMarkerName].bindPopup(popupContent, {
        maxWidth: 250,
        minWidth: 150,
        autoClose: true,
        closeOnClick: true
      });
      // Marker zur Karte hinzufügen
      playerMarkers[playerMarkerName].addTo(map);
      // Karte auf Marker zentrieren
      map.setView(pos(position), map.getZoom(), {
        animate: true,
        duration: 0.5
      });
      console.log("Neuer Marker gesetzt für " + playername + ": " + position);
    }
    document.onload = loadLocalData()
    // MODAL Trigger
    document.addEventListener('DOMContentLoaded', () => {
      // Functions to open and close a modal
      function openModal($el) {
        $el.classList.add('is-active');
      }
      function closeModal($el) {
        $el.classList.remove('is-active');
      }
      function closeAllModals() {
        (document.querySelectorAll('.modal') || []).forEach(($modal) => {
          closeModal($modal);
        });
      }
      // Add a click event on buttons to open a specific modal
      (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
        const modal = $trigger.dataset.target;
        const $target = document.getElementById(modal);
        $trigger.addEventListener('click', () => {
          openModal($target);
        });
      });
      // Add a click event on various child elements to close the parent modal
      (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
        const $target = $close.closest('.modal');
        $close.addEventListener('click', () => {
          closeModal($target);
        });
      });
      // Add a keyboard event to close all modals
      document.addEventListener('keydown', (event) => {
        if (event.key === "Escape") {
          closeAllModals();
        }
      });
    });