add map starting pos options

esnet · Sep 9, 2021 · 0a8178c · 0a8178c
1 parent ce14561
commit 0a8178c
Show file tree

Hide file tree

Showing 9 changed files with 2,483 additions and 7 deletions.
diff --git a/dist/components/cr.json b/dist/components/cr.json
diff --git a/dist/module.js b/dist/module.js
diff --git a/dist/module.js.map b/dist/module.js.map
diff --git a/dist/plugin.json b/dist/plugin.json
@@ -33,7 +33,7 @@
       }
     ],
     "version": "1.0.0",
-    "updated": "2021-09-08"
+    "updated": "2021-09-09"
   },
   "dependencies": {
     "grafanaDependency": ">=7.0.0",

diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
@@ -8,7 +8,13 @@ export const Canvas = (props) => {
     const id = props.panelId;
     const map = new NetworkMap('Map_' + id);
 
-    var thisMap = map.renderMap(props.data, props.mapData);
+    var thisMap = map.renderMap(
+      props.data,
+      props.mapData,
+      props.options.startLat,
+      props.options.startLng,
+      props.options.startZoom
+    );
     // SUPER IMPORTANT!!! this removes the old map before rerendering
     return () => {
       thisMap.off();

diff --git a/src/components/RenderMap.js b/src/components/RenderMap.js
@@ -1,7 +1,6 @@
 import * as d3 from './d3.min.js';
 import * as L from 'components/leaflet';
 import * as es from './esmap.js';
-import esnetjson from './esnet.json';
 
 export default class NetworkMap {
   constructor(id) {
@@ -16,7 +15,7 @@ export default class NetworkMap {
    * @param hoverColor - the color the lines will change to when hovering, set in options panel
    */
 
-  renderMap(parsedData, mapData) {
+  renderMap(parsedData, mapData, startLat, startLng, startZoom) {
     if (!parsedData || !mapData) {
       return;
     }
@@ -40,7 +39,7 @@ export default class NetworkMap {
     var map = L.map(this.containerID, {
       zoomAnimation: false,
       fadeAnimation: false,
-    }).setView([42, -105], 4);
+    }).setView([startLat, startLng], startZoom);
     L.tileLayer(
       'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
       {

diff --git a/src/components/esmap.js b/src/components/esmap.js
@@ -211,6 +211,11 @@ function renderEdgeControl(g, data, ref) {
     var ll = ref.leafletMap.containerPointToLatLng(L.point(d3.pointer(evt, mapDiv)));
     d[0] = ll.lat;
     d[1] = ll.lng;
+    //--- this is where we can update json????
+    // newjson = get current json
+    // find point to change
+    // change point to d[0], d[1]
+    // options.mapjson = JSON.stringify(newjson)
     //--- rerender stuff
     ref.update();
   }

diff --git a/src/module.ts b/src/module.ts
@@ -25,6 +25,28 @@ plugin.setPanelOptions((builder) => {
     description: 'The color to highlight nodes that match the query',
     defaultValue: 'red',
   });
+  builder.addNumberInput({
+    path: 'startLat',
+    name: 'Starting Latitude of map',
+    description: 'This will be the center of the map when it loads. (numbers only)',
+    defaultValue: 42,
+  });
+  builder.addNumberInput({
+    path: 'startLng',
+    name: 'Starting Longitude of map',
+    description: 'This will be the center of the map when it loads. (numbers only)',
+    defaultValue: -105,
+  });
+  builder.addSliderInput({
+    path: 'startZoom',
+    name: 'Starting zoom level of map',
+    defaultValue: 5,
+    settings: {
+      min: 1,
+      max: 15,
+      step: 1,
+    },
+  });
   builder.addSelect({
     path: 'srcField',
     name: 'Source Field',

diff --git a/src/types.ts b/src/types.ts
@@ -5,4 +5,7 @@ export interface MapOptions {
   srcField: string;
   dstField: string;
   valField: string;
+  startLat: number;
+  startLng: number;
+  startZoom: number;
 }