Move map interfaces to common types for sharing

ts/components/CommunicationColumnDetail.vue

@@ -27,17 +27,6 @@
 	height: 400px;
 	width: 100%;
 }
-.photo-thumbnail {
-	width: 100px;
-	height: 100px;
-	object-fit: cover;
-	cursor: pointer;
-	border-radius: 4px;
-	transition: transform 0.2s;
-}
-.photo-thumbnail:hover {
-	transform: scale(1.05);
-}
 </style>
 
 <template>

ts/components/MapMultipoint.vue

@@ -1,6 +1,9 @@
 <style scoped>
-@import url("//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css");
-
+#map {
+	height: 100%;
+	width: 100%;
+	margin-bottom: 10px;
+}
 .map-multipoint {
 	height: 100%;
 	width: 100%;
@@ -17,22 +20,16 @@
 </template>
 
 <script setup lang="ts">
+import "maplibre-gl/dist/maplibre-gl.css";
 import {
 	onMounted,
 	onUnmounted,
 	ref,
 	watch,
 } from "vue";
+import { Bounds, Marker } from "@/types";
 import maplibregl from "maplibre-gl";
 
-interface Point {
-	lat: Number;
-	lng: Number;
-}
-interface Bounds {
-	min: Point;
-	max: Point;
-}
 interface Emits {
 	(e: "load"): void;
 }
@@ -42,13 +39,6 @@ interface Props {
 	"organization-id": int;
 	tegola: string;
 }
-interface Marker {
-	color: string;
-	draggable: boolean;
-	id: string;
-	lng: Number;
-	lat: Number;
-}
 const emit = defineEmits<Emits>();
 const props = withDefaults(defineProps<Props>(), {
 	// default bounds cover a bunch of the continental US
@@ -105,7 +95,7 @@ onMounted(() => {
 		map.value = new maplibregl.Map({
 			bounds: bounds,
 			container: mapContainer.value,
-			//style: "https://tiles.stadiamaps.com/styles/osm_bright.json",
+			style: "https://tiles.stadiamaps.com/styles/osm_bright.json",
 		});
 
 		// Wait for map to load, then add the markers
@@ -166,7 +156,7 @@ function updateMarkers(markers: Marker[]) {
 		if (markerInstances.value.has(markerData.id)) {
 			// Update existing marker position
 			const marker = markerInstances.value.get(markerData.id)!;
-			marker.setLngLat([markerData.lng, markerData.lat]);
+			marker.setLngLat([markerData.location.lng, markerData.location.lat]);
 			console.log("updated", markerData);
 		} else {
 			// Create a new marker
@@ -174,7 +164,7 @@ function updateMarkers(markers: Marker[]) {
 				color: markerData.color,
 				draggable: markerData.draggable,
 			})
-				.setLngLat([markerData.lng, markerData.lat])
+				.setLngLat([markerData.location.lng, markerData.location.lat])
 				.addTo(map.value!);
 
 			markerInstances.value.set(markerData.id, marker);

ts/components/MapProxiedArcgisTile.vue

@@ -1,40 +1,47 @@
+<style scoped>
+#map {
+	height: 100%;
+	width: 100%;
+	margin-bottom: 10px;
+}
+.map-container {
+	height: 100%;
+	width: 100%;
+}
+</style>
 <template>
-	<div ref="mapContainer" class="map-container"></div>
+	<div v-if="error == null">
+		<div ref="mapContainer" class="map-multipoint"></div>
+	</div>
+	<div v-else>
+		<h1>Map failed to load</h1>
+		<p>{{error}}</p>
+	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import "maplibre-gl/dist/maplibre-gl.css";
 import { ref, watch, onMounted, onBeforeUnmount } from "vue";
 import maplibregl from "maplibre-gl";
-import "maplibre-gl/dist/maplibre-gl.css";
 
-const props = defineProps({
-	latitude: {
-		type: Number,
-		required: true,
-	},
-	longitude: {
-		type: Number,
-		required: true,
-	},
-	organizationId: {
-		type: Number,
-		default: 0,
-	},
-	tegola: {
-		type: String,
-		default: "",
-	},
-	urlTiles: {
-		type: String,
-		default: "",
-	},
-});
+interface Emits {
+	(e: "map-click", latitude: Number, longitude: Number): void
+}
+interface Props {
+	latitude: Number;
+	longitude: Number;
+	organizationId: Number;
+	tegola: string;
+	urlTiles: string;
+}
+const emit = defineEmits<Emits>();
+const props = defineProps<Props>();
 
-const emit = defineEmits(["load", "map-click"]);
-
-const mapContainer = ref(null);
-const map = ref(null);
-const markers = ref([]);
+const error = ref<string | null>(null);
+const mapContainer = ref<HTMLElement | null>(null);
+const map = ref<maplibregl.Map | null>(null);
+const markerInstances = ref<Map<string, maplibrgl.Marker>>(new Map())
+const markers = ref<Map<string, maplibrgl.Marker>>(new Map())
 
 // Watch for latitude/longitude changes
 watch(

ts/components/PlanningColumnDetailEntry.vue

@@ -1,29 +1,10 @@
 <template>
-<!--
-	<td>
-		<button
-			@click="toggleSignal(signal)"
-			class="btn btn-sm btn-link text-danger p-0 ms-1"
-			style="font-size: 0.7rem"
-		>
-			<i class="bi bi-x"></i>
-		</button>
-	</td>
-	<td>
-		<span v-if="signal.type === 'flyover pool'">Pool</span>
-		<span v-else-if="signal.type === 'publicreport nuisance'"
-			>Nuisance</span
-		>
-		<span v-else-if="signal.type === 'publicreport water'"
-			>Water</span
-		>
-	</td>
-	<td>
-		<TimeRelative :time="signal.created"></TimeRelative>
-	</td>
-	<td>{{ shortAddress(signal.address) }}</td>
--->
-	<div v-if="signal.type == 'publicreport nuisance'">
+	<TimeRelative :time="signal.created"></TimeRelative>
+	<p>{{ shortAddress(signal.address) }}</p>
+	<div v-if="signal.type == 'flyover pool'">
+		<FlyoverPoolCard :pool="signal.pool"/>
+	</div>
+	<div v-else-if="signal.type == 'publicreport nuisance'">
 		<PublicreportCard :report="signal.report"/>
 	</div>
 	<div v-else-if="signal.type == 'publicreport water'">
@@ -32,7 +13,8 @@
 </template>
 
 <script setup lang="ts">
-import { shortAddress } from "../format";
+import { shortAddress } from "@/format";
+import FlyoverPoolCard from "@/components/FlyoverPoolCard.vue";
 import PublicreportCard from "@/components/PublicreportCard.vue";
 import TimeRelative from "@/components/TimeRelative.vue";
 interface Props {

ts/types.ts

@@ -10,6 +10,20 @@ export interface Communication {
 	public_report: PublicReport | null;
 	type: string;
 }
+export interface Point {
+	lat: Number;
+	lng: Number;
+}
+export interface Bounds {
+	min: Point;
+	max: Point;
+}
+export interface Marker {
+	color: string;
+	draggable: boolean;
+	id: string;
+	location: Point;
+}
 
 export interface PublicReport {
 	created: string;

ts/view/Communication.vue

@@ -268,8 +268,10 @@ function updateMap() {
 			color: "#FF0000",
 			draggable: false,
 			id: String(Date.now()),
-			lng: loc.longitude,
-			lat: loc.latitude,
+			location: {
+				lng: loc.longitude,
+				lat: loc.latitude,
+			}
 		},
 	];
 	console.log("markers now", mapMarkers.value);
@@ -286,8 +288,10 @@ function updateMap() {
 			mapMarkers.value.push({
 				color: "#00FF00",
 				draggable: false,
-				lat: i.location.latitude,
-				lng: i.location.longitude,
+				location: {
+					lat: i.location.latitude,
+					lng: i.location.longitude,
+				},
 			});
 			min.lat = Math.min(min.lat, i.location.latitude);
 			min.lng = Math.min(min.lng, i.location.longitude);

ts/view/Planning.vue

@@ -51,7 +51,6 @@
 import { computed, ref, onMounted, nextTick } from "vue";
 
 import MapMultipoint from "../components/MapMultipoint.vue";
-import MapProxiedArcgisTile from "../components/MapProxiedArcgisTile.vue";
 import PlanningColumnAction from "../components/PlanningColumnAction.vue";
 import PlanningColumnDetail from "../components/PlanningColumnDetail.vue";
 import PlanningColumnList from "../components/PlanningColumnList.vue";