[fix] Set default value for maxZoom and limit maxZoom option #188

The issue of empty responses from the tile server when zooming in beyond the supported zoom level has been addressed by setting the default maxZoom level to 15. This change ensures that tiles are displayed up to the supported zoom level.

If a different default maxZoom level is desired, it can be modified by adjusting the value of .                                         Closes #188

lib/js/echarts-leaflet/LeafletCoordSys.js

@@ -76,9 +76,11 @@ function createLeafletCoordSystem(echarts, L) {
   LeafletCoordSys.prototype.dimensions = ["lng", "lat"];
 
   LeafletCoordSys.prototype.setZoom = function (zoom) {
+    if (zoom > 15) {
+      zoom = 15;
+    }
     this._zoom = zoom;
   };
-
   LeafletCoordSys.prototype.setCenter = function (center) {
     this._center = this._projection.project(new L.LatLng(center[1], center[0]));
   };

lib/js/echarts-leaflet/LeafletModel.js

@@ -23,6 +23,15 @@ export default function extendLeafletModel(echarts) {
     },
 
     setCenterAndZoom(center, zoom) {
+      // Limit zoom level before setting
+      zoom = Math.min(zoom, this.getMaxZoom()); 
+
+      // If a zoom control exists, adjust its options
+      const map = this.getLeaflet();
+      if (map.zoomControl) {
+        map.zoomControl.options.maxZoom = this.getMaxZoom();
+      }
+
       this.option.center = center;
       this.option.zoom = zoom;
     },
@@ -33,7 +42,10 @@ export default function extendLeafletModel(echarts) {
     },
 
     defaultOption: {
-      mapOptions: {},
+      mapOptions: {
+        zoomDelta: 0.25, // Set zoom sensitivity
+        zoomSnap: 0.3     // Disable zoom snapping
+      },
       tiles: [
         {
           urlTemplate: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
@@ -44,6 +56,15 @@ export default function extendLeafletModel(echarts) {
         },
       ],
       layerControl: {},
+      maxZoom: 15
+    },
+
+    /**
+     * Get the maximum supported zoom level
+     * @return {number}
+     */
+    getMaxZoom() {
+      return this.option.maxZoom;
     },
   });
 }

src/js/netjsongraph.config.js

@@ -238,7 +238,7 @@ const NetJSONGraphDefaultConfig = {
         "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
       options: {
         minZoom: 3,
-        maxZoom: 32,
+        maxZoom: 15,
         attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,
          tiles offered by <a href="https://www.mapbox.com">Mapbox</a>`,
       },

src/js/netjsongraph.render.js

@@ -1,4 +1,5 @@
 import * as echarts from "echarts/lib/echarts";
+import {ScatterChart} from "echarts/charts";
 import "echarts/lib/chart/graph";
 import "echarts/lib/chart/effectScatter";
 import "echarts/lib/chart/lines";
@@ -78,6 +79,7 @@ class NetJSONGraphRender {
       configs.echartsOption,
     );
 
+    echarts.use([ScatterChart]);
     echartsLayer.setOption(self.utils.deepMergeObj(commonOption, customOption));
     echartsLayer.on(
       "click",