diff --git a/assets/src/modules/Map.js b/assets/src/modules/Map.js
index a6376009c3..cb52d27ef2 100644
--- a/assets/src/modules/Map.js
+++ b/assets/src/modules/Map.js
@@ -7,7 +7,9 @@ import { getPointResolution } from 'ol/proj.js';
 import DragPan from 'ol/interaction/DragPan.js';
 import MouseWheelZoom from 'ol/interaction/MouseWheelZoom.js';
 import DoubleClickZoom from 'ol/interaction/DoubleClickZoom.js';
+import DragZoom from 'ol/interaction/DragZoom.js';
 import { defaults as defaultInteractions } from 'ol/interaction.js';
+import { always } from 'ol/events/condition.js';
 
 /** Class initializing Openlayers Map. */
 export default class Map extends olMap {
@@ -35,6 +37,19 @@ export default class Map extends olMap {
             target: 'newOlMap'
         });
 
+        // Zoom to box
+        const dragZoom = new DragZoom({
+            condition: always
+        });
+
+        document.querySelector('#navbar .pan').addEventListener('click', () => {
+            this.removeInteraction(dragZoom);
+        });
+
+        document.querySelector('#navbar .zoom').addEventListener('click', () => {
+            this.addInteraction(dragZoom);
+        });
+
         this._newOlMap = false;
 
         this._refreshOL2View = () => {
diff --git a/lizmap/www/assets/css/map.css b/lizmap/www/assets/css/map.css
index dd336311de..112331bb79 100644
--- a/lizmap/www/assets/css/map.css
+++ b/lizmap/www/assets/css/map.css
@@ -1855,6 +1855,10 @@ a.btn.btn-opacity-layer.active {
   padding: 4px;
 }
 
+.ol-dragzoom{
+  border: solid 2px rgba(255, 0, 0, 0.5);
+}
+
 /*Loading window*/
 #ui-dialog-title-loading {
   font-size:0.7em;