Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-03 04:05:18 +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

29
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';
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
}
};

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

@ -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 }}