diff options
| author |  Saya Andy <145215889+SayaAndy@users.noreply.github.com>
| 2025-08-19 16:05:37 +0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2025-08-19 16:05:37 +0700 |
| commit | 0d8aa40ce197b10e32f2e6cc378188b71a83689f (patch) | |
| tree | 0b3ed0e352836ede51e82ceaff8c9386e934802c /views/pages/global-map.html | |
| parent | 6401cf603f598a8008c69a14fe58f460009180a7 (diff) | |
| parent | 53923cf49f46041c82bbb0cbc155e4bdcc9e1a5d (diff) | |
| download | web-0.6.1.tar.gz web-0.6.1.zip | |
v0.6.1v0.6.1
feat(map): enable marker clustering via plugin
refactor: move template manager definition to router package
Diffstat (limited to 'views/pages/global-map.html')
| -rw-r--r-- | views/pages/global-map.html | 11 |
1 files changed, 9 insertions, 2 deletions
diff --git a/views/pages/global-map.html b/views/pages/global-map.html index 09d7ab2..05c39a1 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -11,6 +11,8 @@ {{ block "header" . }}{{ end }} <link href="/output.css" rel="stylesheet"> <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css"> + <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"> + <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"> </head> <body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-0.8:flex-col"> @@ -60,6 +62,7 @@ <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script> + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script> <script> const themeWheel = document.getElementById('theme-wheel'); @@ -174,6 +177,7 @@ <script> var map; + var markers = L.markerClusterGroup(); function initLocationMap() { map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4); @@ -182,6 +186,8 @@ maxZoom: 18, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map); + + map.addLayer(markers); } function stringToColor(str) { @@ -213,12 +219,13 @@ var marker = L.marker([x, y], { title: title, - }).addTo(map) - .bindPopup(` + }).bindPopup(` <div class="flex flex-row justify-center justify-items-center"> <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-[3vmax] h-[3vmax] mr-[0.5vmax]" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/${thumbnail}.webp"> <span><b><a href="${link}">${title}</a></b><br><a href="https://www.openstreetmap.org/#map=13/${x}/${y}">${x}, ${y}</a></span> </div>`); + + markers.addLayer(marker); } document.addEventListener('DOMContentLoaded', () => { |