Spaces:

Sebastiankay
/

eft_group_map_websocket

Sleeping

App Files Files Community

Sebastiankay commited on Aug 15, 2025

Commit

18ffcdd

verified ·

1 Parent(s): 9d38b87

Update templates/map.html

Browse files

Files changed (1) hide show

templates/map.html +121 -210

templates/map.html CHANGED Viewed

@@ -12,43 +12,43 @@
   <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.css"/-->
   <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css" />
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="/static/style.css" />
 </head>
-<body>
-  <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
-  <div class="container-fluid">
-    <a class="navbar-brand" href="#">Tarkov Map</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNavDropdown">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="#">Home</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            Maps
-          </a>
-          <ul class="dropdown-menu">
-            <li><a href="/map/woods" class="dropdown-item">Woods</a></li>
-            <li><a href="/map/shoreline" class="dropdown-item">Shoreline</a></li>
-            <li><a href="/map/lighthouse" class="dropdown-item">Lighthouse</a></li>
-            <li><a href="/map/customs" class="dropdown-item">Customs</a></li>
-            <li><a href="/map/interchange" class="dropdown-item">Interchange</a></li>
-            <li><a href="/map/streets-of-tarkov" class="dropdown-item">Streets of Tarkov</a></li>
-            <li><a href="/map/ground-zero" class="dropdown-item">Ground Zero</a></li>
-            <li><a href="/map/reserve" class="dropdown-item">Reserve</a></li>
-            <li><a href="/map/factory" class="dropdown-item">Factory</a></li>
-          </ul>
-        </li>
-      </ul>
     </div>
-  </div>
-</nav>
   <!--nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       Tarkov Map
@@ -141,84 +141,84 @@
     let currentZoom = 3;
     // 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 = {
@@ -1030,97 +1030,11 @@
       startCountdown("rade_time_remain")
     };
     // 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);
-    }
-    function addMarker_OLD(x, y, z, timestamp, preview = false, actualmap = false, playername = false, markercolor = false) {
-      // Position validieren
       const position = {
         x: parseFloat(x),
         y: parseFloat(y),
@@ -1133,9 +1047,7 @@
       }
       // SVG-Icon als String mit dynamischer Farbe
       let markerColor;
       if (markercolor) {
         markerColor = '#' + markercolor;
       } else {
@@ -1157,36 +1069,37 @@
         html: svgString,
         className: 'custom-marker',
         iconSize: [32, 32],
-        iconAnchor: [16, 32],  // Spitze des Markers zeigt auf die Position
         popupAnchor: [0, -32]
       });
-      // Alten Marker entfernen
-      if (currentMarker) {
-        map.removeLayer(currentMarker);
       }
-      // Neuen Marker erstellen
-      currentMarker = L.marker(pos(position), {
         icon: markerIcon,
         position: position,
         title: `Koordinaten: ${x}, ${y}, ${z}`,
-        riseOnHover: true
       });
       // 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>
-            `;
-      currentMarker.bindPopup(popupContent, {
         maxWidth: 250,
         minWidth: 150,
         autoClose: true,
@@ -1194,7 +1107,7 @@
       });
       // Marker zur Karte hinzufügen
-      currentMarker.addTo(map);
       // Karte auf Marker zentrieren
       map.setView(pos(position), map.getZoom(), {
@@ -1202,9 +1115,7 @@
         duration: 0.5
       });
-      console.log("Neuer Marker gesetzt: " + position);
-      console.log("currentMarker: ")
-      console.log(currentMarker)
     }
     document.onload = loadLocalData()

   <!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.css"/-->
   <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
+  <!--link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css" /-->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="/static/style.css" />
 </head>
+<body data-bs-theme="dark">
+  <nav class="navbar navbar-expand-sm navbar-dark fixed-top">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Tarkov Map</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNavDropdown">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Maps
+            </a>
+            <ul class="dropdown-menu">
+              <li><a href="/map/woods" class="dropdown-item">Woods</a></li>
+              <li><a href="/map/shoreline" class="dropdown-item">Shoreline</a></li>
+              <li><a href="/map/lighthouse" class="dropdown-item">Lighthouse</a></li>
+              <li><a href="/map/customs" class="dropdown-item">Customs</a></li>
+              <li><a href="/map/interchange" class="dropdown-item">Interchange</a></li>
+              <li><a href="/map/streets-of-tarkov" class="dropdown-item">Streets of Tarkov</a></li>
+              <li><a href="/map/ground-zero" class="dropdown-item">Ground Zero</a></li>
+              <li><a href="/map/reserve" class="dropdown-item">Reserve</a></li>
+              <li><a href="/map/factory" class="dropdown-item">Factory</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
     </div>
+  </nav>
   <!--nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       Tarkov Map
     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 = {
       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),
       }
       // SVG-Icon als String mit dynamischer Farbe
       let markerColor;
       if (markercolor) {
         markerColor = '#' + markercolor;
       } else {
         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,
       });
       // Marker zur Karte hinzufügen
+      playerMarkers[playerMarkerName].addTo(map);
       // Karte auf Marker zentrieren
       map.setView(pos(position), map.getZoom(), {
         duration: 0.5
       });
+      console.log("Neuer Marker gesetzt für " + playername + ": " + position);
     }
     document.onload = loadLocalData()