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

GEOJSON!

Browse source
This commit is contained in:
Sean Morley 2024-07-24 11:01:59 -04:00
parent dad42c4a3a
commit 6a5e8ba1ec
4 changed files with 19054 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,6 +27,12 @@ export const load = (async (event) => {
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');
}
if (!visitedFetch.ok) {
console.error('Failed to fetch visited adventures');
return redirect(302, '/login');
@ -48,6 +54,7 @@ export const load = (async (event) => {
props: {
markers,
USjson,
CAjson,
visitedRegions
}
};

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

@ -18,6 +18,14 @@
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;
@ -32,7 +40,8 @@
let showGEO = true;
</script>
<input type="checkbox" class="checkbox" bind:checked={showGEO} />
<label for="show-geo">Show Borders?</label>
<input type="checkbox" id="shpw-gep" name="show-geo" class="checkbox" bind:checked={showGEO} />
<MapLibre
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
@ -85,7 +94,7 @@
{/if}
{/each}
{#if showGEO}
<GeoJSON id="states" data={us} promoteId="STUSPS">
<GeoJSON id="states" data={geoJSON} promoteId="ISOCODE">
<LineLayer
layout={{ 'line-cap': 'round', 'line-join': 'round' }}
paint={{ 'line-color': 'grey', 'line-width': 3 }}
@ -93,18 +102,18 @@
/>
<FillLayer
paint={{ 'fill-color': 'rgba(37, 244, 26, 0.15)' }}
filter={['in', 'STUSPS', ...visitArray]}
filter={['in', 'ISOCODE', ...visitArray]}
/>
<SymbolLayer
<!-- <SymbolLayer
layout={{
'text-field': ['slice', ['get', 'STUSPS'], 3],
'text-field': ['slice', ['get', 'ISOCODE'], 3],
'text-size': 12,
'text-anchor': 'center'
}}
paint={{
'text-color': 'black'
}}
/>
/> -->
</GeoJSON>
{/if}
</MapLibre>