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

layer control progress

Browse Source
This commit is contained in:
vcoppe
2024-04-12 13:43:51 +02:00
parent 1eeaddc1bd
commit 02bfc3b07b
8 changed files with 136 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -371,7 +371,9 @@ export const opacities: { [key: string]: number; } = {
swisstopoSlope: 0.4,
};
export const basemapTree = {
export type LayerTreeType = string[] | { [key: string]: LayerTreeType; };
export const basemapTree: LayerTreeType = {
world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'],
countries: {
bulgaria: ['bgMountains'],
@@ -387,7 +389,7 @@ export const basemapTree = {
},
}
export const overlayTree = {
export const overlayTree: LayerTreeType = {
world: {
cyclOSM: ['cyclOSMlite'],
waymarkedTrails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter']

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

@@ -1,59 +0,0 @@
<script lang="ts">
import mapboxgl from 'mapbox-gl';
import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
import Fa from 'svelte-fa';
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
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[defaultBasemap]);
}
</script>
<CustomControl {map} class="group">
<div class="flex flex-row justify-center items-center w-[29px] h-[29px] group-hover:hidden">
<Fa icon={faLayerGroup} size="1.4x" />
</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
View File

@@ -1,35 +0,0 @@
<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

@@ -6,7 +6,7 @@
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
import LayerControl from './LayerControl.svelte';
import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
mapboxgl.accessToken =
'pk.eyJ1IjoiZ3B4c3R1ZGlvIiwiYSI6ImNrdHVoM2pjNTBodmUycG1yZTNwcnJ3MzkifQ.YZnNs9s9oCQPzoXAWs_SLg';

69
website/src/lib/components/layer-control/LayerControl.svelte Normal file
View File

@@ -0,0 +1,69 @@
<script lang="ts">
import mapboxgl from 'mapbox-gl';
import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
import LayerTree from './LayerTree.svelte';
import Fa from 'svelte-fa';
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
import {
basemaps,
basemapTree,
overlays,
overlayTree,
opacities,
defaultBasemap
} from '$lib/assets/layers';
export let map: mapboxgl.Map | null;
$: if (map) {
map?.setStyle(basemaps[defaultBasemap]);
}
</script>
<CustomControl {map} class="group">
<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 space-y-2">
<LayerTree
layerTree={basemapTree}
name="basemaps"
onValueChange={(id) => {
if (map) {
map.setStyle(basemaps[id]);
}
}}
/>
<LayerTree
layerTree={overlayTree}
name="overlays"
multiple={true}
onValueChange={(id, checked) => {
if (map) {
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);
}
}
}}
/>
</div>
</CustomControl>

14
website/src/lib/components/layer-control/LayerTree.svelte Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
import LayerTreeNode from './LayerTreeNode.svelte';
import { type LayerTreeType } from '$lib/assets/layers';
export let layerTree: LayerTreeType;
export let name: string;
export let multiple: boolean = false;
export let onValueChange: (id: string, checked: boolean) => void;
</script>
<fieldset>
<LayerTreeNode {name} node={layerTree} {multiple} {onValueChange} />
</fieldset>

47
website/src/lib/components/layer-control/LayerTreeNode.svelte Normal file
View File

@@ -0,0 +1,47 @@
<script lang="ts">
import { type LayerTreeType } from '$lib/assets/layers';
export let name: string;
export let node: LayerTreeType;
export let multiple: boolean = false;
export let onValueChange: (id: string, checked: boolean) => void;
</script>
<div class="flex flex-col">
{#if Array.isArray(node)}
{#each node as id}
<div>
{#if multiple}
<input
type="checkbox"
{id}
{name}
value={id}
on:change={(e) => {
onValueChange(id, e.target.checked);
}}
/>
{:else}
<input
type="radio"
{id}
{name}
value={id}
on:change={() => {
onValueChange(id, true);
}}
/>
{/if}
<label for={id}>{id}</label>
</div>
{/each}
{:else}
{#each Object.keys(node) as id}
<div class="ml-2">
<span>{id}</span>
<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
</div>
{/each}
{/if}
</div>

2
website/src/routes/+page.svelte
View File

@@ -10,5 +10,5 @@
<Toolbar />
<Map class="h-full" />
</div>
<div class="h-1/3">Test</div>
<div class="h-12">Test</div>
</div>