feat: use self-hosted pmtiles for map

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

7 files changed, 30 insertions, 17 deletions

diff --git a/config/config.local.yaml b/config/config.local.yaml
index d3e2e33..80eb8f7 100644
--- a/config/config.local.yaml
+++ b/config/config.local.yaml
@@ -70,9 +70,12 @@ photoStorage:
   thumbnail320p:
     baseUrl: https://storage.yandexcloud.kz/sayauz-thumbnails-webp320/%s.webp
   homePageGifs:
-    baseUrl: https://storage.yandexcloud.kz/sayauz-static/home-page-gifs/otter-%s.gif
+    baseUrl: https://cdn.saya.uz/static/home-page-gifs/otter-%s.gif
     indexes: ["1", "2", "3"]
 staticStorage:
-  baseUrl: https://storage.yandexcloud.kz/sayauz-static
+  baseUrl: https://cdn.saya.uz/static
+mapStorage:
+  baseUrl: https://cdn.saya.uz/map
 allowOrigins:
   - https://storage.yandexcloud.kz
+  - https://cdn.saya.uz
diff --git a/config/config.prod.yaml b/config/config.prod.yaml
index e5785f8..ad4864a 100644
--- a/config/config.prod.yaml
+++ b/config/config.prod.yaml
@@ -73,9 +73,12 @@ photoStorage:
   thumbnail320p:
     baseUrl: https://storage.yandexcloud.kz/sayauz-thumbnails-webp320/%s.webp
   homePageGifs:
-    baseUrl: https://storage.yandexcloud.kz/sayauz-static/home-page-gifs/otter-%s.gif
+    baseUrl: https://cdn.saya.uz/static/home-page-gifs/otter-%s.gif
     indexes: ["1", "2", "3"]
 staticStorage:
-  baseUrl: https://storage.yandexcloud.kz/sayauz-static
+  baseUrl: https://cdn.saya.uz/static
+mapStorage:
+  baseUrl: https://cdn.saya.uz/map
 allowOrigins:
   - https://storage.yandexcloud.kz
+  - https://cdn.saya.uz
diff --git a/config/config.stage.yaml b/config/config.stage.yaml
index c2e337b..4b46c6c 100644
--- a/config/config.stage.yaml
+++ b/config/config.stage.yaml
@@ -70,9 +70,13 @@ photoStorage:
   thumbnail320p:
     baseUrl: https://storage.yandexcloud.kz/sayauz-thumbnails-webp320/%s.webp
   homePageGifs:
-    baseUrl: https://storage.yandexcloud.kz/sayauz-static/home-page-gifs/otter-%s.gif
+    baseUrl: https://cdn.saya.uz/static/home-page-gifs/otter-%s.gif
     indexes: ["1", "2", "3"]
 staticStorage:
-  baseUrl: https://storage.yandexcloud.kz/sayauz-static
+  baseUrl: https://cdn.saya.uz/static
+mapStorage:
+  baseUrl: https://cdn.saya.uz/map
 allowOrigins:
   - https://storage.yandexcloud.kz
+  - https://cdn.saya.uz
+
diff --git a/static/input.css b/static/input.css
index 8b18579..602b5d9 100644
--- a/static/input.css
+++ b/static/input.css
@@ -851,10 +851,8 @@ form.crossable.htmx-request input {
     background-color: var(--color-background-medium) !important;
 }
 
-@media (prefers-color-scheme: dark) {
-    .leaflet-tile {
-        filter: invert(1) hue-rotate(190deg) contrast(1.1) brightness(1.2) !important;
-    }
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+    color: var(--color-main-medium) !important;
 }
 
 .home-page-heart {
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({