Update preview images based on current map view

Author: k-nut

package.json

@@ -52,4 +52,4 @@
     "imageAlt": "luftbilder.berlin.codefor.de screenshot",
     "twitter": "@codeforbe"
   }
-}
+}

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
       }
     }
   }

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) {

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]