From 44970059e94bd8f187943f45e0025731c40b03c2 Mon Sep 17 00:00:00 2001
From: jreyesr <jreyesr@users.noreply.github.com>
Date: Wed, 19 May 2021 09:21:23 -0500
Subject: [PATCH] Overlay image can now be refreshed with the dashboard

---
 README.md                |  6 ++++++
 src/partials/editor.html |  4 ++++
 src/worldmap_ctrl.ts     | 12 ++++++++++--
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 9ca2ceb..897496c 100644
--- a/README.md
+++ b/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!)
diff --git a/src/partials/editor.html b/src/partials/editor.html
index c862ec7..975dde0 100644
--- a/src/partials/editor.html
+++ b/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"
diff --git a/src/worldmap_ctrl.ts b/src/worldmap_ctrl.ts
index ae4a80f..00828e5 100644
--- a/src/worldmap_ctrl.ts
+++ b/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();
   }