Center map on district service area by default

html/static/js/map-multipoint.js

@@ -12,7 +12,6 @@ class MapMultipoint extends HTMLElement {
 		this.render();
 
 		this._map = null;
-		// markers shown on the map. Should be none or 1, generally.
 		this._markers = null;
 	}
 
@@ -28,57 +27,45 @@ class MapMultipoint extends HTMLElement {
 		}
 	}
 
-	// Lifecycle: watch these attributes for changes
-	static get observedAttributes() {
-		return ["api-key", "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 centroid = JSON.parse(this.getAttribute("centroid"));
 		const organization_id = Number(this.getAttribute("organization-id") || 0);
 		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({
+			center: centroid.coordinates,
 			container: mapElement,
-			center: {
-				lat: lat,
-				lng: lng,
-			},
 			style: "https://tiles.stadiamaps.com/styles/osm_bright.json",
-			zoom: zoom,
+		}).fitBounds(bounds, {
+			padding: { top: 10, bottom: 10, left: 10, right: 10 },
 		});
-		/*this._map.addControl(new maplibregl.GeolocateControl({
-			positionOptions: {
-				enableHighAccuracy: true
-			},
-			trackUserLocation: true,
-			showUserHeading: true
-		}));
-		this._map.addControl(new maplibregl.NavigationControl());
-		*/
 		this._map.on("load", () => {
+			if (organization_id != 0) {
+				this._map.addSource("tegola", {
+					type: "vector",
+					tiles: [
+						`${tegola}maps/nidus/{z}/{x}/{y}?id=${organization_id}&organization_id=${organization_id}`,
+					],
+				});
+				this._map.addLayer({
+					id: "service-area",
+					source: "tegola",
+					"source-layer": "service-area-bounds",
+					type: "line",
+					paint: {
+						"line-color": "#f00",
+					},
+				});
+			}
 			this.dispatchEvent(new CustomEvent("load"), {
 				bubbles: true,
 				composed: true, // Allows event to cross shadow DOM boundary

html/template/sync/intelligence-root.html

@@ -413,7 +413,18 @@
 					</div>
 					<div class="card-body">
 						<div class="map-container">
-							<map-multipoint id="map"></map-multipoint>
+							<map-multipoint
+								id="map"
+								centroid="{{ if .Organization.ServiceAreaCentroidGeojson.IsValue }}
+									{{ .Organization.ServiceAreaCentroidGeojson.MustGet|json }}
+								{{ end }}"
+								organization-id="{{ .Organization.ID }}"
+								tegola="{{ .URL.Tegola }}"
+								xmin="{{ .Organization.ServiceAreaXmin.GetOr 0 }}"
+								ymin="{{ .Organization.ServiceAreaYmin.GetOr 0 }}"
+								xmax="{{ .Organization.ServiceAreaXmax.GetOr 0 }}"
+								ymax="{{ .Organization.ServiceAreaYmax.GetOr 0 }}"
+							></map-multipoint>
 						</div>
 
 						<div class="row g-3">