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 selection

Browse Source
This commit is contained in:
vcoppe
2024-05-05 18:59:09 +02:00
parent b3d016e2af
commit a261193267
8 changed files with 295 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -371,89 +371,199 @@ export const opacities: { [key: string]: number; } = {
swisstopoSlope: 0.4,
};
export type LayerTreeType = string[] | { [key: string]: LayerTreeType; };
export type LayerTreeType = { [key: string]: LayerTreeType | boolean; };
export type CollapsedInfoTreeType<T> = {
self: T;
children: { [key: string]: CollapsedInfoTreeType<T>; };
};
export type CheckedInfoTreeType = { [key: string]: boolean | CheckedInfoTreeType };
// Hierarchy containing all basemaps
export const basemapTree: LayerTreeType = {
basemaps: {
world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'],
world: {
mapboxOutdoors: true,
mapboxSatellite: true,
openStreetMap: true,
openTopoMap: true,
openHikingMap: true,
cyclOSM: true
},
countries: {
bulgaria: ['bgMountains'],
finland: ['finlandTopo'],
france: ['ignPlanV2', 'ignFrScan25', 'ignSatellite'],
new_zealand: ['linz', 'linzTopo'],
norway: ['norwayTopo'],
spain: ['ignEs'],
sweden: ['swedenTopo'],
switzerland: ['swisstopo'],
united_kingdom: ['ordnanceSurvey'],
united_states: ['usgs'],
bulgaria: {
bgMountains: true,
},
finland: {
finlandTopo: true,
},
france: {
ignPlanV2: true,
ignFrScan25: true,
ignSatellite: true
},
new_zealand: {
linz: true,
linzTopo: true,
},
norway: {
norwayTopo: true,
},
spain: {
ignEs: true,
},
sweden: {
swedenTopo: true,
},
switzerland: {
swisstopo: true,
},
united_kingdom: {
ordnanceSurvey: true,
},
united_states: {
usgs: true,
}
},
},
}
// Hierarchy containing all overlays
export const overlayTree: LayerTreeType = {
overlays: {
world: {
cyclOSM: ['cyclOSMlite'],
waymarked_trails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter']
cyclOSM: {
cyclOSMlite: true,
},
waymarked_trails: {
waymarkedTrailsHiking: true,
waymarkedTrailsCycling: true,
waymarkedTrailsMTB: true,
waymarkedTrailsSkating: true,
waymarkedTrailsHorseRiding: true,
waymarkedTrailsWinter: true,
}
},
countries: {
france: ['ignFrCadastre', 'ignSlope'],
switzerland: ['swisstopoSlope', 'swisstopoCycling', 'swisstopoMountainBike'],
france: {
ignFrCadastre: true,
ignSlope: true,
},
switzerland: {
swisstopoSlope: true,
swisstopoCycling: true,
swisstopoMountainBike: true,
}
},
},
}
export const layerKeys: { [key: string]: string[]; } = {
mapboxOutdoors: ['basemaps', 'world'],
mapboxSatellite: ['basemaps', 'world'],
openStreetMap: ['basemaps', 'world'],
openTopoMap: ['basemaps', 'world'],
openHikingMap: ['basemaps', 'world'],
cyclOSM: ['basemaps', 'world'],
cyclOSMlite: ['overlays', 'world', 'cyclOSM'],
waymarkedTrailsHiking: ['overlays', 'world', 'waymarked_trails'],
waymarkedTrailsCycling: ['overlays', 'world', 'waymarked_trails'],
waymarkedTrailsMTB: ['overlays', 'world', 'waymarked_trails'],
waymarkedTrailsSkating: ['overlays', 'world', 'waymarked_trails'],
waymarkedTrailsHorseRiding: ['overlays', 'world', 'waymarked_trails'],
waymarkedTrailsWinter: ['overlays', 'world', 'waymarked_trails'],
bgMountains: ['basemaps', 'countries', 'bulgaria'],
finlandTopo: ['basemaps', 'countries', 'finland'],
ignPlanV2: ['basemaps', 'countries', 'france'],
ignFrScan25: ['basemaps', 'countries', 'france'],
ignSatellite: ['basemaps', 'countries', 'france'],
ignFrCadastre: ['overlays', 'countries', 'france'],
ignSlope: ['overlays', 'countries', 'france'],
linz: ['basemaps', 'countries', 'new_zealand'],
linzTopo: ['basemaps', 'countries', 'new_zealand'],
norwayTopo: ['basemaps', 'countries', 'norway'],
swisstopo: ['basemaps', 'countries', 'switzerland'],
swisstopoSlope: ['overlays', 'countries', 'switzerland'],
swisstopoCycling: ['overlays', 'countries', 'switzerland'],
swisstopoMountainBike: ['overlays', 'countries', 'switzerland'],
swedenTopo: ['basemaps', 'countries', 'sweden'],
ordnanceSurvey: ['basemaps', 'countries', 'united_kingdom'],
usgs: ['basemaps', 'countries', 'united_states'],
};
// Default basemap used
export const defaultBasemap = 'mapboxOutdoors';
// Default overlays used (none)
export const defaultOverlays = {
overlays: {
world: {
cyclOSM: {
cyclOSMlite: false,
},
waymarked_trails: {
waymarkedTrailsHiking: false,
waymarkedTrailsCycling: false,
waymarkedTrailsMTB: false,
waymarkedTrailsSkating: false,
waymarkedTrailsHorseRiding: false,
waymarkedTrailsWinter: false,
}
},
countries: {
france: {
ignFrCadastre: false,
ignSlope: false,
},
switzerland: {
swisstopoSlope: false,
swisstopoCycling: false,
swisstopoMountainBike: false,
}
},
},
};
// Default basemaps shown in the layer menu
export const defaultBasemapTree: LayerTreeType = {
basemaps: {
world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM']
world: {
mapboxOutdoors: true,
mapboxSatellite: true,
openStreetMap: true,
openTopoMap: true,
openHikingMap: true,
cyclOSM: true
},
countries: {
bulgaria: {
bgMountains: false,
},
finland: {
finlandTopo: false,
},
france: {
ignPlanV2: false,
ignFrScan25: false,
ignSatellite: false
},
new_zealand: {
linz: false,
linzTopo: false,
},
norway: {
norwayTopo: false,
},
spain: {
ignEs: false,
},
sweden: {
swedenTopo: false,
},
switzerland: {
swisstopo: false,
},
united_kingdom: {
ordnanceSurvey: false,
},
united_states: {
usgs: false,
}
},
}
};
// Default overlays shown in the layer menu
export const defaultOverlayTree: LayerTreeType = {
overlays: {
world: {
cyclOSM: ['cyclOSMlite'],
waymarked_trails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB']
}
cyclOSM: {
cyclOSMlite: true,
},
waymarked_trails: {
waymarkedTrailsHiking: true,
waymarkedTrailsCycling: true,
waymarkedTrailsMTB: true,
waymarkedTrailsSkating: false,
waymarkedTrailsHorseRiding: false,
waymarkedTrailsWinter: false,
}
},
countries: {
france: {
ignFrCadastre: false,
ignSlope: false,
},
switzerland: {
swisstopoSlope: false,
swisstopoCycling: false,
swisstopoMountainBike: false,
}
},
}
}

8
website/src/lib/components/Menu.svelte
View File

@@ -19,6 +19,8 @@
import { resetMode, setMode } from 'mode-watcher';
import { _ } from 'svelte-i18n';
import { anySelectedLayer } from './layer-control/utils';
import { defaultOverlays } from '$lib/assets/layers';
let showDistanceMarkers = false;
let showDirectionMarkers = false;
@@ -229,10 +231,10 @@
[$currentBasemap, $previousBasemap] = [$previousBasemap, $currentBasemap];
e.preventDefault();
} else if (e.key === 'F2') {
if ($currentOverlays.length > 0) {
[$currentOverlays, $previousOverlays] = [[], $currentOverlays];
if (anySelectedLayer($currentOverlays)) {
[$currentOverlays, $previousOverlays] = [defaultOverlays, $currentOverlays];
} else {
[$currentOverlays, $previousOverlays] = [$previousOverlays, []];
[$currentOverlays, $previousOverlays] = [$previousOverlays, defaultOverlays];
}
e.preventDefault();
}

45
website/src/lib/components/layer-control/LayerControl.svelte
View File

@@ -12,6 +12,7 @@
import { settings } from '$lib/db';
import { map } from '$lib/stores';
import { get, writable } from 'svelte/store';
import { getLayers } from './utils';
const {
currentBasemap,
@@ -30,21 +31,21 @@
$: if ($map) {
// Add or remove overlay layers depending on the current overlays
// Object.keys(overlays).forEach((id) => {
// if ($currentOverlays.includes(id)) {
// if (!addOverlayLayer.hasOwnProperty(id)) {
// addOverlayLayer[id] = addOverlayLayerForId(id);
// }
// if (!$map.getLayer(id)) {
// addOverlayLayer[id]();
// $map.on('style.load', addOverlayLayer[id]);
// }
// } else if ($map.getLayer(id)) {
// $map.removeLayer(id);
// $map.off('style.load', addOverlayLayer[id]);
// }
// });
console.log($currentOverlays);
let overlayLayers = getLayers($currentOverlays);
Object.keys(overlayLayers).forEach((id) => {
if (overlayLayers[id]) {
if (!addOverlayLayer.hasOwnProperty(id)) {
addOverlayLayer[id] = addOverlayLayerForId(id);
}
if (!$map.getLayer(id)) {
addOverlayLayer[id]();
$map.on('style.load', addOverlayLayer[id]);
}
} else if ($map.getLayer(id)) {
$map.removeLayer(id);
$map.off('style.load', addOverlayLayer[id]);
}
});
}
let selectedBasemap = writable(get(currentBasemap));
@@ -60,18 +61,6 @@
selectedBasemap.set(value);
});
let selectedOverlays = writable(get(currentOverlays));
selectedOverlays.subscribe((value) => {
// Updates coming from checkboxes
if (value != get(currentOverlays)) {
currentOverlays.set(value);
}
});
currentOverlays.subscribe((value) => {
// Updates coming from the database, or from the user toggling overlays
selectedOverlays.set(value);
});
let addOverlayLayer: { [key: string]: () => void } = {};
function addOverlayLayerForId(id: string) {
return () => {
@@ -124,7 +113,7 @@
layerTree={$selectedOverlayTree}
name="overlays"
multiple={true}
bind:checked={$selectedOverlays}
bind:checked={$currentOverlays}
/>
</div>
<Separator class="w-full" />

21
website/src/lib/components/layer-control/LayerControlSettings.svelte
View File

@@ -9,21 +9,12 @@
import { Settings } from 'lucide-svelte';
import { basemapTree, overlayTree, type CollapsedInfoTreeType } from '$lib/assets/layers';
import { basemapTree, overlayTree } from '$lib/assets/layers';
import { settings } from '$lib/db';
import { _ } from 'svelte-i18n';
const { selectedBasemapTree, selectedOverlayTree } = settings;
let checkedBasemaps: CollapsedInfoTreeType<{ [key: string]: boolean }> = {
self: {},
children: {}
};
let checkedOverlays: CollapsedInfoTreeType<{ [key: string]: boolean }> = {
self: {},
children: {}
};
</script>
<Sheet.Root>
@@ -48,10 +39,7 @@
layerTree={basemapTree}
name="basemapSettings"
multiple={true}
onValueChange={(id, checked) => {
console.log('basemap', id, checked);
}}
bind:checked={checkedBasemaps}
bind:checked={$selectedBasemapTree}
/>
</ScrollArea>
<Separator />
@@ -60,10 +48,7 @@
layerTree={overlayTree}
name="overlaySettings"
multiple={true}
onValueChange={(id, checked) => {
console.log('overlay', id, checked);
}}
bind:checked={checkedOverlays}
bind:checked={$selectedOverlayTree}
/>
</ScrollArea>
</Accordion.Content>

8
website/src/lib/components/layer-control/LayerTree.svelte
View File

@@ -1,10 +1,6 @@
<script lang="ts">
import LayerTreeNode from './LayerTreeNode.svelte';
import {
type CheckedInfoTreeType,
type CollapsedInfoTreeType,
type LayerTreeType
} from '$lib/assets/layers';
import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
export let layerTree: LayerTreeType;
export let name: string;
@@ -15,7 +11,7 @@
self: true,
children: {}
};
export let checked: CheckedInfoTreeType = {};
export let checked: LayerTreeType = {};
</script>
<form>

81
website/src/lib/components/layer-control/LayerTreeNode.svelte
View File

@@ -6,11 +6,8 @@
import { ChevronDown, ChevronUp } from 'lucide-svelte';
import {
type CheckedInfoTreeType,
type CollapsedInfoTreeType,
type LayerTreeType
} from '$lib/assets/layers';
import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
import { anySelectedLayer } from './utils';
import { _ } from 'svelte-i18n';
@@ -31,48 +28,40 @@
});
}
export let checked: CheckedInfoTreeType;
if (Array.isArray(node)) {
if (multiple) {
node.forEach((id) => {
if (!checked.hasOwnProperty(id)) {
checked[id] = false;
}
});
}
} else {
Object.keys(node).forEach((id) => {
if (!checked.hasOwnProperty(id)) {
export let checked: LayerTreeType;
Object.keys(node).forEach((id) => {
if (!checked.hasOwnProperty(id)) {
if (typeof node[id] == 'boolean') {
checked[id] = false;
} else {
checked[id] = {};
}
});
}
}
});
</script>
{#if Array.isArray(node)}
<div class="flex flex-col gap-1 mt-1">
{#each node as id}
<div class="flex flex-row items-center gap-2">
{#if multiple}
<Checkbox
id="{name}-{id}"
{name}
value={id}
bind:checked={checked[id]}
class="scale-90"
/>
{:else}
<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
{/if}
<Label for="{name}-{id}" class="flex flex-row items-center gap-1"
>{$_(`layers.label.${id}`)}</Label
>
</div>
{/each}
</div>
{:else}
<div class="flex flex-col gap-1">
{#each Object.keys(node) as id}
<div class="flex flex-col gap-1">
{#each Object.keys(node) as id}
{#if typeof node[id] == 'boolean'}
{#if node[id]}
<div class="flex flex-row items-center gap-2 first:mt-1">
{#if multiple}
<Checkbox
id="{name}-{id}"
{name}
value={id}
bind:checked={checked[id]}
class="scale-90"
/>
{:else}
<input id="{name}-{id}" type="radio" {name} value={id} bind:group={selected} />
{/if}
<Label for="{name}-{id}" class="flex flex-row items-center gap-1"
>{$_(`layers.label.${id}`)}</Label
>
</div>
{/if}
{:else if anySelectedLayer(node[id])}
<Collapsible.Root bind:open={open.children[id].self} class="ml-1">
<Collapsible.Trigger class="w-full"
><Button
@@ -98,9 +87,9 @@
/>
</Collapsible.Content>
</Collapsible.Root>
{/each}
</div>
{/if}
{/if}
{/each}
</div>
<style lang="postcss">
div :global(input[type='radio']) {

27
website/src/lib/components/layer-control/utils.ts Normal file
View File

@@ -0,0 +1,27 @@
import type { LayerTreeType } from "$lib/assets/layers";
export function anySelectedLayer(node: LayerTreeType) {
return Object.keys(node).find((id) => {
if (typeof node[id] == "boolean") {
if (node[id]) {
return true;
}
} else {
if (anySelectedLayer(node[id])) {
return true;
}
}
return false;
}) !== undefined;
}
export function getLayers(node: LayerTreeType, layers: { [key: string]: boolean } = {}): { [key: string]: boolean } {
Object.keys(node).find((id) => {
if (typeof node[id] == "boolean") {
layers[id] = node[id];
} else {
getLayers(node[id], layers);
}
});
return layers;
}

84
website/src/lib/db.ts
View File

@@ -4,7 +4,7 @@ import { type FreezedObject, type Patch, produceWithPatches, applyPatches } from
import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
import { fileOrder, selectedFiles } from './stores';
import { mode } from 'mode-watcher';
import { defaultBasemap, defaultBasemapTree, defaultOverlayTree } from './assets/layers';
import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays } from './assets/layers';
class Database extends Dexie {
@@ -29,6 +29,46 @@ class Database extends Dexie {
const db = new Database();
// Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber, and updates to the store are pushed to the DB
function dexieSettingStore(setting: string, initial: any): Writable<any> {
let store = writable(initial);
liveQuery(() => db.settings.get(setting)).subscribe(value => {
if (value !== undefined) {
store.set(value);
}
});
return {
subscribe: store.subscribe,
set: (value: any) => db.settings.put(value, setting),
update: (callback: (value: any) => any) => {
let newValue = callback(get(store));
db.settings.put(newValue, setting);
}
};
}
export const settings = {
distanceUnits: dexieSettingStore('distanceUnits', 'metric'),
velocityUnits: dexieSettingStore('velocityUnits', 'speed'),
temperatureUnits: dexieSettingStore('temperatureUnits', 'celsius'),
mode: dexieSettingStore('mode', (() => {
let currentMode: string | undefined = get(mode);
if (currentMode === undefined) {
currentMode = 'system';
}
return currentMode;
})()),
routing: dexieSettingStore('routing', true),
routingProfile: dexieSettingStore('routingProfile', 'bike'),
privateRoads: dexieSettingStore('privateRoads', false),
currentBasemap: dexieSettingStore('currentBasemap', defaultBasemap),
previousBasemap: dexieSettingStore('previousBasemap', defaultBasemap),
selectedBasemapTree: dexieSettingStore('selectedBasemapTree', defaultBasemapTree),
currentOverlays: dexieSettingStore('currentOverlays', defaultOverlays),
previousOverlays: dexieSettingStore('previousOverlays', defaultOverlays),
selectedOverlayTree: dexieSettingStore('selectedOverlayTree', defaultOverlayTree),
};
// Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber
function dexieStore<T>(querier: () => T | Promise<T>, initial?: T): Readable<T> {
let store = writable<T>(initial);
@@ -261,44 +301,4 @@ export const dbUtils = {
});
}
}
}
function dexieSettingStore(setting: string, initial: any): Writable<any> {
let store = writable(initial);
liveQuery(() => db.settings.get(setting)).subscribe(value => {
if (value !== undefined) {
console.log('setting', setting, 'changed to', value);
store.set(value);
}
});
return {
subscribe: store.subscribe,
set: (value: any) => db.settings.put(value, setting),
update: (callback: (value: any) => any) => {
let newValue = callback(get(store));
db.settings.put(newValue, setting);
}
};
}
export const settings = {
distanceUnits: dexieSettingStore('distanceUnits', 'metric'),
velocityUnits: dexieSettingStore('velocityUnits', 'speed'),
temperatureUnits: dexieSettingStore('temperatureUnits', 'celsius'),
mode: dexieSettingStore('mode', (() => {
let currentMode: string | undefined = get(mode);
if (currentMode === undefined) {
currentMode = 'system';
}
return currentMode;
})()),
routing: dexieSettingStore('routing', true),
routingProfile: dexieSettingStore('routingProfile', 'bike'),
privateRoads: dexieSettingStore('privateRoads', false),
currentBasemap: dexieSettingStore('currentBasemap', defaultBasemap),
previousBasemap: dexieSettingStore('previousBasemap', defaultBasemap),
selectedBasemapTree: dexieSettingStore('selectedBasemapTree', defaultBasemapTree),
currentOverlays: dexieSettingStore('currentOverlays', {}),
previousOverlays: dexieSettingStore('previousOverlays', {}),
selectedOverlayTree: dexieSettingStore('selectedOverlayTree', defaultOverlayTree),
};
}