[feature] Cluster geojson data

README.md

@@ -204,7 +204,7 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
 
   The `nodeSize` property is used to customize the size of the nodes.
 
-  The `clusterConfig` property is used to customize the clusters. You can pass any valid [Echarts options](https://echarts.apache.org/en/option.html#series-scatter.data) in `clusterConfig`.
+  The `clusterConfig` property is used to customize the clusters. You can pass any valid [Echarts options](https://echarts.apache.org/en/option.html#series-scatter.data) in `clusterConfig`. If you are using GeoJSON data, you can customize the cluster styles by using the CSS classes `marker-cluster` and `.marker-cluster-small`.
 
   `linkConfig` deals with the configuration of the links. You can pass any valid [Echarts options](https://echarts.apache.org/en/option.html#series-lines) in `linkConfig`.
 

package.json

@@ -43,6 +43,7 @@
     "@types/jest": "^28.1.6",
     "acorn": "^8.7.1",
     "coveralls": "^3.1.1",
+    "css-loader": "^6.7.1",
     "eslint": "^8.18.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
@@ -54,6 +55,7 @@
     "jest-environment-jsdom": "^28.1.1",
     "lint-staged": "^13.0.2",
     "prettier": "^2.7.1",
+    "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.3",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
@@ -64,6 +66,7 @@
     "echarts-gl": "^2.0.8",
     "kdbush": "^3.0.0",
     "leaflet": "^1.8.0",
+    "leaflet.markercluster": "^1.5.3",
     "zrender": "^5.3.2"
   }
 }

src/css/netjsongraph-theme.css

@@ -67,6 +67,18 @@
   color: #000;
 }
 
+.marker-cluster div {
+  color: #fff;
+}
+
+.marker-cluster-small {
+  background-color: unset !important;
+}
+
+.marker-cluster-small div {
+  background-color: rgba(21, 102, 169, 0.8) !important;
+}
+
 @media only screen and (max-width: 850px) {
   .njg-sideBar {
     background: rgba(255, 255, 255, 0.96);

src/js/netjsongraph.render.js

@@ -6,13 +6,15 @@ import "echarts/lib/component/tooltip";
 import "echarts/lib/component/title";
 import "echarts/lib/component/toolbox";
 import "echarts/lib/component/legend";
+import L from "leaflet/dist/leaflet";
+import "leaflet.markercluster";
+import "leaflet.markercluster/dist/MarkerCluster.css";
+import "leaflet.markercluster/dist/MarkerCluster.Default.css";
 
 import "zrender/lib/svg/svg";
 
 import "../../lib/js/echarts-gl.min";
 
-import L from "leaflet/dist/leaflet";
-
 class NetJSONGraphRender {
   /**
    * @function
@@ -353,12 +355,23 @@ class NetJSONGraphRender {
     );
 
     if (self.type === "geojson") {
-      self.leaflet.geoJSON = L.geoJSON(self.data, self.config.geoOptions).addTo(
-        self.leaflet,
-      );
+      self.leaflet.geoJSON = L.geoJSON(self.data, self.config.geoOptions);
+
+      if (self.config.clustering) {
+        self.leaflet.markerClusterGroup = L.markerClusterGroup({
+          showCoverageOnHover: false,
+          spiderfyOnMaxZoom: false,
+          maxClusterRadius: self.config.clusterRadius,
+          disableClusteringAtZoom: self.config.disableClusteringAtLevel - 1,
+        }).addTo(self.leaflet);
+        self.leaflet.markerClusterGroup.addLayer(self.leaflet.geoJSON);
+      } else {
+        self.leaflet.geoJSON.addTo(self.leaflet);
+      }
     }
 
     if (
+      self.type === "netjson" &&
       self.config.clustering &&
       self.config.clusteringThreshold < JSONData.nodes.length
     ) {

webpack.config.js

@@ -17,6 +17,14 @@ module.exports = (env, argv) => ({
       }),
     ],
   },
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
   devServer: {
     static: "./",
     historyApiFallback: true,