From 4bec87d42bb9919c0563da965a02b6de5cbd70ec Mon Sep 17 00:00:00 2001
From: Joachim Hummel <jh@unixweb.de>
Date: Fri, 14 Nov 2025 18:29:31 +0000
Subject: [PATCH] Replace marker icons with navigation-style circular icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed marker design from rotated teardrop shapes to clean circular icons with directional indicators. The new design uses SVG for crisp rendering at all zoom levels.

- Latest position: 32x32px circle with arrow indicator
- Historical positions: 16x16px circles
- Uses device-specific colors (red for Joachim Pixel, blue for Huawei)
- White border for better visibility on all map layers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 index.html | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 41c5330..7442ac7 100644
--- a/index.html
+++ b/index.html
@@ -331,11 +331,14 @@
                     }
 
                     // Marker Icon (neuester = größer)
-                    const iconSize = isLatest ? [30, 45] : [20, 33];
-                    const iconAnchor = isLatest ? [15, 45] : [10, 33];
+                    const iconSize = isLatest ? [32, 32] : [16, 16];
+                    const iconAnchor = isLatest ? [16, 16] : [8, 8];
 
                     const markerIcon = L.divIcon({
-                        html: `<div style="background-color: ${color}; width: ${iconSize[0]}px; height: ${iconSize[1]}px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.3);"></div>`,
+                        html: `<svg width="${iconSize[0]}" height="${iconSize[1]}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="12" cy="12" r="10" fill="${color}" stroke="white" stroke-width="2"/>
+                            <path d="M12 8 L12 12 L15 15" stroke="white" stroke-width="2" stroke-linecap="round" fill="none"/>
+                        </svg>`,
                         iconSize: iconSize,
                         iconAnchor: iconAnchor,
                         className: ''