Add initial map for showing ArcGIS tiles

html/static/js/map-arcgis-tile.js

@@ -0,0 +1,148 @@
+// A map that can show ArcGIS map tiles
+class MapArcgisTile extends HTMLElement {
+	constructor() {
+		super();
+
+		// Create a shadow DOM
+		this.attachShadow({ mode: "open" });
+
+		// Initial render
+		this.render();
+
+		this._map = null;
+		this._markers = [];
+	}
+
+	// Lifecycle: when element is added to the DOM
+	connectedCallback() {
+		// Initialize the map when the element is added to the DOM
+		setTimeout(() => this._initializeMap(), 0);
+	}
+
+	disconnectedCallback() {
+		if (this._map) {
+			this._map.remove();
+		}
+	}
+
+	_initializeMap() {
+		const arcgis_access_token = this.getAttribute("arcgis-access-token");
+		const latitude = parseFloat(this.getAttribute("latitude"));
+		const longitude = parseFloat(this.getAttribute("longitude"));
+		const organization_id = Number(this.getAttribute("organization-id") || 0);
+		const tegola = this.getAttribute("tegola");
+
+		const mapElement = this.shadowRoot.querySelector("#map");
+		this._map = new maplibregl.Map({
+			center: [longitude, latitude],
+			container: mapElement,
+			style: "https://tiles.stadiamaps.com/styles/osm_bright.json",
+			zoom: 22,
+		});
+		/*
+		const basemap_style = maplibreArcGIS.BasemapStyle.applyStyle(this._map, {
+			style: "arcgis/light-gray",
+			token: arcgis_access_token,
+		});
+		*/
+		this._map.on("load", () => {
+			console.log("map-arcgis-tile loaded");
+			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",
+					},
+				});
+			}
+			/*
+			if (arcgis_access_token != "") {
+				this._map.addSource("flyover", {
+					type: "raster",
+					tiles: [
+						"https://tiles.arcgis.com/tiles/pV7SH1EgRc6tpxlJ/arcgis/rest/services/TrimmedFlyover2025/MapServer/tile/{z}/{y}/{x}?token=" + arcgis_access_token,
+					],
+				});
+				console.log("added arcgis tile source");
+				this._map.addLayer({
+					id: "flyover-layer",
+					source: "flyover",
+					type: "raster",
+				});
+				console.log("added arcgis tile layer");
+			}
+			*/
+			this.dispatchEvent(new CustomEvent("load"), {
+				bubbles: true,
+				composed: true, // Allows event to cross shadow DOM boundary
+				detail: {
+					map: this,
+				},
+			});
+		});
+	}
+
+	// Initial render of component
+	render() {
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import url("//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css");
+				#map {
+					height: 100%;
+					width: 100%;
+				}
+			</style>
+			
+			<div id="map"></div>
+		`;
+	}
+
+	addLayer(a) {
+		return this._map.addLayer(a);
+	}
+	addSource(a, b) {
+		return this._map.addSource(a, b);
+	}
+	jumpTo(args) {
+		return this._map.jumpTo(args);
+	}
+	on(a, b) {
+		return this._map.on(a, b);
+	}
+	once(a, b) {
+		return this._map.once(a, b);
+	}
+	queryRenderedFeatures(a) {
+		return this._map.queryRenderedFeatures(a);
+	}
+
+	FitBounds(bounds, options) {
+		return this._map.fitBounds(bounds, options);
+	}
+	SetLayoutProperty(layout, property, value) {
+		return this._map.setLayoutProperty(layout, property, value);
+	}
+	SetMarkers(markers) {
+		console.log("Setting map markers", markers);
+		this._markers.forEach((marker) => marker.remove());
+		this._markers = markers.map((m) => {
+			return new maplibregl.Marker({
+				color: "#FF0000",
+				draggable: false,
+			})
+				.setLngLat([m.longitude, m.latitude])
+				.addTo(this._map);
+		});
+	}
+}
+
+customElements.define("map-arcgis-tile", MapArcgisTile);

html/template/sync/intelligence-root.html

@@ -6,11 +6,13 @@
 		type="text/javascript"
 		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
 	></script>
+	<script src="/static/js/map-arcgis-tile.js"></script>
 	<script src="/static/js/map-multipoint.js"></script>
 	<script
 		defer
 		src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
 	></script>
+	<script src="https://unpkg.com/@esri/maplibre-arcgis@1.1.0/dist/umd/maplibre-arcgis.min.js"></script>
 
 	<script>
 		// Return two points defining a bounding box for the given points
@@ -510,6 +512,26 @@
 										</button>
 									</div>
 								</div>
+								<div class="card border">
+									<div class="card-body">
+										<template
+											x-for="signal in selectedSignals"
+											:key="signal.id"
+										>
+											<div class="map-container">
+												<map-arcgis-tile
+													class="map"
+													arcgis-access-token="{{ .C.ArcgisAccessToken }}"
+													organization-id="{{ .Organization.ID }}"
+													tegola="{{ .URL.Tegola }}"
+													:latitude="signal.location.latitude"
+													:longitude="signal.location.longitude"
+												>
+												</map-arcgis-tile>
+											</div>
+										</template>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>

scss/sync/intelligence.scss

@@ -36,3 +36,7 @@
 .selected {
 	background-color: $info;
 }
+.map {
+	width: 100%;
+	height: 100%;
+}