Add image overlay option (#84)

Add image overlay feature, with tests and documentation.

Author: jreyesr

README.md

@@ -277,6 +277,28 @@ If one value is specified then two colors are used. For example, if the threshol
 
 The threshold field also accepts 2 or more comma-separated values. For example, if you have 2 values that represents 3 ranges that correspond to the three colors. For example: if the thresholds are 70, 90 then the first color represents < 70, the second color represents between 70 and 90 and the third color represents > 90.
 
+### Image overlay
+
+Optionally, you can show an image over the base map (but below the data points). This could be useful, for example, to show a more detailed/up-to-date image of the area of interest, in case the map provider only has old or low-resolution images. See below for an example of displaying interpolated sensor data (for example, temperatures in a field while only knowing the temperatures at a few sensors).
+
+![Image overlay example](https://raw.githubusercontent.com/panodata/grafana-map-panel/develop/src/images/overlay_example.png)
+
+**Enable overlay**
+
+Show/hide the overlay. 
+
+**Overlay URL**
+
+The URL where the image is available. Please notice that only URLs can be used (no local files!)
+
+**Overlay opacity**
+
+The image overlay's opacity can be controlled (0=completely transparent, 1=completely opaque)
+
+**Latitude and longitude ranges**
+
+Specify the limits of the image in the map. Enter the minimum and maximum latitude, and the minimum and maximum longitude, separated by a comma. These numbers specify the extent of the overlay.
+
 ### CHANGELOG
 
 The latest changes can be found here: [CHANGELOG.md](https://github.com/panodata/grafana-map-panel/blob/master/CHANGELOG.md)

src/images/overlay_example.png

@@ -549,6 +549,48 @@ <h5>Popup labels</h5>
     </div>
 </div>
 
+<div class="gf-form-group">
+    <h5>Custom image overlay</h5>
+    <gf-form-switch class="gf-form" label="Enable" label-class="width-10" checked="ctrl.panel.enableOverlay"
+                    on-change="ctrl.refreshOverlay()">
+    </gf-form-switch>
+    <div class="gf-form" ng-show="ctrl.panel.enableOverlay == true">
+        <label class="gf-form-label width-10">Overlay URL</label>
+        <input type="url" class="input-small gf-form-input width-10" ng-model="ctrl.panel.overlayUrl"
+               ng-change="ctrl.refreshOverlay()"
+               ng-model-onblur/>
+    </div>
+    <div class="gf-form" ng-show="ctrl.panel.enableOverlay == true">
+        <label class="gf-form-label width-10">Overlay opacity</label>
+        <input type="number" step="0.05" class="input-small gf-form-input width-10" 
+               ng-model="ctrl.panel.overlayOpacity" placeholder="0.8"
+               ng-change="ctrl.refreshOverlay()"
+               ng-model-onblur/>
+    </div>
+    <div class="gf-form" ng-show="ctrl.panel.enableOverlay == true">
+        <label class="gf-form-label width-10">
+            Latitude range
+            <i class="grafana-tip fa fa-question-circle"
+               bs-tooltip="'Provide the min and max latitude values, separated by a comma'"></i>
+        </label>
+        <input type="text" class="input-small gf-form-input width-10" 
+               ng-model="ctrl.panel.overlayRangeLatitude" placeholder="0,10"
+               ng-change="ctrl.refreshOverlay()"
+               ng-model-onblur/>
+    </div>
+    <div class="gf-form" ng-show="ctrl.panel.enableOverlay == true">
+        <label class="gf-form-label width-10">
+            Longitude range
+            <i class="grafana-tip fa fa-question-circle"
+               bs-tooltip="'Provide the min and max longitude values, separated by a comma'"></i>
+        </label>
+        <input type="text" class="input-small gf-form-input width-10" 
+               ng-model="ctrl.panel.overlayRangeLongitude" placeholder="0,20"
+               ng-change="ctrl.refreshOverlay()" 
+               ng-model-onblur/>
+    </div>
+</div>
+
 <div class="gf-form-group">
     <h5>Clickthrough links</h5>
     <div class="gf-form">

src/partials/editor.html

@@ -475,6 +475,26 @@ describe('Worldmap', () => {
     });
   });
 
+  describe('when an image overlay is requested', () => {
+    beforeEach(() => {
+      ctrl.panel.enableOverlay = true;
+      ctrl.panel.overlayUrl = 'http://foo.bar/overlay.png';
+      ctrl.panel.overlayRangeLatitude = '0,1.23';
+      ctrl.panel.overlayRangeLongitude = '-2., 3';
+      worldMap.createOverlay();
+    });
+
+    it('should create an overlay layer', () => {
+      expect(worldMap.overlay).toBeDefined();
+      const bounds = worldMap.overlay.getBounds();
+      expect(bounds.getNorth()).toBe(1.23);
+      expect(bounds.getSouth()).toBe(0);
+      expect(bounds.getEast()).toBe(3);
+      expect(bounds.getWest()).toBe(-2);
+      expect(worldMap.overlay._url).toBe('http://foo.bar/overlay.png');
+    });
+  });
+
   describe('when the data has two points at the same spot', () => {
     beforeEach(() => {
       ctrl.data = new DataBuilder()

src/worldmap.test.ts

@@ -29,6 +29,7 @@ export default class WorldMap {
   circles: any[];
   map: any;
   legend: any;
+  overlay: any;
   circlesLayer: any;
 
   constructor(ctrl, mapContainer) {
@@ -164,6 +165,26 @@ export default class WorldMap {
     }
   }
 
+  createOverlay() {
+    // See https://leafletjs.com/reference-1.3.4.html#imageoverlay for example usage
+    const latRange = this.ctrl.settings.overlayRangeLatitude
+        .split(',')
+        .slice(0, 2)
+        .map(x => Number(x)),
+      lngRange = this.ctrl.settings.overlayRangeLongitude
+        .split(',')
+        .slice(0, 2)
+        .map(x => Number(x));
+    var imageBounds = [
+      [latRange[0], lngRange[0]],
+      [latRange[1], lngRange[1]],
+    ];
+    this.overlay = (window as any).L.imageOverlay(this.ctrl.settings.overlayUrl, imageBounds, {
+      opacity: this.ctrl.settings.overlayOpacity,
+    });
+    this.overlay.addTo(this.map);
+  }
+
   needToRedrawCircles(data) {
     console.info(`Data points ${data.length}. Circles on map ${this.circles.length}.`);
 

src/worldmap.ts

@@ -58,6 +58,11 @@ const panelDefaults = {
   ignoreEmptyGeohashValues: false,
   ignoreInvalidGeohashValues: false,
   stickyLabels: false,
+  enableOverlay: false,
+  overlayUrl: '',
+  overlayOpacity: 0.5,
+  overlayRangeLatitude: '0,10',
+  overlayRangeLongitude: '0,20',
   clickthroughUrl: '',
   clickthroughOptions: {
     windowName: null,
@@ -457,6 +462,10 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
         ctrl.map.createLegend();
       }
 
+      if (!ctrl.map.overlay && ctrl.panel.enableOverlay) {
+        ctrl.map.createOverlay();
+      }
+
       ctrl.map.drawCircles();
 
       if (ctrl.mapCenterMoved) {
@@ -540,6 +549,12 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
+  refreshOverlay() {
+    this.map.overlay.remove();
+    this.map.overlay = null;
+    this.render();
+  }
+
   toggleMouseWheelZoom() {
     this.map.setMouseWheelZoom();
     this.render();