Add flyover data view

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

html/template/sync/communication-root.html

@@ -12,10 +12,6 @@
 	></script>
 	<script src="/static/js/time-relative.js"></script>
 	<script src="/static/js/map-multipoint.js"></script>
-	<script>
-		function onLoad() {}
-		window.addEventListener("load", onLoad);
-	</script>
 	<script>
 		function filterMatches(filter, comm) {
 			return true;

html/template/sync/review/pool.html

@@ -10,8 +10,10 @@
 		defer
 		src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
 	></script>
-	<script src="/static/js/time-relative.js"></script>
+	<script src="https://unpkg.com/@esri/maplibre-arcgis@1.1.0/dist/umd/maplibre-arcgis.min.js"></script>
+	<script src="/static/js/map-arcgis-tile.js"></script>
 	<script src="/static/js/map-multipoint.js"></script>
+	<script src="/static/js/time-relative.js"></script>
 	<script>
 		function formatAddress(a) {
 			if (a == undefined) {
@@ -264,6 +266,16 @@
 						this.submitReview("discarded");
 					}
 				},
+				updatePoolLocation(event, signal_id) {
+					console.log("map click", signal_id, event.detail);
+					const map = event.detail.map;
+					const loc = {
+						latitude: event.detail.lat,
+						longitude: event.detail.lng,
+					};
+					map.SetMarkers([loc]);
+					this.poolLocations[signal_id] = loc;
+				},
 			};
 		}
 	</script>
@@ -484,15 +496,17 @@
 					</div>
 
 					<!-- Aerial Image Placeholder -->
-					<div class="placeholder-box image-placeholder">
-						<div class="text-center">
-							<i class="bi bi-image" style="font-size: 48px;"></i>
-							<p class="mb-0 mt-2">Aerial Pool Image Placeholder</p>
-							<small
-								>Captured:
-								<span x-text="selectedTask?.capturedAt || 'N/A'"></span
-							></small>
-						</div>
+					<div class="map-container">
+						<map-arcgis-tile
+							class="map"
+							arcgis-access-token="{{ .C.ArcgisAccessToken }}"
+							organization-id="{{ .Organization.ID }}"
+							tegola="{{ .URL.Tegola }}"
+							@map-click="updatePoolLocation($event, selectedTask.id)"
+							:latitude="selectedTask?.location.latitude ?? 0"
+							:longitude="selectedTask?.location.longitude ?? 0"
+						>
+						</map-arcgis-tile>
 					</div>
 				</div>
 			</div>

sync/review.go

@@ -4,16 +4,33 @@ import (
 	"context"
 	"net/http"
 
+	"github.com/Gleipnir-Technology/nidus-sync/background"
 	"github.com/Gleipnir-Technology/nidus-sync/db/models"
 	"github.com/Gleipnir-Technology/nidus-sync/html"
 	nhttp "github.com/Gleipnir-Technology/nidus-sync/http"
+	"github.com/rs/zerolog/log"
 )
 
-type contentReviewPool struct{}
+type contentReviewPool struct {
+	ArcgisAccessToken string
+}
 type contentReviewRoot struct{}
 
-func getReviewPool(ctx context.Context, r *http.Request, org *models.Organization, user *models.User) (*html.Response[contentReviewRoot], *nhttp.ErrorWithStatus) {
-	return html.NewResponse("sync/review/pool.html", contentReviewRoot{}), nil
+func getReviewPool(ctx context.Context, r *http.Request, org *models.Organization, user *models.User) (*html.Response[contentReviewPool], *nhttp.ErrorWithStatus) {
+	var oauth_token *models.ArcgisOauthToken
+	var err error
+	var access_token string
+	oauth_token, err = background.GetOAuthForOrg(ctx, org)
+	if err != nil {
+		log.Warn().Err(err).Msg("Failed to get oauth")
+		oauth_token = nil
+		access_token = ""
+	} else {
+		access_token = oauth_token.AccessToken
+	}
+	return html.NewResponse("sync/review/pool.html", contentReviewPool{
+		ArcgisAccessToken: access_token,
+	}), nil
 }
 func getReviewRoot(ctx context.Context, r *http.Request, org *models.Organization, user *models.User) (*html.Response[contentReviewRoot], *nhttp.ErrorWithStatus) {
 	return html.NewResponse("sync/review/root.html", contentReviewRoot{}), nil