From f1e4aca9b892f2c7247edbc96bc1a6d2862d4397 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 23 Apr 2026 23:38:12 +0000
Subject: [PATCH] Set bounds to default if the district doesn't have a service
 area

---
 ts/map/Map.vue   |  5 ++---
 ts/map/util.ts   | 23 +++++++++++++++--------
 ts/view/Dash.vue |  7 ++++---
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/ts/map/Map.vue b/ts/map/Map.vue
index accbef7e..b335ddea 100644
--- a/ts/map/Map.vue
+++ b/ts/map/Map.vue
@@ -27,10 +27,8 @@ import {
 	shallowRef,
 } from "vue";
 
-import type { Bounds } from "@/type/api";
-
 interface Props {
-	bounds?: Bounds;
+	bounds?: maplibregl.LngLatBounds;
 	center?: maplibregl.LngLatLike;
 	zoom?: number;
 }
@@ -88,6 +86,7 @@ function initializeMap() {
 
 	console.log("initializing map...");
 	const _map = new maplibregl.Map({
+		bounds: props.bounds,
 		container: mapDiv.value,
 		center: props.center,
 		style: "https://tiles.stadiamaps.com/styles/alidade_smooth.json",
diff --git a/ts/map/util.ts b/ts/map/util.ts
index 85599876..665f92b8 100644
--- a/ts/map/util.ts
+++ b/ts/map/util.ts
@@ -1,6 +1,20 @@
 import maplibregl from "maplibre-gl";
 import type { Marker } from "@/types";
-import type { Location } from "@/type/api";
+import type { Bounds, Location } from "@/type/api";
+
+export function boundsDefault(): maplibregl.LngLatBounds {
+	return new maplibregl.LngLatBounds(
+		new maplibregl.LngLat(-125, 50),
+		new maplibregl.LngLat(-70, 25),
+	);
+}
+
+export function boundsFromAPI(b: Bounds): maplibregl.LngLatBounds {
+	return new maplibregl.LngLatBounds(
+		new maplibregl.LngLat(b.min.longitude, b.max.latitude),
+		new maplibregl.LngLat(b.max.longitude, b.min.latitude),
+	);
+}
 
 export function boundsMarkers(markers: Marker[]): maplibregl.LngLatBounds {
 	let min_lat = 90;
@@ -18,13 +32,6 @@ export function boundsMarkers(markers: Marker[]): maplibregl.LngLatBounds {
 		new maplibregl.LngLat(max_lng, max_lat),
 	);
 }
-export function boundsDefault(): maplibregl.LngLatBounds {
-	return new maplibregl.LngLatBounds(
-		new maplibregl.LngLat(-125, 50),
-		new maplibregl.LngLat(-70, 25),
-	);
-}
-
 // Helper functions (outside component)
 const getBoundingBox = (points: Location[]) => {
 	if (!points || points.length === 0) {
diff --git a/ts/view/Dash.vue b/ts/view/Dash.vue
index 02b9f87e..0648b2cc 100644
--- a/ts/view/Dash.vue
+++ b/ts/view/Dash.vue
@@ -232,6 +232,7 @@ import { onMounted, reactive } from "vue";
 import Map from "@/map/Map.vue";
 import Layer from "@/map/Layer.vue";
 import Source from "@/map/Source.vue";
+import { boundsDefault, boundsFromAPI } from "@/map/util";
 import { formatBigNumber, formatTimeRelative } from "@/format";
 import { router } from "@/route/config";
 import { useSessionStore } from "@/store/session";
@@ -269,11 +270,11 @@ onMounted(async () => {
 function doClickMap(cell: string) {
 	router.push("/_/cell/" + cell);
 }
-function mapBounds(): Bounds | undefined {
+function mapBounds(): maplibregl.LngLatBounds {
 	if (session.organization?.service_area) {
-		return session.organization?.service_area;
+		return boundsFromAPI(session.organization?.service_area);
 	}
-	return undefined;
+	return boundsDefault();
 }
 function refreshData() {
 	console.log("fake refresh");