From 5f1903927957c3e1acd2ebeb8011c3aa77d51ddd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Knut=20Hu=CC=88hne?= <knut@k-nut.eu>
Date: Mon, 10 Nov 2025 19:50:47 +0100
Subject: [PATCH] Update preview images based on current map view

---
 package.json           |  2 +-
 src/App.vue            |  7 +++++--
 src/components/Map.vue | 13 +++++++++++++
 src/components/Nav.vue | 14 +++++++++++++-
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 295e158..3eab25e 100644
--- a/package.json
+++ b/package.json
@@ -52,4 +52,4 @@
     "imageAlt": "luftbilder.berlin.codefor.de screenshot",
     "twitter": "@codeforbe"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index b978808..8c69f62 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
-  <Nav :brand="brand" :maps="maps" :map="map" @changeMap="changeMap" @changeCenter="changeCenter"/>
-  <Map :map="map" :center="center" :zoom="zoom" />
+  <Nav :brand="brand" :maps="maps" :map="map" :center="center" :zoom="zoom" @changeMap="changeMap" @changeCenter="changeCenter"/>
+  <Map :map="map" :center="center" :zoom="zoom" @changeCenter="changeCenter" @changeZoom="changeZoom"/>
 </template>
 
 <script>
@@ -28,6 +28,9 @@
       },
       changeCenter(center) {
         this.center = center
+      },
+      changeZoom(zoom) {
+        this.zoom = zoom
       }
     }
   }
diff --git a/src/components/Map.vue b/src/components/Map.vue
index f73a58c..3a16b92 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -24,6 +24,19 @@
         this.leafletMap = L.map('map')
         this.changeView()
         this.changeMap()
+        this.leafletMap.on('moveend', () => {
+          const c = this.leafletMap.getCenter()
+          const [currentLat, currentLon] = this.center;
+          if (currentLat !== c.lat && currentLon !== c.lng) {
+            this.$emit('changeCenter', [c.lat, c.lng])
+          }
+        })
+        this.leafletMap.on('zoomend', () => {
+          const z = this.leafletMap.getZoom()
+          if (z !== this.zoom) {
+            this.$emit('changeZoom', z)
+          }
+        })
       },
       changeMap: function() {
         if (this.leafletLayer) {
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index eb1db39..859d6ca 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -49,6 +49,8 @@
       brand: Object,
       maps: Array,
       map: Object,
+      center: Array,
+      zoom: Number,
     },
     components: {
       Info
@@ -92,8 +94,18 @@
       changeMap: function(index) {
         this.$emit('changeMap', index)
       },
+      latLonToTile: function(lat, lon, z) {
+        const rad = Math.PI / 180
+        const n = Math.pow(2, z)
+        const x = Math.floor((lon + 180) / 360 * n)
+        const latRad = lat * rad
+        const y = Math.floor((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n)
+        return { x, y }
+      },
       getBackgroundImage: function(map) {
-        return map.url.replace(/\{z\}\/\{x\}\/\{y\}/i, '16/35198/21494')
+        const [lat, lon] = this.center.map(x => parseFloat(x))
+        const { x, y } = this.latLonToTile(lat, lon, this.zoom)
+        return map.url.replace(/\{z\}\/\{x\}\/\{y\}/i, `${this.zoom}/${x}/${y}`)
       },
       getYear: function(map) {
         return map.name.split(' ')[1]