Fix: Restrict Map Zoom Levels to Supported Range

examples/load_data_geo_extent/index.html

@@ -72,11 +72,13 @@
     <script type="text/javascript">
       const map = new NetJSONGraph("http://localhost:3000/api/data/?page=1", {
         render: "map",
-        maxPointsFetched: 35,
         // set map initial state.
+        maxPointsFetched: 35,
         mapOptions: {
           center: [46.86764405052012, 19.675998687744144],
           zoom: 5,
+          maxZoom: 18,
+          zoomControl: true,
           nodeConfig: {
             label: {
               offset: [0, -10],

src/js/netjsongraph.config.js

@@ -33,6 +33,8 @@ const NetJSONGraphDefaultConfig = {
   svgRender: false,
   switchMode: false,
   maxPointsFetched: 10000,
+  maxZoom : 18,
+  minZoom : 3,
   loadMoreAtZoomLevel: 9,
   clustering: false,
   clusteringThreshold: 100,
@@ -161,6 +163,7 @@ const NetJSONGraphDefaultConfig = {
   mapOptions: {
     roam: true,
     zoomAnimation: false,
+    maxZoom: 18,
     nodeConfig: {
       type: "scatter",
       label: {
@@ -238,7 +241,7 @@ const NetJSONGraphDefaultConfig = {
         "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
       options: {
         minZoom: 3,
-        maxZoom: 32,
+        maxZoom: 18,
         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

@@ -270,7 +270,7 @@ class NetJSONGraphRender {
     return {
       leaflet: {
         tiles: configs.mapTileConfig,
-        mapOptions: configs.mapOptions,
+        mapOptions: {...configs.mapOptions , maxZoom : configs.maxZoom },
       },
       series,
       ...configs.mapOptions.baseOptions,
@@ -597,6 +597,19 @@ class NetJSONGraphRender {
         }
       });
 
+
+      self.leaflet = self.echarts._api.getCoordinateSystems()[0].getLeaflet();
+      self.leaflet._zoomAnimated = false;
+
+      self.leaflet.options.maxZoom = self.config.maxZoomLevel; 
+
+      self.leaflet.on("zoomend", () => {
+        if (self.leaflet.getZoom() > self.config.maxZoomLevel) {
+          self.leaflet.setZoom(self.config.maxZoomLevel);
+        }
+      });
+
+
       self.leaflet.on("zoomend", () => {
         if (self.leaflet.getZoom() < self.config.disableClusteringAtLevel) {
           const nodeData = self.utils.makeCluster(self);