diff options
| -rw-r--r-- | static/input.css | 18 | ||||
| -rw-r--r-- | views/pages/global-map.html | 21 |
2 files changed, 39 insertions, 0 deletions
diff --git a/static/input.css b/static/input.css index 8c0069b..9f834a6 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; @@ -327,6 +341,10 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar { bottom: calc(10vmin + 5vmax) !important; } +.lg-outer[class~="lg-single-item"] .lg-content { + bottom: 5vmax !important; +} + .lg-thumb-item { width: 10vmin !important; height: 10vmin !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"> |