Overlay image can now be refreshed with the dashboard

Author: jreyesr

README.md

@@ -287,6 +287,12 @@ Optionally, you can show an image over the base map (but below the data points).
 
 Show/hide the overlay. 
 
+**Auto reload overlay**
+
+By default, the overlay image is fetched once, on page load, and never updated. If the overlay image is updated regularly (say, the overlay is generated on another application and then served on a fixed URL), it may be desirable to fetch the image when the dashboard is refreshed. This switch enables it. 
+
+If the overlay image is fixed (e. g., an orthomosaic of the area, taken with a drone), leave this option disabled, as it would cause an additional request on each dashboard reload.
+
 **Overlay URL**
 
 The URL where the image is available. Please notice that only URLs can be used (no local files!)

src/partials/editor.html

@@ -554,6 +554,10 @@ <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>
+    <gf-form-switch class="gf-form" ng-show="ctrl.panel.enableOverlay == true" 
+        label="Auto reload overlay" tooltip="Enable to update the image whenever the dashboard is refreshed" 
+        label-class="width-10" checked="ctrl.panel.enableReloadOverlay">
+    </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"

src/worldmap_ctrl.ts

@@ -63,6 +63,7 @@ const panelDefaults = {
   overlayOpacity: 0.5,
   overlayRangeLatitude: '0,10',
   overlayRangeLongitude: '0,20',
+  enableReloadOverlay: false,
   clickthroughUrl: '',
   clickthroughOptions: {
     windowName: null,
@@ -271,6 +272,10 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
     ) {
       this.loadLocationData(true);
     }
+
+    if (this.panel.enableOverlay && this.panel.enableReloadOverlay) {
+      this.refreshOverlay();
+    }
   }
 
   onDataSnapshotLoad(snapshotData) {
@@ -550,8 +555,11 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
   }
 
   refreshOverlay() {
-    this.map.overlay.remove();
-    this.map.overlay = null;
+    if (this.map) {
+      this.map.overlay?.remove();
+      this.map.overlay = null;
+    }
+
     this.render();
   }