From ea4886444ad420cc06b794d275d672e152c20c35 Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Tue, 19 Aug 2025 22:05:41 +0700
Subject: feat: use custom color markers for global map

---
 views/pages/global-map.html | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

(limited to 'views')

diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 05c39a1..6185076 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -179,6 +179,26 @@
         var map;
         var markers = L.markerClusterGroup();
 
+        function createCustomIcon(color, borderColor = "var(--main-light-color)") {
+            const svgIcon = `
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 1C7.5 1 4 4.5 4 9c0 6.5 8 14 8 14s8-7.5 8-14c0-4.5-3.5-8-8-8zm0 11c-1.5 0-3-1.5-3-3s1.5-3 3-3 3 1.5 3 3-1.5 3-3 3z"
+                          fill="${color}"
+                          stroke="${borderColor}"
+                          stroke-width="1"
+                          stroke-linejoin="round"/>
+                </svg>
+            `;
+
+            return L.divIcon({
+                html: svgIcon,
+                className: 'custom-svg-marker',
+                iconSize: [32, 32],
+                iconAnchor: [16, 32],
+                popupAnchor: [0, -32]
+            });
+        }
+
         function initLocationMap() {
             map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4);
 
@@ -218,6 +238,7 @@
             }
 
             var marker = L.marker([x, y], {
+                icon: createCustomIcon(titleColor),
                 title: title,
             }).bindPopup(`
                     <div class="flex flex-row justify-center justify-items-center">
-- 
cgit v1.3.1+13