Limit effective zoom level by new "Maximum zoom level" option

Author: amotl

CHANGELOG.md

@@ -49,6 +49,7 @@
 - Add options `customAttribution` and `customAttributionText`.
 - Rename `point_` prefix to `__field_` when interpolating datapoint field values
 - Remove automatic key suffix for popover texts
+- Limit effective zoom level by new "Maximum zoom level" option
 
 ## v0.2.0
 

src/partials/editor.html

@@ -293,8 +293,14 @@ <h3 class="main-section-heading">Visual options</h3>
 
     <div class="gf-form-group">
       <h5>Center and zoom level</h5>
+
       <gf-form-switch class="gf-form" label="Fit to data" label-class="width-10" checked="ctrl.panel.mapFitData" on-change="ctrl.updateMapCenter()">
       </gf-form-switch>
+      <div class="gf-form">
+        <label class="gf-form-label width-10">Maximum zoom level</label>
+        <input type="text" class="input-small gf-form-input max-width-18" ng-model="ctrl.panel.maximumZoom" ng-change="ctrl.updateMapCenter()"
+               placeholder="9" ng-model-onblur />
+      </div>
 
       <ng-thing ng-show="ctrl.panel.mapFitData != true">
 

src/worldmap.ts

@@ -40,11 +40,14 @@ export default class WorldMap {
       center.mapCenterLatitude,
       center.mapCenterLongitude
     );
+
+    let zoomLevel = this.getEffectiveZoomLevel(center.mapZoomLevel);
+
     this.map = L.map(this.mapContainer, {
       worldCopyJump: true,
       preferCanvas: true,
       center: mapCenter,
-      zoom: center.mapZoomLevel,
+      zoom: zoomLevel,
       zoomControl: this.ctrl.settings.showZoomControl,
       attributionControl: this.ctrl.settings.showAttribution,
     });
@@ -97,6 +100,13 @@ export default class WorldMap {
     //this.ctrl.updatePanelCorner();
   }
 
+  getEffectiveZoomLevel(zoomLevel) {
+    if (this.ctrl.settings.maximumZoom) {
+      zoomLevel = Math.min(parseInt(this.ctrl.settings.maximumZoom), zoomLevel);
+    }
+    return zoomLevel;
+  }
+
   createLegend() {
     this.legend = (<any>window).L.control({ position: 'bottomleft' });
     this.legend.onAdd = () => {
@@ -380,6 +390,8 @@ export default class WorldMap {
       zoomLevel = this.map.getBoundsZoom(bounds);
     }
 
+    zoomLevel = this.getEffectiveZoomLevel(zoomLevel);
+
     // Apply coordinates and zoom level to Leaflet map.
     this.map.setView(coordinates, zoomLevel, options);
 

src/worldmap_ctrl.ts

@@ -18,6 +18,7 @@ const panelDefaults = {
   mapCenterLatitude: 0,
   mapCenterLongitude: 0,
   initialZoom: 1,
+  maximumZoom: null,
   mapZoomByRadius: null,
   valueName: "total",
   circleMinSize: 2,