Make pool upload map show district border

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"), {

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");

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