steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

layer control progress

Browse Source
This commit is contained in:
vcoppe
2024-04-12 12:38:19 +02:00
parent c6d435e3b5
commit 1eeaddc1bd
4 changed files with 109 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
website/src/lib/assets/layers.ts
View File

@@ -370,3 +370,35 @@ export const opacities: { [key: string]: number; } = {
ignSlope: 0.4,
swisstopoSlope: 0.4,
};
export const basemapTree = {
world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'],
countries: {
bulgaria: ['bgMountains'],
finland: ['finlandTopo'],
france: ['ignPlanV2', 'ignFrScan25', 'ignSatellite'],
newZealand: ['linz', 'linzTopo'],
norway: ['norwayTopo'],
spain: ['ignEs'],
sweden: ['swedenTopo'],
switzerland: ['swisstopo'],
unitedKingdom: ['ordnanceSurvey'],
unitedStates: ['usgs'],
},
}
export const overlayTree = {
world: {
cyclOSM: ['cyclOSMlite'],
waymarkedTrails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter']
},
countries: {
france: ['ignFrCadastre', 'ignSlope'],
switzerland: ['swisstopoSlope', 'swisstopoCycling', 'swisstopoMountainBike'],
},
}
export const defaultBasemap = 'mapboxOutdoors';
export const defaultAvailableBasemaps = ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'];
export const defaultAvailableOverlays = ['cyclOSMlite', 'waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter'];

92
website/src/lib/components/LayerControl.svelte
View File

@@ -5,16 +5,22 @@
import Fa from 'svelte-fa';
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
import { Label } from '$lib/components/ui/label';
import * as RadioGroup from '$lib/components/ui/radio-group';
import { Checkbox } from '$lib/components/ui/checkbox';
import { basemaps, overlays, opacities } from '$lib/assets/layers';
import {
basemaps,
basemapTree,
overlays,
overlayTree,
opacities,
defaultBasemap,
defaultAvailableBasemaps,
defaultAvailableOverlays
} from '$lib/assets/layers';
import LayerTree from './LayerTree.svelte';
export let map: mapboxgl.Map | null;
$: if (map) {
map?.setStyle(basemaps['mapboxOutdoors']);
map?.setStyle(basemaps[defaultBasemap]);
}
</script>
@@ -22,50 +28,32 @@
<div class="flex flex-row justify-center items-center w-[29px] h-[29px] group-hover:hidden">
<Fa icon={faLayerGroup} size="1.4x" />
</div>
<div class="hidden group-hover:block p-2">
<RadioGroup.Root
value="mapboxOutdoors"
onValueChange={(id) => {
map.setStyle(basemaps[id]);
}}
>
{#each Object.keys(basemaps) as id}
<div class="flex items-center space-x-2">
<RadioGroup.Item value={id} {id} />
<Label for={id}>{id}</Label>
</div>
{/each}
</RadioGroup.Root>
<div class="flex flex-col">
{#each Object.keys(overlays) as id}
<div>
<Checkbox
{id}
onCheckedChange={(checked) => {
if (checked) {
if (!map.getSource(id)) {
map.addSource(id, overlays[id]);
}
map.addLayer({
id,
type: overlays[id].type === 'raster' ? 'raster' : 'line',
source: id,
paint: {
...(id in opacities
? overlays[id].type === 'raster'
? { 'raster-opacity': opacities[id] }
: { 'line-opacity': opacities[id] }
: {})
}
});
} else {
map.removeLayer(id);
}
}}
/>
<Label for={id}>{id}</Label>
</div>
{/each}
</div>
</div>
<LayerTree
{basemaps}
{overlays}
onBasemapChange={(id) => {
map.setStyle(basemaps[id]);
}}
onOverlayChange={(id, checked) => {
if (checked) {
if (!map.getSource(id)) {
map.addSource(id, overlays[id]);
}
map.addLayer({
id,
type: overlays[id].type === 'raster' ? 'raster' : 'line',
source: id,
paint: {
...(id in opacities
? overlays[id].type === 'raster'
? { 'raster-opacity': opacities[id] }
: { 'line-opacity': opacities[id] }
: {})
}
});
} else {
map.removeLayer(id);
}
}}
/>
</CustomControl>

35
website/src/lib/components/LayerTree.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script lang="ts">
import { Label } from '$lib/components/ui/label';
import * as RadioGroup from '$lib/components/ui/radio-group';
import { Checkbox } from '$lib/components/ui/checkbox';
export let basemaps;
export let overlays;
export let onBasemapChange: (id: string) => void;
export let onOverlayChange: (id: string, checked: boolean) => void;
</script>
<div class="hidden group-hover:block p-2 space-y-2">
<RadioGroup.Root value="mapboxOutdoors" onValueChange={onBasemapChange}>
{#each Object.keys(basemaps) as id}
<div class="flex items-center space-x-2">
<RadioGroup.Item value={id} {id} />
<Label for={id}>{id}</Label>
</div>
{/each}
</RadioGroup.Root>
<div class="flex flex-col">
{#each Object.keys(overlays) as id}
<div>
<Checkbox
{id}
onCheckedChange={(checked) => {
onOverlayChange(id, checked === 'indeterminate' ? false : checked);
}}
/>
<Label for={id}>{id}</Label>
</div>
{/each}
</div>
</div>

2
website/src/lib/components/Map.svelte
View File

@@ -19,7 +19,7 @@
map = new mapboxgl.Map({
container: 'map',
style: { version: 8, sources: {}, layers: [] },
projection: 'mercator',
projection: { name: 'mercator' },
hash: true,
language: 'auto',
attributionControl: false,