website

Author: hyperknot

website/assets/berlin.png

@@ -1,14 +1,28 @@
+const london3d = {
+  center: [-0.114, 51.506],
+  zoom: 14.2,
+  bearing: 55.2,
+  pitch: 60,
+}
+
+const berlin = {
+  center: [13.388, 52.517],
+  zoom: 9.5,
+  bearing: 0,
+  pitch: 0,
+}
+
 function initMap() {
   if (window.map) return
 
   document.getElementById('mapbg-image').style.opacity = '0.2'
 
   const map = new maplibregl.Map({
     style: 'https://tiles.openfreemap.org/styles/liberty',
-    center: [-0.114, 51.506],
-    zoom: 14.2,
-    bearing: 55.2,
-    pitch: 60,
+    center: berlin.center,
+    zoom: berlin.zoom,
+    bearing: berlin.bearing,
+    pitch: berlin.pitch,
     container: mapDiv,
     boxZoom: false,
     // doubleClickZoom: false,
@@ -42,21 +56,25 @@ mapDiv.onclick = function () {
 
 // initMap()
 
-let movedTo2d = false
+// let movedTo2d = false
 
 function selectStyle(event, style) {
   initMap()
   toggleButtonSelection(event.target)
 
-  const styleUrl = 'https://tiles.openfreemap.org/styles/' + style
+  const styleUrl = 'https://tiles.openfreemap.org/styles/' + style.split('-')[0]
   map.setStyle(styleUrl)
 
-  if (!movedTo2d) {
-    map.setCenter({ lng: 13.388, lat: 52.517 })
-    map.setPitch(0)
-    map.setBearing(0)
-    map.setZoom(9.5)
-    movedTo2d = true
+  if (style === 'liberty-3d') {
+    map.setCenter(london3d.center)
+    map.setPitch(london3d.pitch)
+    map.setBearing(london3d.bearing)
+    map.setZoom(london3d.zoom)
+  } else if (map.getBearing() !== 0) {
+    map.setCenter(berlin.center)
+    map.setPitch(berlin.pitch)
+    map.setBearing(berlin.bearing)
+    map.setZoom(berlin.zoom)
   }
 
   document.getElementById('style-url-code').innerText = styleUrl

website/assets/berlin.webp

@@ -169,7 +169,7 @@ code {
 #map-container {
   width: 100%;
   height: 500px;
-  margin-bottom: 2em;
+  margin-bottom: 24px;
   position: relative;
 }
 
@@ -178,7 +178,7 @@ code {
   height: 100%;
   position: absolute;
   z-index: 1;
-  background-image: url('mapbg.jpg');
+  background-image: url('berlin.webp');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

website/assets/mapbg.jpg renamed to website/assets/london.jpg

@@ -13,6 +13,7 @@
   <button onclick="selectStyle(event, 'positron')" class="btn">Positron</button>
   <button onclick="selectStyle(event, 'bright')" class="btn">Bright</button>
   <button onclick="selectStyle(event, 'liberty')" class="btn selected">Liberty</button>
+  <button onclick="selectStyle(event, 'liberty-3d')" class="btn">3D</button>
 </div>
 
 <p>Use the following style in a MapLibre map:</p>

website/assets/map_howto.js

@@ -49,7 +49,7 @@ def copy_assets():
         'favicon.ico',
         'github.svg',
         'x.svg',
-        'mapbg.jpg',
+        'berlin.webp',
     ]:
         shutil.copyfile(ASSETS_DIR / file, OUT_DIR / file)