[feature] Add support for GeoJSON #116

Closes #116
openwisp · Aug 23, 2022 · 441c123 · 441c123
1 parent 8497add
commit 441c123
Show file tree

Hide file tree

Showing 20 changed files with 524 additions and 40 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
@@ -8,7 +8,6 @@
     <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">

diff --git a/examples/njg-geojson.html b/examples/njg-geojson.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>GeoJSON Example</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/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,
+        },
+      });
+
+      map.render();
+    </script>
+  </body>
+</html>
diff --git a/examples/realtime_update/assets/netjsongraph.css b/examples/realtime_update/assets/netjsongraph.css
@@ -4,6 +4,7 @@
   outline: none;
   box-sizing: border-box;
 }
+
 html,
 body {
   width: 100%;

diff --git a/examples/realtime_update/assets/netjsongraph.min.js b/examples/realtime_update/assets/netjsongraph.min.js
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
@@ -4,6 +4,7 @@
   outline: none;
   box-sizing: border-box;
 }
+
 html,
 body {
   width: 100%;

diff --git a/src/js/netjsongraph.config.js b/src/js/netjsongraph.config.js
@@ -224,6 +224,14 @@ const NetJSONGraphDefaultConfig = {
       },
     },
   ],
+  geoOptions: {
+    style: {
+      fillColor: "#1566a9",
+      weight: 0,
+      fillOpacity: 0.8,
+      radius: 8,
+    },
+  },
   nodeCategories: [],
   linkCategories: [],
 
@@ -253,15 +261,21 @@ 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);
+      }
+
+      if (this.config.showMetaOnNarrowScreens || this.el.clientWidth > 850) {
+        this.gui.metaInfoContainer.style.display = "flex";
+      }
     } else {
-      nodeLinkData = this.utils.linkInfo(data);
+      nodeLinkData = data;
     }
+
     this.gui.getNodeLinkInfo(type, nodeLinkData);
-    if (this.config.showMetaOnNarrowScreens || this.el.clientWidth > 850) {
-      this.gui.metaInfoContainer.style.display = "flex";
-    }
     this.gui.sideBar.classList.remove("hidden");
   },
 
@@ -273,6 +287,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.gui.js b/src/js/netjsongraph.gui.js
@@ -34,11 +34,13 @@ class NetJSONGraphGUI {
     button.classList.add("sideBarHandle");
     button.onclick = () => {
       sideBar.classList.toggle("hidden");
+      const metaInfo = document.querySelector(".njg-metaInfoContainer");
       if (
-        this.self.config.showMetaOnNarrowScreens ||
-        this.self.el.clientWidth > 850
+        (this.self.config.showMetaOnNarrowScreens ||
+          this.self.el.clientWidth > 850) &&
+        metaInfo
       ) {
-        document.querySelector(".njg-metaInfoContainer").style.display = "flex";
+        metaInfo.style.display = "flex";
       }
     };
     this.self.el.appendChild(sideBar);
@@ -156,7 +158,10 @@ class NetJSONGraphGUI {
 
     closeButton.onclick = () => {
       this.nodeLinkInfoContainer.style.display = "none";
-      if (this.metaInfoContainer.style.display === "none") {
+      if (
+        this.metaInfoContainer === null ||
+        this.metaInfoContainer.style.display === "none"
+      ) {
         this.sideBar.classList.add("hidden");
       }
     };

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.createMetaInfoContainer(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.createMetaInfoContainer(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;