diff --git a/html/static/js/map-arcgis-tile.js b/html/static/js/map-arcgis-tile.js index d875428f..b38717ac 100644 --- a/html/static/js/map-arcgis-tile.js +++ b/html/static/js/map-arcgis-tile.js @@ -1,5 +1,6 @@ // A map that can show ArcGIS map tiles class MapArcgisTile extends HTMLElement { + static observedAttributes = ["latitude", "longitude"]; constructor() { super(); @@ -13,6 +14,18 @@ class MapArcgisTile extends HTMLElement { this._markers = []; } + attributeChangedCallback(name, old_value, new_value) { + //console.log("map-arcgis-tile: attribute changed", name, old_value, new_value); + if (name == "latitude" || (name == "longitude" && this._map != null)) { + const latitude = parseFloat(this.getAttribute("latitude")); + const longitude = parseFloat(this.getAttribute("longitude")); + this._map.jumpTo({ + center: [longitude, latitude], + zoom: 19, + }); + } + } + // Lifecycle: when element is added to the DOM connectedCallback() { // Initialize the map when the element is added to the DOM diff --git a/html/template/sync/communication-root.html b/html/template/sync/communication-root.html index 32f9932a..1c1d2045 100644 --- a/html/template/sync/communication-root.html +++ b/html/template/sync/communication-root.html @@ -12,10 +12,6 @@ > - - + + + @@ -484,15 +496,17 @@ -
Aerial Pool Image Placeholder
- Captured: - -