[feature] Show node labels only after a suitable zoom level #148

Closes #148
openwisp · Sep 21, 2022 · a83c2ee · a83c2ee
1 parent 441c123
commit a83c2ee
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -98,6 +98,13 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
 
   Whether to allow switching between graph and map render or not. You can also set it `true` to enable it.
 
+- `showLabelsAtZoomLevel`
+
+  **Default**: `7`
+
+  The zoom level at which the labels are shown. This only works when `render` is set to `map`.
+  In graph mode, the overlapping labels are hidden automatically when zooming.
+
 - `dealDataByWorker`
 
   The url to the worker file if you want to deal the data by a worker.

diff --git a/dist/netjsongraph.min.js b/dist/netjsongraph.min.js
diff --git a/src/js/netjsongraph.config.js b/src/js/netjsongraph.config.js
@@ -33,6 +33,7 @@ const NetJSONGraphDefaultConfig = {
   svgRender: false,
   switchMode: false,
   showMetaOnNarrowScreens: false,
+  showLabelsAtZoomLevel: 7,
   echartsOption: {
     aria: {
       show: true,
@@ -65,6 +66,9 @@ const NetJSONGraphDefaultConfig = {
         color: "#fff",
         position: "top",
       },
+      labelLayout: {
+        hideOverlap: true,
+      },
       force: {
         gravity: 0.1,
         edgeLength: [20, 60],
@@ -101,9 +105,6 @@ const NetJSONGraphDefaultConfig = {
             series: [
               {
                 zoom: 0.7,
-                labelLayout: {
-                  hideOverlap: true,
-                },
               },
             ],
             toolbox: {
@@ -119,9 +120,6 @@ const NetJSONGraphDefaultConfig = {
             series: [
               {
                 zoom: 1,
-                labelLayout: {
-                  hideOverlap: false,
-                },
               },
             ],
             toolbox: {

diff --git a/src/js/netjsongraph.render.js b/src/js/netjsongraph.render.js
@@ -356,6 +356,42 @@ class NetJSONGraphRender {
       );
     }
 
+    if (self.leaflet.getZoom() < self.config.showLabelsAtZoomLevel) {
+      self.echarts.setOption({
+        series: [
+          {
+            label: {
+              show: false,
+            },
+          },
+        ],
+      });
+    }
+
+    self.leaflet.on("zoomend", () => {
+      if (self.leaflet.getZoom() >= self.config.showLabelsAtZoomLevel) {
+        self.echarts.setOption({
+          series: [
+            {
+              label: {
+                show: true,
+              },
+            },
+          ],
+        });
+      } else {
+        self.echarts.setOption({
+          series: [
+            {
+              label: {
+                show: false,
+              },
+            },
+          ],
+        });
+      }
+    });
+
     self.event.emit("onLoad");
     self.event.emit("onReady");
     self.event.emit("renderArray");

diff --git a/test/netjsongraph.spec.js b/test/netjsongraph.spec.js
@@ -32,6 +32,9 @@ describe("NetJSONGraph Specification", () => {
         color: "#fff",
         position: "top",
       },
+      labelLayout: {
+        hideOverlap: true,
+      },
       force: {
         gravity: 0.1,
         edgeLength: [20, 60],
@@ -68,9 +71,6 @@ describe("NetJSONGraph Specification", () => {
             series: [
               {
                 zoom: 0.7,
-                labelLayout: {
-                  hideOverlap: true,
-                },
               },
             ],
             toolbox: {
@@ -86,9 +86,6 @@ describe("NetJSONGraph Specification", () => {
             series: [
               {
                 zoom: 1,
-                labelLayout: {
-                  hideOverlap: false,
-                },
               },
             ],
             toolbox: {