Merge ac5dd94 into 1606d69

openwisp · Aug 20, 2022 · d0d63eb · d0d63eb
2 parents 1606d69 + ac5dd94
commit d0d63eb
Show file tree

Hide file tree

Showing 17 changed files with 525 additions and 62 deletions.
diff --git a/README.md b/README.md
@@ -30,8 +30,9 @@ yarn start
 
 netjsongraph.js accepts two arguments.
 
-1. **url (required, string|array)**: URL(s) to fetch the JSON data from.
-   JSON format used internally based on [networkgraph](http://netjson.org/rfc.html#rfc.section.4), but a little different: more occupied property names internally as follows：
+1. **url (required, string|array)**: URL(s) to fetch the JSON data from. It supports both [NetJSON](http://netjson.org) and GeoJSON data formats.
+
+NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc.html#rfc.section.4) but with a slight difference. More occupied property names used internally as follows：
 
 ```JS
 {
@@ -239,6 +240,20 @@ netjsongraph.js accepts two arguments.
   `name` is the name of the category. You can also pass any valid [Echarts options](https://echarts.apache.org/en/option.html#series-graph.lineStyle) in
   `linkStyle`.
 
+- `geoOptions`
+
+  The configuration for the GeoJSON render. It consists of the following properties:
+
+  ```JS
+      geoOptions:{
+         style:{
+             // The style GeoJSON features
+         },
+      }
+  ```
+
+  You can customize the style of GeoJSON features using `style` property. The list of all available properties can be found in the [Leaflet documentation](https://leafletjs.com/reference.html#geojson).
+
 - `onInit`
 
   The callback function executed on initialization of `NetJSONGraph` instance.

diff --git a/dist/netjsongraph.min.js b/dist/netjsongraph.min.js
diff --git a/examples/data/geojson-sample.json b/examples/data/geojson-sample.json
@@ -0,0 +1,94 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "country": "Serbia"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [20.906982421875, 44.36313311380771]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "country": "Austria"
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [13.5791015625, 47.45037978769006],
+            [13.743896484375, 46.31658418182218],
+            [15.875244140625, 46.79253827035982],
+            [17.1826171875, 48.151428143221224],
+            [16.677246093749996, 48.828565527993234],
+            [13.5791015625, 47.45037978769006]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "country": "Bulgaria"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [25.1806640625, 42.97250158602597]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "country": "Romania"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [24.949951171875, 45.920587344733654]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "country": "Greece"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [22.8955078125, 38.71980474264237]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "country": "Switzerland"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [8.1298828125, 47.12995075666307]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "country": "Hungary"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [19.51171875, 47.42808726171425]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "country": "Poland"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [19.423828125, 52.29504228453735]
+      }
+    }
+  ]
+}
diff --git a/examples/netjson-multipleInterfaces.html b/examples/netjson-multipleInterfaces.html
@@ -1,27 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <title>netjsongraph.js: basic example</title>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <!-- theme can be easily customized via css -->
-    <link href="../src/css/netjsongraph-theme.css" rel="stylesheet">
-    <link href="../src/css/netjsongraph.css" rel="stylesheet">
-</head>
-<body>
+    <link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../src/css/netjsongraph.css" rel="stylesheet" />
+  </head>
+  <body>
     <script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
     <script type="text/javascript">
-        /*
+      /*
             The demo is used to show how to deal with the `multiple interfaces` in the NetJSON data.
             We provide a work file to process the data before rendering. 
             This file provides functions to remove dirty data, deduplicate, handle multiple interfaces, add node links, add flatNodes and so on.
             You can also define related files yourself.
         */
-        // `graph` render defaultly.
-        const graph = new NetJSONGraph("./data/netjson-multipleInterfaces.json", {
-            // Asynchronous processing of incoming data formats using WebWorker file.
-            dealDataByWorker: "../src/js/netjsonWorker.js",
-        });
-        graph.render();
+      // `graph` render defaultly.
+      const graph = new NetJSONGraph("./data/netjson-multipleInterfaces.json", {
+        // Asynchronous processing of incoming data formats using WebWorker file.
+        dealDataByWorker: "../src/js/netjsonWorker.js",
+      });
+      graph.render();
     </script>
-</body>
+  </body>
 </html>
diff --git a/examples/njg-geojson.html b/examples/njg-geojson.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>GeoJSON Example</title>
+    <meta charset="utf-8" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
+      crossorigin=""
+    />
+    <!-- theme can be easily customized via css -->
+    <link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../src/css/netjsongraph.css" rel="stylesheet" />
+  </head>
+  <body>
+    <script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
+    <script type="text/javascript">
+      const map = new NetJSONGraph("./data/geojson-sample.json", {
+        render: "map",
+        // set map initial state.
+        mapOptions: {
+          center: [46.86764405052012, 19.675998687744144],
+          zoom: 5,
+        },
+        onReady: function () {
+          this.gui.sideBar.classList.add("hidden");
+        },
+      });
+
+      map.render();
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -153,6 +153,11 @@ <h1>NetJSONGraph.js Example Demos</h1>
           >Append data using arrays</a
         >
       </div>
+      <div class="cards">
+        <a href="./examples/njg-geojson.html" target="_blank"
+          >Geographic map with GeoJSON data</a
+        >
+      </div>
     </main>
   </body>
 </html>
diff --git a/src/css/netjsongraph.css b/src/css/netjsongraph.css
@@ -132,20 +132,3 @@ body {
   width: 35px !important;
   background-size: 20px 20px !important;
 }
-
-.leaflet-zoom-animated {
-  transform-origin: 0 0 !important;
-}
-
-.leaflet-zoom-anim > .leaflet-zoom-animated {
-  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) !important;
-  will-change: transform !important;
-}
-
-.leaflet-zoom-anim > .leaflet-zoom-hide {
-  visibility: hidden !important;
-}
-
-.leaflet-zoom-anim > .leaflet-tile {
-  transition: none !important;
-}
diff --git a/src/js/netjsongraph.config.js b/src/js/netjsongraph.config.js
@@ -139,6 +139,14 @@ const NetJSONGraphDefaultConfig = {
       },
     },
   ],
+  geoOptions: {
+    style: {
+      fillColor: "#1566a9",
+      weight: 0,
+      fillOpacity: 0.8,
+      radius: 8,
+    },
+  },
   nodeCategories: [],
   linkCategories: [],
 
@@ -168,11 +176,16 @@ const NetJSONGraphDefaultConfig = {
    */
   onClickElement(type, data) {
     let nodeLinkData;
-    if (type === "node") {
-      nodeLinkData = this.utils.nodeInfo(data);
+    if (this.type === "netjson") {
+      if (type === "node") {
+        nodeLinkData = this.utils.nodeInfo(data);
+      } else {
+        nodeLinkData = this.utils.linkInfo(data);
+      }
     } else {
-      nodeLinkData = this.utils.linkInfo(data);
+      nodeLinkData = data;
     }
+
     this.gui.getNodeLinkInfo(type, nodeLinkData);
     this.gui.sideBar.classList.remove("hidden");
   },
@@ -185,6 +198,7 @@ const NetJSONGraphDefaultConfig = {
    * @this  {object}        The instantiated object of NetJSONGraph
    *
    */
+  /* istanbul ignore next */
   onReady() {},
 };
 

diff --git a/src/js/netjsongraph.core.js b/src/js/netjsongraph.core.js
@@ -10,9 +10,7 @@ class NetJSONGraph {
    */
   constructor(JSONParam) {
     this.utils = new NetJSONGraphUpdate();
-
     this.config = {...NetJSONGraphDefaultConfig};
-
     this.JSONParam = this.utils.isArray(JSONParam) ? JSONParam : [JSONParam];
   }
 
@@ -64,7 +62,17 @@ class NetJSONGraph {
     this.utils
       .JSONParamParse(JSONParam)
       .then((JSONData) => {
-        this.config.prepareData.call(this, JSONData);
+        if (this.utils.isNetJSON(JSONData)) {
+          this.type = "netjson";
+        } else if (this.utils.isGeoJSON(JSONData)) {
+          this.type = "geojson";
+        } else {
+          throw new Error("Invalid data format!");
+        }
+
+        if (this.type === "netjson") {
+          this.config.prepareData.call(this, JSONData);
+        }
         this.data = JSONData;
 
         if (this.config.dealDataByWorker) {

diff --git a/src/js/netjsongraph.js b/src/js/netjsongraph.js
@@ -14,6 +14,7 @@ class NetJSONGraph {
    * @param {string} JSONParam    The NetJSON file param
    * @param {Object} config
    */
+
   constructor(JSONParam, config) {
     if (config && config.render === "map") {
       config.render = NetJSONGraphRender.prototype.mapRender;
@@ -57,10 +58,6 @@ class NetJSONGraph {
       onRender() {
         this.utils.showLoading.call(this);
         this.gui.init();
-        if (this.config.metadata) {
-          this.gui.createAboutContainer(graph);
-        }
-
         return this.config;
       },
 
@@ -100,10 +97,15 @@ class NetJSONGraph {
        * @return {object}         this.config
        */
       onLoad() {
-        if (this.config.metadata) {
+        if (this.config.metadata && this.type === "netjson") {
+          this.gui.createAboutContainer(graph);
           this.utils.updateMetadata.call(this);
+        } else {
+          this.gui.nodeLinkInfoContainer =
+            this.gui.createNodeLinkInfoContainer();
         }
-        if (this.config.switchMode) {
+
+        if (this.config.switchMode && this.type === "netjson") {
           this.gui.renderModeSelector.onclick = () => {
             if (this.config.render === this.utils.mapRender) {
               this.config.render = this.utils.graphRender;