Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-04 20:55:19 +02:00
Code Issues Releases Activity

feat: Fetch and merge multiple country GeoJSON files

Browse source
This commit is contained in:
Sean Morley 2024-07-24 11:52:39 -04:00
parent 6a5e8ba1ec
commit 0720481937
2 changed files with 20 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/routes/map/+page.server.ts
View file

@ -5,6 +5,12 @@ import type { Adventure, VisitedRegion } from '$lib/types';
const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000'; const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
export const load = (async (event) => { export const load = (async (event) => {
let countryCodesToFetch = ['US', 'CA'];
let geoJSON = {
type: 'FeatureCollection',
features: []
};
if (!event.locals.user) { if (!event.locals.user) {
return redirect(302, '/login'); return redirect(302, '/login');
} else { } else {
@ -21,17 +27,15 @@ export const load = (async (event) => {
}); });
let visitedRegions = (await visitedRegionsFetch.json()) as VisitedRegion[]; let visitedRegions = (await visitedRegionsFetch.json()) as VisitedRegion[];
let USfetch = await fetch(`${endpoint}/static/data/us.json`); countryCodesToFetch.forEach(async (code) => {
let USjson = await USfetch.json(); let res = await fetch(`${endpoint}/static/data/${code.toLowerCase()}.json`);
if (!USjson) { let json = await res.json();
console.error('Failed to fetch US GeoJSON'); if (!json) {
} console.error(`Failed to fetch ${code} GeoJSON`);
} else {
let CAfetch = await fetch(`${endpoint}/static/data/ca.json`); geoJSON.features = geoJSON.features.concat(json.features);
let CAjson = await CAfetch.json();
if (!CAjson) {
console.error('Failed to fetch CA GeoJSON');
} }
});
if (!visitedFetch.ok) { if (!visitedFetch.ok) {
console.error('Failed to fetch visited adventures'); console.error('Failed to fetch visited adventures');
@ -53,8 +57,7 @@ export const load = (async (event) => {
return { return {
props: { props: {
markers, markers,
USjson, geoJSON,
CAjson,
visitedRegions visitedRegions
} }
}; };

15
frontend/src/routes/map/+page.svelte
View file

@ -17,19 +17,11 @@
let clickedName = ''; let clickedName = '';
let markers = data.props.markers; 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 visitedRegions = data.props.visitedRegions;
let geoJSON = data.props.geoJSON;
let visitArray = []; let visitArray = [];
// turns in into an array of the visits // turns in into an array of the visits
@ -37,6 +29,7 @@
visitArray.push(el.region); visitArray.push(el.region);
}); });
// mapped to the checkbox
let showGEO = true; let showGEO = true;
</script> </script>
@ -94,7 +87,7 @@
{/if} {/if}
{/each} {/each}
{#if showGEO} {#if showGEO}
<GeoJSON id="states" data={geoJSON} promoteId="ISOCODE"> <GeoJSON id="states" data={data.props.geoJSON} promoteId="ISOCODE">
<LineLayer <LineLayer
layout={{ 'line-cap': 'round', 'line-join': 'round' }} layout={{ 'line-cap': 'round', 'line-join': 'round' }}
paint={{ 'line-color': 'grey', 'line-width': 3 }} paint={{ 'line-color': 'grey', 'line-width': 3 }}