Merge c477871 into fb4f79f

README.md

@@ -111,6 +111,12 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
 
   The maximum number of nodes to fetch from the server.
 
+- `loadMoreAtZoomLevel`
+
+  **Default**: `9`
+
+  The zoom level at which more nodes are loaded from the server when the total number of nodes are greater than `maxPointsFetched`. These nodes are loaded based on the geographic extent of the map.
+
 - `dealDataByWorker`
 
   The url to the worker file if you want to deal the data by a worker.
@@ -494,6 +500,21 @@ If you provide `time` field in node or link's properties, it'll display the pars
 
 Demo is [here](https://openwisp.github.io/netjsongraph.js/examples/netjson-dateParse.html).
 
+#### Load more data using geographic extent
+
+You can load more data from the server even when the total number of nodes are greater than `maxPointsFetched` using geographic extent.
+You can specify the zoom level at which more data is loaded by setting `loadMoreDataZoomLevel` in the config.
+
+You can see this in action by executing the following commands:
+
+```
+cd examples/load_data_geo_extent
+
+yarn install
+
+yarn start
+```
+
 #### Render
 
 - `generateGraphOption`
@@ -533,7 +554,20 @@ Demo is [here](https://openwisp.github.io/netjsongraph.js/examples/netjson-dateP
   });
   ```
 
-  You can see the default implementation [here](https://github.com/openwisp/netjsongraph.js/blob/a83c2ee97a2d377f0e4818774ffbbb0dd297ef0e/src/js/netjsongraph.util.js#L29).
+  You can see the default implementation [here](https://github.com/openwisp/netjsongraph.js/blob/fb4f79f716996605efe4423cba7604797b7e71ba/src/js/netjsongraph.util.js#L29).
+
+- `getBBoxData`
+
+  Load data which is inside the current bounding box of the map from the server. Accepts `JSONParam` and `bounds` as the parameter.  
+   If you want to implement your own logic or use a different API, you can override this method using `setUtils` method.
+
+  ```JS
+  graph.setUtils({
+      getBBoxData: async function(JSONParam,bounds){
+          // Implement your custom logic here
+      }
+  });
+  ```
 
 - `isObject`
 

examples/load_data_geo_extent/assets/netjsongraph-theme.css

@@ -0,0 +1,75 @@
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+  background: rgba(217, 79, 52, 0.85) !important;
+  color: #fff !important;
+}
+
+.leaflet-control-layers {
+  background: rgba(217, 79, 52, 0.85) !important;
+  color: #fff !important;
+}
+
+.switch-wrap {
+  color: #fff;
+}
+
+.switch-wrap label {
+  border: 1px solid #dfdfdf;
+  background: #ffffff;
+}
+
+.switch-wrap label::before {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
+  background-color: #fff;
+}
+
+.switch-wrap input[type="checkbox"]:checked + label {
+  background: grey;
+}
+
+.njg-date {
+  color: #fff;
+}
+
+.njg-selectIcon {
+  background: rgba(217, 79, 52, 0.85);
+  color: #ffffff;
+}
+
+.njg-searchBtn {
+  background-color: white;
+}
+
+.njg-sideBar {
+  background-color: #fff;
+}
+
+.sideBarHandle {
+  background: rgba(217, 79, 52, 0.85);
+}
+
+.sideBarHandle::before {
+  color: #fff;
+}
+
+.njg-metaData,
+.njg-infoContainer {
+  background-color: inherit;
+}
+
+.njg-tooltip {
+  background: #fff !important;
+  border: none !important;
+}
+
+.njg-tooltip-key,
+.njg-tooltip-value {
+  color: #000;
+}
+
+@media only screen and (max-width: 850px) {
+  .njg-sideBar {
+    background: rgba(255, 255, 255, 0.96);
+    color: #000;
+  }
+}