diff --git a/website/assets/berlin.png b/website/assets/berlin.png
new file mode 100644
index 0000000..e01876f
Binary files /dev/null and b/website/assets/berlin.png differ
diff --git a/website/assets/berlin.webp b/website/assets/berlin.webp
new file mode 100644
index 0000000..397ff5e
Binary files /dev/null and b/website/assets/berlin.webp differ
diff --git a/website/assets/mapbg.jpg b/website/assets/london.jpg
similarity index 100%
rename from website/assets/mapbg.jpg
rename to website/assets/london.jpg
diff --git a/website/assets/map_howto.js b/website/assets/map_howto.js
index e64b6ef..90a6531 100644
--- a/website/assets/map_howto.js
+++ b/website/assets/map_howto.js
@@ -1,3 +1,17 @@
+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
 
@@ -5,10 +19,10 @@ function initMap() {
 
   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
diff --git a/website/assets/style.css b/website/assets/style.css
index 7ad3423..8277b6b 100644
--- a/website/assets/style.css
+++ b/website/assets/style.css
@@ -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;
diff --git a/website/blocks/map_howto.html b/website/blocks/map_howto.html
index bebf794..50d54c4 100644
--- a/website/blocks/map_howto.html
+++ b/website/blocks/map_howto.html
@@ -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>
diff --git a/website/generate.py b/website/generate.py
index 414b9f6..00476a8 100755
--- a/website/generate.py
+++ b/website/generate.py
@@ -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)