From 0720481937906b7f2553f2d040dd07de8adfd90d Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Wed, 24 Jul 2024 11:52:39 -0400
Subject: [PATCH] feat: Fetch and merge multiple country GeoJSON files

---
 frontend/src/routes/map/+page.server.ts | 29 ++++++++++++++-----------
 frontend/src/routes/map/+page.svelte    | 15 ++++---------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/frontend/src/routes/map/+page.server.ts b/frontend/src/routes/map/+page.server.ts
index 8c15e2a..904486d 100644
--- a/frontend/src/routes/map/+page.server.ts
+++ b/frontend/src/routes/map/+page.server.ts
@@ -5,6 +5,12 @@ import type { Adventure, VisitedRegion } from '$lib/types';
 const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
 
 export const load = (async (event) => {
+	let countryCodesToFetch = ['US', 'CA'];
+	let geoJSON = {
+		type: 'FeatureCollection',
+		features: []
+	};
+
 	if (!event.locals.user) {
 		return redirect(302, '/login');
 	} else {
@@ -21,17 +27,15 @@ export const load = (async (event) => {
 		});
 		let visitedRegions = (await visitedRegionsFetch.json()) as VisitedRegion[];
 
-		let USfetch = await fetch(`${endpoint}/static/data/us.json`);
-		let USjson = await USfetch.json();
-		if (!USjson) {
-			console.error('Failed to fetch US GeoJSON');
-		}
-
-		let CAfetch = await fetch(`${endpoint}/static/data/ca.json`);
-		let CAjson = await CAfetch.json();
-		if (!CAjson) {
-			console.error('Failed to fetch CA GeoJSON');
-		}
+		countryCodesToFetch.forEach(async (code) => {
+			let res = await fetch(`${endpoint}/static/data/${code.toLowerCase()}.json`);
+			let json = await res.json();
+			if (!json) {
+				console.error(`Failed to fetch ${code} GeoJSON`);
+			} else {
+				geoJSON.features = geoJSON.features.concat(json.features);
+			}
+		});
 
 		if (!visitedFetch.ok) {
 			console.error('Failed to fetch visited adventures');
@@ -53,8 +57,7 @@ export const load = (async (event) => {
 			return {
 				props: {
 					markers,
-					USjson,
-					CAjson,
+					geoJSON,
 					visitedRegions
 				}
 			};
diff --git a/frontend/src/routes/map/+page.svelte b/frontend/src/routes/map/+page.svelte
index cbae1c0..425e06e 100644
--- a/frontend/src/routes/map/+page.svelte
+++ b/frontend/src/routes/map/+page.svelte
@@ -17,19 +17,11 @@
 	let clickedName = '';
 
 	let markers = data.props.markers;
-	let us = data.props.USjson;
-	let ca = data.props.CAjson;
-
-	// combine the two geojsons
-	let geoJSON = {
-		type: 'FeatureCollection',
-		features: [...us.features, ...ca.features]
-	};
-
-	console.log(markers);
 
 	let visitedRegions = data.props.visitedRegions;
 
+	let geoJSON = data.props.geoJSON;
+
 	let visitArray = [];
 
 	// turns in into an array of the visits
@@ -37,6 +29,7 @@
 		visitArray.push(el.region);
 	});
 
+	// mapped to the checkbox
 	let showGEO = true;
 </script>
 
@@ -94,7 +87,7 @@
 		{/if}
 	{/each}
 	{#if showGEO}
-		<GeoJSON id="states" data={geoJSON} promoteId="ISOCODE">
+		<GeoJSON id="states" data={data.props.geoJSON} promoteId="ISOCODE">
 			<LineLayer
 				layout={{ 'line-cap': 'round', 'line-join': 'round' }}
 				paint={{ 'line-color': 'grey', 'line-width': 3 }}