Add a toggle to disable panning/dragging on the map

* added dragging toggle

* added option to disable double click zoom as well

* forgot to call setter on init

Author: gdunstone

src/partials/editor.html

@@ -361,7 +361,10 @@ <h5>Appearance</h5>
       <gf-form-switch class="gf-form" label="Show Zoom Control" label-class="width-10" checked="ctrl.panel.showZoomControl" on-change="ctrl.restart()"></gf-form-switch>
       <gf-form-switch class="gf-form" label="Mouse Wheel Zoom" label-class="width-10" checked="ctrl.panel.mouseWheelZoom" on-change="ctrl.toggleMouseWheelZoom()"></gf-form-switch>
       </div>
-
+      <gf-form-switch class="gf-form" label="Dragging" label-class="width-10" checked="ctrl.panel.dragging" on-change="ctrl.toggleDragging()"></gf-form-switch>
+      </div>
+      <gf-form-switch class="gf-form" label="Double Click Zoom" label-class="width-10" checked="ctrl.panel.doubleClickZoom" on-change="ctrl.toggleDoubleClickZoom()"></gf-form-switch>
+      </div>
       <!-- Legend -->
       <div class="gf-form-subgroup">
       <gf-form-switch class="gf-form" label="Show Legend" label-class="width-10" checked="ctrl.panel.showLegend" on-change="ctrl.toggleLegend()"></gf-form-switch>

src/worldmap.ts

@@ -47,6 +47,8 @@ export default class WorldMap {
       attributionControl: this.ctrl.settings.showAttribution,
     });
     this.setMouseWheelZoom();
+    this.setDragging();
+    this.setDoubleClickZoom();
 
     const selectedTileServer = tileServers[this.ctrl.tileServer];
     (window as any).L.tileLayer(selectedTileServer.url, {
@@ -445,6 +447,22 @@ export default class WorldMap {
     }
   }
 
+  setDragging() {
+    if (!this.ctrl.settings.dragging) {
+      this.map.dragging.disable();
+    } else {
+      this.map.dragging.enable();
+    }
+  }
+
+  setDoubleClickZoom() {
+    if (!this.ctrl.settings.doubleClickZoom) {
+      this.map.doubleClickZoom.disable();
+    } else {
+      this.map.doubleClickZoom.enable();
+    }
+  }
+
   addCircles(circles) {
     // Todo: Optionally add fixed custom attributions to the circle layer.
     const attribution = undefined;

src/worldmap_ctrl.ts

@@ -40,6 +40,8 @@ const panelDefaults = {
   customAttribution: false,
   customAttributionText: null,
   mouseWheelZoom: false,
+  dragging: true,
+  doubleClickZoom: true,
   esGeoPoint: null,
   // Todo: Investigate: Is "Count" a reasonable default here
   //  or does it confuse the operator?
@@ -504,6 +506,16 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
+  toggleDragging() {
+    this.map.setDragging();
+    this.render();
+  }
+
+  toggleDoubleClickZoom() {
+    this.map.setDoubleClickZoom();
+    this.render();
+  }
+
   toggleCustomAttribution() {
     if (this.settings.customAttribution) {
       const attributionControl = this.map.map.attributionControl;