feat: use self-hosted pmtiles for map

feat: migrate static to gcore cdn
fix: change text color on map tooltips depending on scheme

3 files changed, 12 insertions, 7 deletions

diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 3392ff7..e380ef3 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -421,6 +421,7 @@
 
         <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
         <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
+        <script src="{{ .StaticStorageBaseUrl }}/libs/protomaps-leaflet/5.0.0/dist/protomaps-leaflet.js"></script>
         <script src="{{ .StaticStorageBaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
         <script src="{{ .StaticStorageBaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
 
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 5f964e6..4d8ba06 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -46,9 +46,11 @@
         function initLocationMap(id, x, y, relativeErrorMeters = 0) {
             map = L.map(id).setView([x, y], 8);
 
-            L.tileLayer('https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png', {
-                maxZoom: 20,
-                attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
+            protomapsL.leafletLayer({
+                url: 'https://cdn.saya.uz/map/global.pmtiles',
+                maxZoom: 15,
+                flavor: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+                lang: '{{ .Lang }}'
             }).addTo(map);
 
             if (relativeErrorMeters != 0) {
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 0a7b941..f460d95 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -223,6 +223,7 @@
 
         <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
         <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
+        <script src="{{ .StaticStorageBaseUrl }}/libs/protomaps-leaflet/5.0.0/dist/protomaps-leaflet.js"></script>
         <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
 
         <script>
@@ -395,10 +396,11 @@
             function initLocationMap() {
                 map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4);
 
-                L.tileLayer('https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png', {
-                    maxZoom: 20,
-                    attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
-                    zoomControl: false
+                protomapsL.leafletLayer({
+                    url: 'https://cdn.saya.uz/map/global.pmtiles',
+                    maxZoom: 15,
+                    flavor: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+                    lang: '{{ .Lang }}'
                 }).addTo(map);
 
                 L.control.zoom({