feat: use custom color markers for global map

1 files changed, 21 insertions, 0 deletions

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">