GEOJSON!

backend/server/main/settings.py

@@ -127,7 +127,7 @@ STATIC_URL = '/static/'
 
 MEDIA_URL = '/media/'
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
-# STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
+STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
 
 
 # TEMPLATE_DIRS = [os.path.join(BASE_DIR, 'templates')]

frontend/src/routes/map/+page.server.ts

@@ -1,7 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
-import type { Adventure } from '$lib/types';
+import type { Adventure, VisitedRegion } from '$lib/types';
 const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
 
 export const load = (async (event) => {
@@ -13,6 +13,20 @@ export const load = (async (event) => {
 				Cookie: `${event.cookies.get('auth')}`
 			}
 		});
+
+		let visitedRegionsFetch = await fetch(`${endpoint}/api/visitedregion/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		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');
+		}
+
 		if (!visitedFetch.ok) {
 			console.error('Failed to fetch visited adventures');
 			return redirect(302, '/login');
@@ -29,9 +43,12 @@ export const load = (async (event) => {
 						type: adventure.type
 					};
 				});
+
 			return {
 				props: {
-					markers
+					markers,
+					USjson,
+					visitedRegions
 				}
 			};
 		}

frontend/src/routes/map/+page.svelte

@@ -1,15 +1,39 @@
 <script>
 	// @ts-nocheck
 
-	import { DefaultMarker, MapEvents, MapLibre, Popup, Marker } from 'svelte-maplibre';
+	import {
+		DefaultMarker,
+		MapEvents,
+		MapLibre,
+		Popup,
+		Marker,
+		GeoJSON,
+		LineLayer,
+		FillLayer,
+		SymbolLayer
+	} from 'svelte-maplibre';
 	export let data;
 
 	let clickedName = '';
 
 	let markers = data.props.markers;
+	let us = data.props.USjson;
 	console.log(markers);
+
+	let visitedRegions = data.props.visitedRegions;
+
+	let visitArray = [];
+
+	// turns in into an array of the visits
+	visitedRegions.forEach((el) => {
+		visitArray.push(el.region);
+	});
+
+	let showGEO = true;
 </script>
 
+<input type="checkbox" class="checkbox" bind:checked={showGEO} />
+
 <MapLibre
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
@@ -60,6 +84,29 @@
 			</Marker>
 		{/if}
 	{/each}
+	{#if showGEO}
+		<GeoJSON id="states" data={us} promoteId="STUSPS">
+			<LineLayer
+				layout={{ 'line-cap': 'round', 'line-join': 'round' }}
+				paint={{ 'line-color': 'grey', 'line-width': 3 }}
+				beforeLayerType="symbol"
+			/>
+			<FillLayer
+				paint={{ 'fill-color': 'rgba(37, 244, 26, 0.15)' }}
+				filter={['in', 'STUSPS', ...visitArray]}
+			/>
+			<SymbolLayer
+				layout={{
+					'text-field': ['slice', ['get', 'STUSPS'], 3],
+					'text-size': 12,
+					'text-anchor': 'center'
+				}}
+				paint={{
+					'text-color': 'black'
+				}}
+			/>
+		</GeoJSON>
+	{/if}
 </MapLibre>
 
 <style>