Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overlay image can now be refreshed with the dashboard #99

Merged
merged 1 commit into from
May 21, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!)
Expand Down
4 changes: 4 additions & 0 deletions src/partials/editor.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
12 changes: 10 additions & 2 deletions src/worldmap_ctrl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ const panelDefaults = {
overlayOpacity: 0.5,
overlayRangeLatitude: '0,10',
overlayRangeLongitude: '0,20',
enableReloadOverlay: false,
clickthroughUrl: '',
clickthroughOptions: {
windowName: null,
Expand Down Expand Up @@ -271,6 +272,10 @@ export default class WorldmapCtrl extends MetricsPanelCtrl {
) {
this.loadLocationData(true);
}

if (this.panel.enableOverlay && this.panel.enableReloadOverlay) {
this.refreshOverlay();
}
}

onDataSnapshotLoad(snapshotData) {
Expand Down Expand Up @@ -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();
}

Expand Down