[fix] Reduce max zoom level to prevent unintended behavior due to exc…

…essive zooming openwisp#188 Related to openwisp#188
d1vyanshu-kumar · Apr 19, 2024 · 3e942e1 · 3e942e1
1 parent 8863446
commit 3e942e1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/lib/js/echarts-leaflet/LeafletCoordSys.js b/lib/js/echarts-leaflet/LeafletCoordSys.js
@@ -7,8 +7,8 @@
  *
  * @return {function} LeafletCoordSys
  */
-function createLeafletCoordSystem(echarts, L) {
-  const {util, graphic, matrix} = echarts;
+function createLeafletCoordSystem(echarts, L, defaultconfig = {}) {
+  const { util, graphic, matrix } = echarts;
   const CustomOverlay = L.Layer.extend({
     initialize(container) {
       this._container = container;
@@ -53,10 +53,12 @@ function createLeafletCoordSystem(echarts, L) {
     this._mapOffset = [0, 0];
     this._api = api;
     this._projection = L.Projection.Mercator;
+    const maxZoom = defaultconfig.maxZoom || 15; // Set default max zoom level
+    this._maxZoom = maxZoom;
   }
 
   function doConvert(methodName, ecModel, finder, value) {
-    const {leafletModel, seriesModel} = finder;
+    const { leafletModel, seriesModel } = finder;
 
     /* eslint-disable */
     const coordSys = leafletModel
@@ -65,7 +67,7 @@ function createLeafletCoordSystem(echarts, L) {
       ? seriesModel.coordinateSystem || // For map.
         (seriesModel.getReferringComponents("leaflet")[0] || {})
           .coordinateSystem
-      : null;
+   : null;
     return coordSys === this ? coordSys[methodName](value) : null;
     /* eslint-enable */
   }
@@ -76,6 +78,10 @@ function createLeafletCoordSystem(echarts, L) {
   LeafletCoordSys.prototype.dimensions = ["lng", "lat"];
 
   LeafletCoordSys.prototype.setZoom = function (zoom) {
+    const maxZoom = this._maxZoom;
+    if (zoom > maxZoom) {
+      zoom = maxZoom;
+    }
     this._zoom = zoom;
   };
 
@@ -198,7 +204,7 @@ function createLeafletCoordSystem(echarts, L) {
       leafletCoordSys = new LeafletCoordSys(map, api);
       leafletList.push(leafletCoordSys);
       leafletCoordSys.setMapOffset(leafletModel.__mapOffset || [0, 0]);
-      const {center, zoom} = leafletModel.get("mapOptions");
+      const { center, zoom } = leafletModel.get("mapOptions");
       if (center && zoom) {
         leafletCoordSys.setZoom(zoom);
         leafletCoordSys.setCenter(center);

diff --git a/lib/js/echarts-leaflet/LeafletModel.js b/lib/js/echarts-leaflet/LeafletModel.js
@@ -23,6 +23,14 @@ export default function extendLeafletModel(echarts) {
     },
 
     setCenterAndZoom(center, zoom) {
+       // Limit zoom level before setting
+       const maxZoom = this.option.mapOptions.maxZoom || this.getMaxZoom();
+       zoom = Math.min(zoom, maxZoom);
+       // If a zoom control exists, adjust its options
+       const map = this.getLeaflet();
+       if (map.zoomControl) {
+         map.zoomControl.options.maxZoom = maxZoom;
+       }
 
       this.option.center = center;
       this.option.zoom = zoom;
@@ -36,7 +44,8 @@ export default function extendLeafletModel(echarts) {
     defaultOption: {
       mapOptions: {
         zoomDelta: 0.25, // Set zoom sensitivity
-        zoomSnap: 0.19     // Disable zoom snapping
+        zoomSnap: 0.19,    // Disable zoom snapping
+        maxZoom: 15 
       },
       tiles: [
         {
@@ -48,7 +57,13 @@ export default function extendLeafletModel(echarts) {
         },
       ],
       layerControl: {},
-
+    },
+    /**
+     * Get the maximum supported zoom level
+     * @return {number}
+     */
+    getMaxZoom() {
+      return this.option.maxZoom;
     },
   });
 }