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

chore: Add GeoJSON endpoint to retrieve combined GeoJSON data from static files

Browse source
This commit is contained in:
Sean Morley 2024-07-27 12:46:50 -04:00
parent 70d08eff8a
commit 57eee7bb5d
4 changed files with 83 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,12 +5,6 @@ import type { Adventure, VisitedRegion } from '$lib/types';
const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
export const load = (async (event) => {
let countryCodesToFetch = ['FR', 'US', 'CA', 'DE', 'AU', 'MX', 'JP'];
let geoJSON = {
type: 'FeatureCollection',
features: []
};
if (!event.locals.user) {
return redirect(302, '/login');
} else {
@ -20,6 +14,8 @@ export const load = (async (event) => {
}
});
let geoJsonUrl = `${endpoint}/api/geojson/` as string;
let visitedRegionsFetch = await fetch(`${endpoint}/api/visitedregion/`, {
headers: {
Cookie: `${event.cookies.get('auth')}`
@ -27,19 +23,6 @@ export const load = (async (event) => {
});
let visitedRegions = (await visitedRegionsFetch.json()) as VisitedRegion[];
await Promise.all(
countryCodesToFetch.map(async (code) => {
let res = await fetch(`${endpoint}/static/data/${code.toLowerCase()}.json`);
console.log('fetching ' + code);
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');
return redirect(302, '/login');
@ -61,7 +44,7 @@ export const load = (async (event) => {
return {
props: {
markers,
geoJSON,
geoJsonUrl,
visitedRegions
}
};

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

@ -17,6 +17,24 @@
let clickedName = '';
let showVisited = true;
let showPlanned = true;
$: {
if (!showVisited) {
markers = markers.filter((marker) => marker.type !== 'visited');
} else {
const visitedMarkers = data.props.markers.filter((marker) => marker.type === 'visited');
markers = [...markers, ...visitedMarkers];
}
if (!showPlanned) {
markers = markers.filter((marker) => marker.type !== 'planned');
} else {
const plannedMarkers = data.props.markers.filter((marker) => marker.type === 'planned');
markers = [...markers, ...plannedMarkers];
}
}
let newMarker = [];
let newLongitude = null;
@ -61,7 +79,7 @@
let visitedRegions = data.props.visitedRegions;
let geoJSON = data.props.geoJSON;
let geoJSON = [];
let visitArray = [];
@ -77,11 +95,29 @@
}
// mapped to the checkbox
let showGEO = true;
let showGEO = false;
$: {
if (showGEO && geoJSON.length === 0) {
(async () => {
geoJSON = await fetch(data.props.geoJsonUrl).then((res) => res.json());
})();
} else if (!showGEO) {
geoJSON = [];
}
}
let createModalOpen = false;
</script>
<label class="label cursor-pointer">
<span class="label-text">Visited</span>
<input type="checkbox" bind:checked={showVisited} class="checkbox checkbox-primary" />
</label>
<label class="label cursor-pointer">
<span class="label-text">Planned</span>
<input type="checkbox" bind:checked={showPlanned} class="checkbox checkbox-primary" />
</label>
{#if newMarker.length > 0}
<button type="button" class="btn btn-primary mb-2" on:click={() => (createModalOpen = true)}
>Add New Adventure at Marker</button
@ -156,7 +192,7 @@
{/if}
{/each}
{#if showGEO}
<GeoJSON id="states" data={data.props.geoJSON} promoteId="ISOCODE">
<GeoJSON id="states" data={geoJSON} promoteId="ISOCODE">
<LineLayer
layout={{ 'line-cap': 'round', 'line-join': 'round' }}
paint={{ 'line-color': 'grey', 'line-width': 3 }}