diff --git a/src/components/DialogToolbarContent.vue b/src/components/DialogToolbarContent.vue
index 4dfba39e..f39d0b49 100644
--- a/src/components/DialogToolbarContent.vue
+++ b/src/components/DialogToolbarContent.vue
@@ -38,6 +38,23 @@
     </div>
 
     <el-row class="icon-group">
+      <el-popover
+        class="tooltip"
+        :content="isFitViewport ? 'Exit fit viewport' : 'Fit to viewport'"
+        placement="bottom-end"
+        :teleported=false
+        trigger="hover"
+        ref="fitViewPopover"
+        popper-class="header-popper"
+      >
+        <template #reference>
+          <map-svg-icon
+            :icon="isFitViewport ? 'undock' : 'dock'"
+            class="header-icon"
+            @click="toggleMapFitView"
+          />
+        </template>
+      </el-popover>
       <el-popover
         v-if="activeViewRef"
         :virtual-ref="activeViewRef"
@@ -259,6 +276,7 @@ export default {
   data: function() {
     return {
       isFullscreen: false,
+      isFitViewport: false,
       loadingLink: true,
       shareLinkDisplay: false,
       independent: true,
@@ -279,6 +297,34 @@ export default {
       this.$emit("onFullscreen");
       this.isFullscreen = !this.isFullscreen;
     },
+    toggleMapFitView: function (exitFitView = false) {
+      const toolbarEl = this.$el;
+      const mapContainerEl = toolbarEl.closest('.mapcontent');
+      if (mapContainerEl) {
+        if (this.isFitViewport || exitFitView === true) {
+          this.isFitViewport = false;
+          mapContainerEl.classList.remove('fit-screen');
+          document.body.classList.remove('el-popup-parent--hidden');
+        } else {
+          this.isFitViewport = true;
+          mapContainerEl.classList.add('fit-screen');
+          document.body.classList.add('el-popup-parent--hidden');
+        }
+      }
+      // hide tooltip
+      if (this.$refs.fitViewPopover) {
+        this.$refs.fitViewPopover.hide();
+      }
+    },
+    onKeydown: function (event) {
+      if (event.defaultPrevented) {
+        return; // Do nothing if the event was already processed
+      }
+
+      if (event.key === 'Escape') {
+        this.toggleMapFitView(true);
+      }
+    },
     onFullscreenEsc: function () {
       if (!document.fullscreenElement) {
         this.isFullscreen = false;
@@ -313,9 +359,11 @@ export default {
     this.permalinkRef = shallowRef(this.$refs.permalinkRef);
 
     document.addEventListener('fullscreenchange', this.onFullscreenEsc);
+    window.addEventListener('keydown', this.onKeydown);
   },
   unmounted: function () {
     document.removeEventListener('fullscreenchange', this.onFullscreenEsc);
+    window.removeEventListener('keydown', this.onKeydown);
   },
 };
 </script>
diff --git a/src/components/MapContent.vue b/src/components/MapContent.vue
index 8009655c..6793c7e7 100644
--- a/src/components/MapContent.vue
+++ b/src/components/MapContent.vue
@@ -373,6 +373,15 @@ export default {
   height: 100%;
   width:100%;
   z-index:1;
+
+  &.fit-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+  }
 }
 
 </style>