Initial working marker display in shadow dom

public-report/template/status-by-id.html

@@ -2,7 +2,8 @@
 
 {{define "title"}}Status of report {{.Report.ID|publicReportID}}{{end}}
 {{define "extraheader"}}
-<script src="/static/js/map-single-point.js"></script>
+<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
+<script src="/static/js/map-with-markers.js"></script>
 <style>
 .timeline {
 	border-left: 3px solid #dee2e6;
@@ -39,6 +40,25 @@
 	font-size: 1rem;
 }
 </style>
+<script>
+const GEOJSON_LOCATION = {{.Report.Location|json}};
+const GEOJSON_IMAGE_LOCATIONS = [
+	{{ range .Report.Images }}
+	{{ .Location|json }},
+	{{ end }}
+];
+function onLoad() {
+	const map = document.querySelector("map-with-markers");
+	map.addEventListener("load", (event) => {
+		map.jumpTo({
+			center: GEOJSON_LOCATION.coordinates,
+			zoom: 14,
+		});
+		map.addMarker(GEOJSON_LOCATION.coordinates, "#FF0000");
+	});
+}
+document.addEventListener("DOMContentLoaded", onLoad);
+</script>
 {{end}}
 {{define "content"}}
 <div class="container my-4">
@@ -101,7 +121,9 @@
 			<h5 class="mb-0"><i class="fas fa-history me-2"></i>Report Detail</h5>
 		</div>
 		<div class="card-body">
-			<p><strong>Foo:</strong>Bar</p>
+			{{ if not (eq .Report.Comments "") }}
+			<p><strong>Comments:</strong>{{ .Report.Comments }}</p>
+			{{ end }}
 		</div>
 	</div>
 
@@ -111,10 +133,9 @@
 			<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Location Map</h5>
 		</div>
 		<div class="card-body p-0">
-			<map-single-point
+			<map-with-markers
 				api-key="{{ .MapboxToken }}"
-				geojson="{{ .Report.Location }}"
-				zoom="14"></map-single-point>
+				zoom="14"/>
 		</div>
 	</div>
 
@@ -134,6 +155,7 @@
 	</div>
 
 	<!-- History Timeline -->
+	<!--
 	<div class="card">
 		<div class="card-header bg-success text-white">
 			<h5 class="mb-0"><i class="fas fa-history me-2"></i>Request History</h5>
@@ -163,5 +185,6 @@
 			</div>
 		</div>
 	</div>
+	-->
 </div>
 {{end}}