From cd6bbc69a4c5282f364d047663dd490caedc8542 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Tue, 17 Feb 2026 06:05:24 +0000
Subject: [PATCH] Make pool upload map show district border

---
 html/static/js/map-libre-test.js   | 48 ++++++++++--------------------
 html/static/js/map-service-area.js |  1 -
 html/template/sync/pool-by-id.html | 33 +++++++++++++++-----
 sync/pool.go                       | 32 ++++++++++++--------
 4 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/html/static/js/map-libre-test.js b/html/static/js/map-libre-test.js
index f0d455c8..995052ca 100644
--- a/html/static/js/map-libre-test.js
+++ b/html/static/js/map-libre-test.js
@@ -27,45 +27,27 @@ class MapLibreTest extends HTMLElement {
 		}
 	}
 
-	// Lifecycle: watch these attributes for changes
-	static get observedAttributes() {
-		return ["latitude", "longitude", "zoom"];
-	}
-
-	// Lifecycle: respond to attribute changes
-	attributeChangedCallback(name, oldValue, newValue) {
-		// Only handle if map exists and values actually changed
-		if (!this._map || oldValue === newValue) return;
-
-		if (name === "latitude" || name === "longitude") {
-			if (this.hasAttribute("latitude") && this.hasAttribute("longitude")) {
-				const lat = Number(this.getAttribute("latitude"));
-				const lng = Number(this.getAttribute("longitude"));
-				this._map.setCenter([lat, lng]);
-			}
-		}
-
-		if (name === "zoom") {
-			this._map.setZoom(Number(newValue));
-		}
-	}
-
 	_initializeMap() {
-		const apiKey = this.getAttribute("api-key");
-		const lat = Number(this.getAttribute("latitude") || 36.2);
-		const lng = Number(this.getAttribute("longitude") || -119.2);
-		const mapElement = this.shadowRoot.querySelector("#map");
+		const centroid = JSON.parse(this.getAttribute("centroid"));
+		const organization_id = this.getAttribute("organization-id");
 		const tegola = this.getAttribute("tegola");
-		const zoom = Number(this.getAttribute("zoom") || 15);
+		const xmin = parseFloat(this.getAttribute("xmin"));
+		const ymin = parseFloat(this.getAttribute("ymin"));
+		const xmax = parseFloat(this.getAttribute("xmax"));
+		const ymax = parseFloat(this.getAttribute("ymax"));
+		const bounds = [
+			[xmin, ymin],
+			[xmax, ymax],
+		];
+
+		const mapElement = this.shadowRoot.querySelector("#map");
 
 		this._map = new maplibregl.Map({
 			container: mapElement,
-			center: {
-				lat: lat,
-				lng: lng,
-			},
+			center: centroid.coordinates,
 			style: "https://tiles.stadiamaps.com/styles/alidade_smooth.json", // Style URL; see our documentation for more options
-			zoom: zoom,
+		}).fitBounds(bounds, {
+			padding: { top: 10, bottom: 10, left: 10, right: 10 },
 		});
 		this._map.on("load", () => {
 			this.dispatchEvent(new CustomEvent("load"), {
diff --git a/html/static/js/map-service-area.js b/html/static/js/map-service-area.js
index 503ff6d3..eb1a4a25 100644
--- a/html/static/js/map-service-area.js
+++ b/html/static/js/map-service-area.js
@@ -28,7 +28,6 @@ class MapServiceArea extends HTMLElement {
 	}
 
 	_initializeMap() {
-		const apiKey = this.getAttribute("api-key");
 		const centroid = JSON.parse(this.getAttribute("centroid"));
 		const csv_file = this.getAttribute("csv-file");
 		const organization_id = this.getAttribute("organization-id");
diff --git a/html/template/sync/pool-by-id.html b/html/template/sync/pool-by-id.html
index dcc24c72..d54b5ee2 100644
--- a/html/template/sync/pool-by-id.html
+++ b/html/template/sync/pool-by-id.html
@@ -8,8 +8,8 @@
 	></script>
 	<script src="/static/js/map-libre-test.js"></script>
 	<script>
-const CSV_FILE_ID={{ .CSVFileID }};
-const ORG_ID={{ .User.Organization.ID }}
+const CSV_FILE_ID={{.CSVFileID}};
+const ORG_ID={{.Organization.ID}};
 function handleShowIssuesOnly() {
 	const checkboxShowIssuesOnly = document.getElementById("showIssuesOnly");
 	const allRows = document.querySelectorAll('tr');
@@ -28,16 +28,16 @@ function handleShowIssuesOnly() {
 function onLoad() {
 	const map = document.querySelector("map-libre-test");
 	map.addEventListener("load", (event) => {
-		map.addSource('tegola-nidus-fileupload', {
+		map.addSource('tegola-nidus', {
 			'type': 'vector',
 			'tiles': [
-				`{{.URL.Tegola}}maps/fileupload/{z}/{x}/{y}?csv_file=${CSV_FILE_ID}&organization_id=${ORG_ID}`
+				`{{.URL.Tegola}}maps/nidus/{z}/{x}/{y}?csv_file=${CSV_FILE_ID}&id=${ORG_ID}`
 			]
 		});
 		map.addLayer({
 			'id': 'pool',
-			'source': 'tegola-nidus-fileupload',
-			'source-layer': 'pool',
+			'source': 'tegola-nidus',
+			'source-layer': 'fileupload-pool',
 			'type': 'circle',
 			'paint': {
 				'circle-color': "#91b979",
@@ -46,6 +46,15 @@ function onLoad() {
 				'circle-stroke-color': "#7aab5f"
 			}
 		});
+		map.addLayer({
+			"id": "clear-service-area",
+			"source": "tegola-nidus",
+			"source-layer": "service-area-bounds",
+			"type": "line",
+			"paint": {
+				"line-color": "#f00"
+			}
+		});
 	});
 
 	const checkboxShowIssuesOnly = document.getElementById("showIssuesOnly");
@@ -110,7 +119,17 @@ document.addEventListener('DOMContentLoaded', onLoad);
 		</div>
 
 		<div class="card mb-4">
-			<map-libre-test></map-libre-test>
+			<map-libre-test
+				centroid="{{ if .Organization.ServiceAreaCentroidGeojson.IsValue }}
+					{{ .Organization.ServiceAreaCentroidGeojson.MustGet|json }}
+				{{ end }}"
+				organization-id="{{ .Organization.ID }}"
+				xmin="{{ .Organization.ServiceAreaXmin.GetOr 0 }}"
+				ymin="{{ .Organization.ServiceAreaYmin.GetOr 0 }}"
+				xmax="{{ .Organization.ServiceAreaXmax.GetOr 0 }}"
+				ymax="{{ .Organization.ServiceAreaYmax.GetOr 0 }}"
+			></map-libre-test>
+			const CENTROID=;
 		</div>
 		<div class="card mb-4">
 			<div
diff --git a/sync/pool.go b/sync/pool.go
index d22f07f1..3827a60d 100644
--- a/sync/pool.go
+++ b/sync/pool.go
@@ -5,6 +5,7 @@ import (
 	"net/http"
 	"strconv"
 
+	"github.com/Gleipnir-Technology/nidus-sync/db"
 	"github.com/Gleipnir-Technology/nidus-sync/db/models"
 	"github.com/Gleipnir-Technology/nidus-sync/html"
 	"github.com/Gleipnir-Technology/nidus-sync/platform"
@@ -12,11 +13,12 @@ import (
 	"github.com/go-chi/chi/v5"
 )
 
-type ContentPoolDetail struct {
-	CSVFileID int32
-	Upload    platform.UploadPoolDetail
-	URL       ContentURL
-	User      User
+type contentPoolDetail struct {
+	CSVFileID    int32
+	Organization *models.Organization
+	Upload       platform.UploadPoolDetail
+	URL          ContentURL
+	User         User
 }
 type ContentPoolList struct {
 	Uploads []platform.PoolUpload
@@ -61,12 +63,17 @@ func getPoolUpload(w http.ResponseWriter, r *http.Request, u *models.User) {
 	html.RenderOrError(w, "sync/pool-csv-upload.html", data)
 }
 func getPoolUploadByID(w http.ResponseWriter, r *http.Request, u *models.User) {
-	userContent, err := contentForUser(r.Context(), u)
+	ctx := r.Context()
+	userContent, err := contentForUser(ctx, u)
 	if err != nil {
 		respondError(w, "Failed to get user", err, http.StatusInternalServerError)
 		return
 	}
-	ctx := r.Context()
+	org, err := u.Organization().One(ctx, db.PGInstance.BobDB)
+	if err != nil {
+		respondError(w, "Failed to get organization", err, http.StatusInternalServerError)
+		return
+	}
 	file_id_str := chi.URLParam(r, "id")
 	file_id, err := strconv.ParseInt(file_id_str, 10, 32)
 	if err != nil {
@@ -78,11 +85,12 @@ func getPoolUploadByID(w http.ResponseWriter, r *http.Request, u *models.User) {
 		respondError(w, "Failed to get pool", err, http.StatusInternalServerError)
 		return
 	}
-	data := ContentPoolDetail{
-		CSVFileID: int32(file_id),
-		Upload:    detail,
-		URL:       newContentURL(),
-		User:      userContent,
+	data := contentPoolDetail{
+		CSVFileID:    int32(file_id),
+		Organization: org,
+		Upload:       detail,
+		URL:          newContentURL(),
+		User:         userContent,
 	}
 	html.RenderOrError(w, "sync/pool-by-id.html", data)
 }