feat: use custom color markers for global map

2 files changed, 35 insertions, 0 deletions

diff --git a/static/input.css b/static/input.css
index 8c0069b..4751774 100644
--- a/static/input.css
+++ b/static/input.css
@@ -283,6 +283,20 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar {
     border: 0.3vmax outset var(--main-light-color);
 }
 
+.custom-svg-marker {
+    background: transparent;
+    border: none;
+}
+
+.custom-svg-marker svg {
+    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
+    transition: transform 0.2s;
+}
+
+.custom-svg-marker:hover svg {
+    transform: scale(1.1);
+}
+
 .lg-backdrop {
     background-color: var(--background-light-color);
     opacity: 0.8 !important;
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">