From 182ebb8ba4dcda6ef60e26a96e96781b923dfcca Mon Sep 17 00:00:00 2001 From: Joachim Hummel Date: Fri, 14 Nov 2025 19:49:22 +0000 Subject: [PATCH] Fix marker z-index so newest locations appear on top MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changed rendering order to display oldest markers first and added zIndexOffset to ensure newest location markers are always visible on top when markers overlap. Also improved firstLocation logic to only use the latest marker for map centering. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- index.html | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 78d9cbf..8442775 100644 --- a/index.html +++ b/index.html @@ -308,8 +308,12 @@ // Sortiere nach Timestamp (neueste zuerst) deviceLocs.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)); - // Add markers - deviceLocs.forEach((loc, index) => { + // Add markers in reverse order (oldest first) so newest are on top + // But reverse the array for rendering while keeping track of which is latest + const reversedLocs = [...deviceLocs].reverse(); + + reversedLocs.forEach((loc, reverseIndex) => { + const index = deviceLocs.length - 1 - reverseIndex; // Original index const isLatest = index === 0; const lat = parseFloat(loc.latitude); const lon = parseFloat(loc.longitude); @@ -344,11 +348,15 @@ className: '' }); - L.marker([lat, lon], { icon: markerIcon }) + // Höherer zIndexOffset für neuere Marker (neueste = höchster z-index) + L.marker([lat, lon], { + icon: markerIcon, + zIndexOffset: reverseIndex // Oldest = 0, newest = highest + }) .addTo(markerLayer) .bindPopup(popupContent); - if (!firstLocation) { + if (!firstLocation && isLatest) { firstLocation = [lat, lon]; } });