Update templates/map.html

templates/map.html

@@ -161,6 +161,18 @@
       ws.send(JSON.stringify({ type: "join", group: wsgroup }));
     };
 
+    function removeAllMarkers() {
+        // Iterate over all player markers
+        for (const playername in playerMarkers) {
+            if (playerMarkers.hasOwnProperty(playername)) {
+                // Remove the marker from the map
+                map.removeLayer(playerMarkers[playername]);
+            }
+        }
+        // Clear the playerMarkers object
+        Object.keys(playerMarkers).forEach(key => delete playerMarkers[key]);
+        console.log("Alle Marker wurden entfernt.");
+    }
 
     function loadLocalData() {
 
@@ -173,10 +185,10 @@
       console.log(markerData)
       if (markerData) {
         // Alten Marker entfernen
-        if (currentMarker) {
-          map.removeLayer(currentMarker);
-          currentMarker = null;
-        }
+        // if (currentMarker) {
+        //   map.removeLayer(currentMarker);
+        //   currentMarker = null;
+        // }
         // Neuen Marker hinzufügen
         addMarker(markerData.x, markerData.y, markerData.z, markerData.timestamp, markerData.preview ? markerData.preview : false, markerData.actualmap ? markerData.actualmap : false, markerData.playername ? markerData.playername : false, markerData.markercolor ? markerData.markercolor : false);
       }
@@ -1016,6 +1028,8 @@
 
     // Funktion zum Hinzufügen eines Markers
     function addMarker(x, y, z, timestamp, preview = false, actualmap = false, playername = false, markercolor = false) {
+
+        const playerMarkerName = playername.toLowerCase().replaceAll(" ", "-")
       
         // Validate position
         const position = {
@@ -1051,12 +1065,12 @@
         });
     
         // Remove old marker for this player, if it exists
-        if (playerMarkers[playername]) {
-            map.removeLayer(playerMarkers[playername]);
+        if (playerMarkers[playerMarkerName]) {
+            map.removeLayer(playerMarkers[playerMarkerName]);
         }
     
         // Create new marker
-        playerMarkers[playername] = L.marker(pos(position), {
+        playerMarkers[playerMarkerName] = L.marker(pos(position), {
             icon: markerIcon,
             position: position,
             title: `Koordinaten: ${x}, ${y}, ${z}`,
@@ -1073,7 +1087,7 @@
                 <small>${timestamp}</small>
             </div>
         `;
-        playerMarkers[playername].bindPopup(popupContent, {
+        playerMarkers[playerMarkerName].bindPopup(popupContent, {
             maxWidth: 250,
             minWidth: 150,
             autoClose: true,
@@ -1081,7 +1095,7 @@
         });
     
         // Marker zur Karte hinzufügen
-        playerMarkers[playername].addTo(map);
+        playerMarkers[playerMarkerName].addTo(map);
     
         // Karte auf Marker zentrieren
         map.setView(pos(position), map.getZoom(), {