Add zoom-to-bounding-box

dist/plugin.json

@@ -32,8 +32,8 @@
         "path": "img/slopegraph.png"
       }
     ],
-    "version": "1.2.7",
-    "updated": "2022-10-05"
+    "version": "1.3.0",
+    "updated": "2022-10-26"
   },
   "dependencies": {
     "grafanaDependency": ">=7.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "esnet-networkmap-panel",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "description": "Network Map Panel",
   "repository": "https://github.com/esnet/grafana-esnet-networkmap-panel",
   "scripts": {

src/MapPanel.tsx

@@ -19,6 +19,7 @@ export class MapPanel extends Component<Props> {
     this.lastOptions = this.props.options;
     this.theme = createTheme();
     PubSub.subscribe('returnMapCenterAndZoom', this.updateCenter);
+    PubSub.subscribe('returnMapViewport', this.updateMapViewport);
   }
 
   updateCenter = (centerData) => {
@@ -28,6 +29,21 @@ export class MapPanel extends Component<Props> {
     this.props.onOptionsChange({ ...this.props.options, startLat, startLng, startZoom });
   };
 
+  updateMapViewport = (viewportData) => {
+    const coordinates = viewportData.coordinates;
+    const viewportTopLeftLat = coordinates.getNorth().toFixed(2);
+    const viewportTopLeftLng = coordinates.getWest().toFixed(2);
+    const viewportBottomRightLat = coordinates.getSouth().toFixed(2);
+    const viewportBottomRightLng = coordinates.getEast().toFixed(2);
+    this.props.onOptionsChange({
+      ...this.props.options,
+      viewportTopLeftLat,
+      viewportTopLeftLng,
+      viewportBottomRightLat,
+      viewportBottomRightLng,
+    });
+  };
+
   // A function to update the map jsons in the Edit panel based on the current map state
   // Used in esmap.js
   updateMapJson = (mapData) => {
@@ -133,7 +149,7 @@ export class MapPanel extends Component<Props> {
       resolvedLat: 0,
       resolvedLng: 0,
     };
-    if (this.props.options.mapCenterFromVars) {
+    if (this.props.options.initialViewStrategy === 'variables') {
       var frames: any[];
       frames = data.series.map((series) => {
         return new DataFrameView(series);

src/components/MapCanvas.component.js

@@ -83,6 +83,14 @@ export class MapCanvas extends BindableHTMLElement {
         })
       } 
     })());
+    PubSub.subscribe("getMapViewport", (() => {
+      var self = this;
+      return () => {
+        PubSub.publish("returnMapViewport", {
+          coordinates: self.map.leafletMap.getBounds()
+        })
+      } 
+    })());
   }
 
   get topology() {
@@ -254,6 +262,15 @@ export class MapCanvas extends BindableHTMLElement {
     this.width = newDimensions.width;
     this.height = newDimensions.height;
     this.leafletMap && this.leafletMap.invalidateSize();
+    if(this.leafletMap && this._options.initialViewStrategy === 'viewport'){
+      this.leafletMap.fitBounds(L.latLngBounds(L.latLng(
+        this._options.viewportTopLeftLat,
+        this._options.viewportTopLeftLng),
+      L.latLng(
+        this._options.viewportBottomRightLat,
+        this._options.viewportBottomRightLng)
+      ))
+    }
     this.render();
     this.sideBar && this.sideBar.render();
   }
@@ -301,6 +318,15 @@ export class MapCanvas extends BindableHTMLElement {
             maplayers.LABELS[this._options.labelLayer].url, 
             maplayers.LABELS[this._options.labelLayer].attributes).addTo(this.leafletMap);
         }
+        if(this._options.initialViewStrategy === 'viewport'){
+          this.leafletMap.fitBounds(L.latLngBounds(L.latLng(
+            this._options.viewportTopLeftLat,
+            this._options.viewportTopLeftLng),
+          L.latLng(
+            this._options.viewportBottomRightLat,
+            this._options.viewportBottomRightLng)
+          ))
+        }
         L.svg({ clickable: true }).addTo(this.leafletMap); // we have to make the svg layer clickable
     }
     return this.leafletMap;

src/components/ViewportCoordinateButton.tsx

@@ -0,0 +1,11 @@
+import React, { useCallback } from 'react';
+import { StandardEditorProps } from '@grafana/data';
+import { PubSub } from 'components/lib/pubsub.js';
+
+export const ViewportCoordinateButton: React.FC<StandardEditorProps> = ({ value, onChange, item }) => {
+  const getAndSetMapDefaults = useCallback((e: React.SyntheticEvent) => {
+    PubSub.publish('getMapViewport');
+  }, []);
+
+  return <button onClick={getAndSetMapDefaults}>{item.settings?.label || 'Set Viewport Coordinates'}</button>;
+};

src/module.ts

@@ -3,6 +3,7 @@ import { MapOptions } from './types';
 import { MapPanel } from './MapPanel';
 import { CustomTextArea } from './components/CustomTextArea';
 import { CoordinateButton } from './components/CoordinateButton';
+import { ViewportCoordinateButton } from './components/ViewportCoordinateButton';
 
 const FieldsCategory = ['Choose Fields'];
 const LayersCategory = ['Layer options'];
@@ -13,11 +14,21 @@ const QueryCategory = ['Ad-hoc Query Variable Bindings'];
 
 export const plugin = new PanelPlugin<MapOptions>(MapPanel);
 
-function checkBool(settingName: string, value: boolean) {
+function checkBool(settingName: string, value: any) {
   return function (config: MapOptions) {
     return config[settingName] === value;
   };
 }
+function checkInArray(settingName: string, values: any[]) {
+  return function (config: MapOptions) {
+    for (var i = 0; i < values.length; i++) {
+      if (values[i] === config[settingName]) {
+        return true;
+      }
+    }
+    return false;
+  };
+}
 
 async function buildChoices(context: FieldOverrideContext) {
   const options: any[] = [{ value: null, label: '- No Mapping -' }];
@@ -59,16 +70,39 @@ async function buildChoicesWithSuggestions(context: FieldOverrideContext) {
 
 // -------------------- Network Map Panel Options --------------------
 plugin.setPanelOptions((builder) => {
-  builder.addBooleanSwitch({
-    path: 'mapCenterFromVars',
-    name: 'Set Map Center from Variables',
-    defaultValue: false,
+  builder.addSelect({
+    path: 'initialViewStrategy',
+    name: 'Map Initial View Strategy',
+    description: 'Strategy to set the initial center and zoom level of the map',
+    settings: {
+      allowCustomValue: false,
+      options: [],
+      getOptions: async (context: FieldOverrideContext) => {
+        return Promise.resolve([
+          {
+            label: 'Specify Static Center, No zoom on resize',
+            value: 'static',
+          },
+          {
+            label: 'Specify Lat/Lng Viewport, Zoom to fit on resize',
+            value: 'viewport',
+          },
+          {
+            label: 'Set Map Center from Variables, No Zoom on resize',
+            value: 'variables',
+          },
+        ]);
+      },
+    },
   });
+  //////////////
+  // Variables for center and zoom level options
+  //////////////
   builder.addSelect({
     path: 'latitudeVar',
     name: 'Latitude Variable',
     description: 'Select a dashboard or query variable to set initial latitude of map',
-    showIf: checkBool('mapCenterFromVars', true),
+    showIf: checkBool('initialViewStrategy', 'variables'),
     settings: {
       allowCustomValue: false,
       options: [],
@@ -79,20 +113,23 @@ plugin.setPanelOptions((builder) => {
     path: 'longitudeVar',
     name: 'Longitude Variable',
     description: 'Select a dashboard or query variable to set initial latitude of map',
-    showIf: checkBool('mapCenterFromVars', true),
+    showIf: checkBool('initialViewStrategy', 'variables'),
     settings: {
       allowCustomValue: false,
       options: [],
       getOptions: buildChoicesWithSuggestions,
     },
   });
+  //////////////
+  // Static center and zoom level options
+  //////////////
   builder.addCustomEditor({
     id: 'setLatLngZoom',
     path: 'setLatLngZoom',
     name: 'Set Default Latitude / Longitude / Zoom',
     description:
       'Set the default Latitude, Longitude and Zoom level to the current map Latitude, Longitude and Zoom level.',
-    showIf: checkBool('mapCenterFromVars', false),
+    showIf: checkBool('initialViewStrategy', 'static'),
     settings: { label: 'Set Lat/Lng & Zoom' },
     editor: CoordinateButton,
   });
@@ -101,7 +138,7 @@ plugin.setPanelOptions((builder) => {
     path: 'startLat',
     name: 'Starting Latitude of map',
     description: 'This will be the center of the map when it loads. (numbers only)',
-    showIf: checkBool('mapCenterFromVars', false),
+    showIf: checkBool('initialViewStrategy', 'static'),
     defaultValue: 39,
     settings: { useTextarea: true, rows: 1 },
     editor: CustomTextArea,
@@ -111,21 +148,70 @@ plugin.setPanelOptions((builder) => {
     path: 'startLng',
     name: 'Starting Longitude of map',
     description: 'This will be the center of the map when it loads. (numbers only)',
-    showIf: checkBool('mapCenterFromVars', false),
+    showIf: checkBool('initialViewStrategy', 'static'),
     defaultValue: -98,
     settings: { useTextarea: true, rows: 1 },
     editor: CustomTextArea,
   });
   builder.addSliderInput({
     path: 'startZoom',
     name: 'Starting zoom level of map',
+    showIf: checkInArray('initialViewStrategy', ['static', 'variables']),
     defaultValue: 5,
     settings: {
       min: 1,
       max: 15,
       step: 0.5,
     },
   });
+  //////////////
+  // "Viewport" top-left, bottom-right and auto-resize options
+  //////////////
+  builder.addCustomEditor({
+    id: 'setViewport',
+    path: 'setViewport',
+    name: 'Set Zoom Viewport to Current Map View',
+    description: 'Set the top-left Lat & Lng and bottom-right Lat & Lng to the currently displayed map viewport.',
+    showIf: checkBool('initialViewStrategy', 'viewport'),
+    settings: { label: 'Set Viewport Coordinates' },
+    editor: ViewportCoordinateButton,
+  });
+  builder.addCustomEditor({
+    id: 'viewportTopLeftLat',
+    path: 'viewportTopLeftLat',
+    name: 'Initial viewport: Top Left: Latitude',
+    description: 'Zoom viewport: Top, left coordinate, Latitude. (numbers only)',
+    showIf: checkBool('initialViewStrategy', 'viewport'),
+    settings: { useTextarea: true, rows: 1 },
+    editor: CustomTextArea,
+  });
+  builder.addCustomEditor({
+    id: 'viewportTopLeftLng',
+    path: 'viewportTopLeftLng',
+    name: 'Initial viewport: Top Left: Longitude',
+    description: 'Zoom viewport: Top, left coordinate, Longitude. (numbers only)',
+    showIf: checkBool('initialViewStrategy', 'viewport'),
+    settings: { useTextarea: true, rows: 1 },
+    editor: CustomTextArea,
+  });
+  builder.addCustomEditor({
+    id: 'viewportBottomRightLat',
+    path: 'viewportBottomRightLat',
+    name: 'Initial viewport: Bottom Right: Latitude',
+    description: 'Zoom viewport: Bottom, right coordinate, Latitude. (numbers only)',
+    showIf: checkBool('initialViewStrategy', 'viewport'),
+    settings: { useTextarea: true, rows: 1 },
+    editor: CustomTextArea,
+  });
+  builder.addCustomEditor({
+    id: 'viewportBottomRightLng',
+    path: 'viewportBottomRightLng',
+    name: 'Initial viewport: Bottom Right: Longitude',
+    description: 'Zoom viewport: Bottom, right coordinate, Longitude. (numbers only)',
+    showIf: checkBool('initialViewStrategy', 'viewport'),
+    settings: { useTextarea: true, rows: 1 },
+    editor: CustomTextArea,
+  });
 
   builder.addColorPicker({
     path: 'background',

src/types.ts

@@ -3,9 +3,22 @@ export interface MapOptions {
   color1: string;
   color2: string;
   color3: string;
-  mapCenterFromVars: boolean;
+
+  initialViewStrategy: string;
+
   latitudeVar: string;
   longitudeVar: string;
+
+  startLat: number;
+  startLng: number;
+  startZoom: number;
+
+  viewportTopLeftLat: number;
+  viewportTopLeftLng: number;
+  viewportBottomRightLat: number;
+  viewportBottomRightLng: number;
+  viewportZoom: boolean;
+
   showSidebar: boolean;
   showViewControls: boolean;
   showLegend: boolean;
@@ -36,9 +49,6 @@ export interface MapOptions {
   inboundValueFieldL3: string;
   outboundValueFieldL3: string;
   endpointIdL3: string;
-  startLat: number;
-  startLng: number;
-  startZoom: number;
   editMode: boolean;
   legendL1: boolean;
   legendL2: boolean;