Update templates/map.html

templates/map.html

@@ -110,7 +110,8 @@
   <script src="/static/js/leaflet.controlCoordinates.js"></script>
   <script>
     // GLOBAL VARIABLE TO HOLD THE CURRENT MARKER
-    let currentMarker = null;
+    const playerMarkers = {}
+    let currentMarker = null
     const client_id = Date.now()
     const mapData = {{ maps[0] | tojson }}
     console.info(mapData)
@@ -1015,6 +1016,84 @@
 
     // Funktion zum Hinzufügen eines Markers
     function addMarker(x, y, z, timestamp, preview = false, actualmap = false, playername = false, markercolor = false) {
+      
+        // 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 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]
+        });
+    
+        // Remove old marker for this player, if it exists
+        if (playerMarkers[playername]) {
+            map.removeLayer(playerMarkers[playername]);
+        }
+    
+        // Create new marker
+        playerMarkers[playername] = 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>
+        `;
+        playerMarkers[playername].bindPopup(popupContent, {
+            maxWidth: 250,
+            minWidth: 150,
+            autoClose: true,
+            closeOnClick: true
+        });
+    
+        // Marker zur Karte hinzufügen
+        playerMarkers[playername].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 = {