steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-12-02 18:12:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

progress

Browse Source
This commit is contained in:
vcoppe
2025-10-17 23:54:45 +02:00
parent 0733562c0d
commit a73da0d81d
62 changed files with 1343 additions and 1162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
website/src/lib/components/map/Map.svelte
View File

@@ -4,11 +4,10 @@
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
import { Button } from '$lib/components/ui/button';
import { settings } from '$lib/logic/settings.svelte';
import { i18n } from '$lib/i18n.svelte';
import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
import { page } from '$app/state';
import { map } from '$lib/components/map/utils.svelte';
import { map } from '$lib/components/map/map';
let {
accessToken = PUBLIC_MAPBOX_TOKEN,
@@ -29,9 +28,6 @@
let webgl2Supported = $state(true);
let embeddedApp = $state(false);
const { distanceUnits, elevationProfile, treeFileView, bottomPanelSize, rightPanelSize } =
settings;
onMount(() => {
let gl = document.createElement('canvas').getContext('webgl2');
if (!gl) {
@@ -52,23 +48,12 @@
language = 'en';
}
map.init(PUBLIC_MAPBOX_TOKEN, language, distanceUnits.value, hash, geocoder, geolocate);
map.init(PUBLIC_MAPBOX_TOKEN, language, hash, geocoder, geolocate);
});
onDestroy(() => {
map.destroy();
});
$effect(() => {
if (
!treeFileView.value ||
!elevationProfile.value ||
bottomPanelSize.value ||
rightPanelSize.value
) {
map.resize();
}
});
</script>
<div class={className}>

28
website/src/lib/components/map/MapPopup.svelte
View File

@@ -3,20 +3,32 @@
import WaypointPopup from '$lib/components/map/gpx-layer/WaypointPopup.svelte';
import TrackpointPopup from '$lib/components/map/gpx-layer/TrackpointPopup.svelte';
import OverpassPopup from '$lib/components/map/layer-control/OverpassPopup.svelte';
import type { PopupItem } from '$lib/components/map/map.svelte';
import type { PopupItem } from '$lib/components/map/map-popup';
import type { Writable } from 'svelte/store';
let { item, container = null }: { item: PopupItem | null; container: HTMLDivElement | null } =
let {
item,
onContainerReady,
}: { item: Writable<PopupItem | null>; onContainerReady: (div: HTMLDivElement) => void } =
$props();
let container: HTMLDivElement | null = $state(null);
$effect(() => {
if (container) {
onContainerReady(container);
}
});
</script>
<div bind:this={container}>
{#if item}
{#if item.item instanceof Waypoint}
<WaypointPopup waypoint={item} />
{:else if item.item instanceof TrackPoint}
<TrackpointPopup trackpoint={item} />
{#if $item}
{#if $item.item instanceof Waypoint}
<WaypointPopup waypoint={$item} />
{:else if $item.item instanceof TrackPoint}
<TrackpointPopup trackpoint={$item} />
{:else}
<OverpassPopup poi={item} />
<OverpassPopup poi={$item} />
{/if}
{/if}
</div>

2
website/src/lib/components/map/custom-control/CustomControl.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import CustomControl from './CustomControl';
import { map } from '$lib/components/map/utils.svelte';
import { map } from '$lib/components/map/map';
import { onMount, type Snippet } from 'svelte';
let {

2
website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte
View File

@@ -10,7 +10,7 @@
class: className = '',
}: {
coordinates: Coordinates;
onCopy: () => void;
onCopy?: () => void;
class?: string;
} = $props();
</script>

5
website/src/lib/components/map/gpx-layer/DistanceMarkers.ts
View File

@@ -1,9 +1,8 @@
import { settings } from '$lib/db';
import { gpxStatistics } from '$lib/stores';
import { settings } from '$lib/logic/settings';
import type { GeoJSONSource } from 'mapbox-gl';
import { get } from 'svelte/store';
// const { distanceMarkers, distanceUnits } = settings;
const { distanceMarkers, distanceUnits } = settings;
const stops = [
[100, 0],

83
website/src/lib/components/map/gpx-layer/GPXLayers.svelte
View File

@@ -1,56 +1,41 @@
<script lang="ts">
import { map, gpxLayers } from '$lib/stores';
import { GPXLayer } from './GPXLayer';
import { fileObservers } from '$lib/db';
import { DistanceMarkers } from './DistanceMarkers';
import { StartEndMarkers } from './StartEndMarkers';
import { onDestroy } from 'svelte';
import { createPopups, removePopups } from './GPXLayerPopup';
import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
import { onMount } from 'svelte';
// import { map, gpxLayers } from '$lib/stores';
// import { GPXLayer } from './gpx-layer';
// import { DistanceMarkers } from './DistanceMarkers';
// import { StartEndMarkers } from './StartEndMarkers';
// import { onDestroy } from 'svelte';
// import { createPopups, removePopups } from './GPXLayerPopup';
let distanceMarkers: DistanceMarkers | undefined = undefined;
let startEndMarkers: StartEndMarkers | undefined = undefined;
// let distanceMarkers = $derived(map.current ? new DistanceMarkers(map.current) : undefined);
// let startEndMarkers = $derived(map.current ? new StartEndMarkers(map.current) : undefined);
$: if ($map && $fileObservers) {
// remove layers for deleted files
gpxLayers.forEach((layer, fileId) => {
if (!$fileObservers.has(fileId)) {
layer.remove();
gpxLayers.delete(fileId);
} else if ($map !== layer.map) {
layer.updateMap($map);
}
});
// add layers for new files
$fileObservers.forEach((file, fileId) => {
if (!gpxLayers.has(fileId)) {
gpxLayers.set(fileId, new GPXLayer($map, fileId, file));
}
});
}
// $: if ($map) {
// if (distanceMarkers) {
// distanceMarkers.remove();
// }
// if (startEndMarkers) {
// startEndMarkers.remove();
// }
// createPopups($map);
// distanceMarkers = new DistanceMarkers($map);
// startEndMarkers = new StartEndMarkers($map);
// }
$: if ($map) {
if (distanceMarkers) {
distanceMarkers.remove();
}
if (startEndMarkers) {
startEndMarkers.remove();
}
createPopups($map);
distanceMarkers = new DistanceMarkers($map);
startEndMarkers = new StartEndMarkers($map);
}
// onDestroy(() => {
// removePopups();
// if (distanceMarkers) {
// distanceMarkers.remove();
// distanceMarkers = undefined;
// }
// if (startEndMarkers) {
// startEndMarkers.remove();
// startEndMarkers = undefined;
// }
// });
onDestroy(() => {
gpxLayers.forEach((layer) => layer.remove());
gpxLayers.clear();
removePopups();
if (distanceMarkers) {
distanceMarkers.remove();
distanceMarkers = undefined;
}
if (startEndMarkers) {
startEndMarkers.remove();
startEndMarkers = undefined;
}
onMount(() => {
gpxLayers.init();
});
</script>

2
website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte
View File

@@ -1,11 +1,11 @@
<script lang="ts">
import type { TrackPoint } from 'gpx';
import type { PopupItem } from '$lib/components/map/map.svelte';
import CopyCoordinates from '$lib/components/map/gpx-layer/CopyCoordinates.svelte';
import * as Card from '$lib/components/ui/card';
import WithUnits from '$lib/components/WithUnits.svelte';
import { Compass, Mountain, Timer } from '@lucide/svelte';
import { i18n } from '$lib/i18n.svelte';
import type { PopupItem } from '$lib/components/map/map';
let { trackpoint }: { trackpoint: PopupItem<TrackPoint> } = $props();
</script>

14
website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
View File

@@ -3,16 +3,16 @@
import { Button } from '$lib/components/ui/button';
import Shortcut from '$lib/components/Shortcut.svelte';
import CopyCoordinates from '$lib/components/map/gpx-layer/CopyCoordinates.svelte';
import { deleteWaypoint } from './GPXLayerPopup';
import WithUnits from '$lib/components/WithUnits.svelte';
import { Dot, ExternalLink, Trash2 } from '@lucide/svelte';
import { tool, Tool } from '$lib/components/toolbar/utils.svelte';
import { currentTool, Tool } from '$lib/components/toolbar/tools';
import { getSymbolKey, symbols } from '$lib/assets/symbols';
import { i18n } from '$lib/i18n.svelte';
import sanitizeHtml from 'sanitize-html';
import type { Waypoint } from 'gpx';
import type { PopupItem } from '$lib/components/map/map.svelte';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import type { PopupItem } from '$lib/components/map/map';
import { fileActions } from '$lib/logic/file-actions';
export let waypoint: PopupItem<Waypoint>;
@@ -80,11 +80,15 @@
</ScrollArea>
<div class="mt-2 flex flex-col gap-1">
<CopyCoordinates coordinates={waypoint.item.attributes} />
{#if tool.current === Tool.WAYPOINT}
{#if $currentTool === Tool.WAYPOINT}
<Button
class="w-full px-2 py-1 h-8 justify-start"
variant="outline"
onclick={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
onclick={() => {
if (waypoint.fileId) {
fileActions.deleteWaypoint(waypoint.fileId, waypoint.item._data.index);
}
}}
>
<Trash2 size="16" class="mr-1" />
{i18n._('menu.delete')}

7
website/src/lib/components/map/gpx-layer/GPXLayerPopup.ts → website/src/lib/components/map/gpx-layer/gpx-layer-popup.ts
View File

@@ -1,5 +1,4 @@
import { dbUtils } from '$lib/db';
import { MapPopup } from '$lib/components/map/map.svelte';
import { MapPopup } from '$lib/components/map/map-popup';
export let waypointPopup: MapPopup | null = null;
export let trackpointPopup: MapPopup | null = null;
@@ -38,7 +37,3 @@ export function removePopups() {
trackpointPopup = null;
}
}
export function deleteWaypoint(fileId: string, waypointIndex: number) {
dbUtils.applyToFile(fileId, (file) => file.replaceWaypoints(waypointIndex, waypointIndex, []));
}

134
website/src/lib/components/map/gpx-layer/GPXLayer.ts → website/src/lib/components/map/gpx-layer/gpx-layer.ts
View File

@@ -1,8 +1,7 @@
import { currentTool, map, splitAs, Tool } from '$lib/stores';
import { settings, type GPXFileWithStatistics, dbUtils } from '$lib/db';
import { get, type Readable } from 'svelte/store';
import mapboxgl from 'mapbox-gl';
import { waypointPopup, deleteWaypoint, trackpointPopup } from './GPXLayerPopup';
import { map } from '$lib/components/map/map';
import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
import {
ListTrackSegmentItem,
ListWaypointItem,
@@ -19,9 +18,16 @@ import {
setPointerCursor,
setScissorsCursor,
} from '$lib/utils';
import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/utils.svelte';
import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/waypoint';
import { MapPin, Square } from 'lucide-static';
import { getSymbolKey, symbols } from '$lib/assets/symbols';
import type { GPXFileWithStatistics } from '$lib/logic/statistics';
import { selection } from '$lib/logic/selection';
import { settings } from '$lib/logic/settings';
import { currentTool, Tool } from '$lib/components/toolbar/tools';
import { fileActionManager } from '$lib/logic/file-action-manager';
import { fileActions } from '$lib/logic/file-actions';
import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
const colors = [
'#ff0000',
@@ -81,10 +87,9 @@ function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
</svg>`;
}
// const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
export class GPXLayer {
map: mapboxgl.Map;
fileId: string;
file: Readable<GPXFileWithStatistics | undefined>;
layerColor: string;
@@ -100,15 +105,18 @@ export class GPXLayer {
layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
constructor(
map: mapboxgl.Map,
fileId: string,
file: Readable<GPXFileWithStatistics | undefined>
) {
this.map = map;
constructor(fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
this.fileId = fileId;
this.file = file;
this.layerColor = getColor();
this.unsubscribe.push(
map.subscribe(($map) => {
if ($map) {
$map.on('style.import.load', this.updateBinded);
this.update();
}
})
);
this.unsubscribe.push(file.subscribe(this.updateBinded));
this.unsubscribe.push(
selection.subscribe(($selection) => {
@@ -135,13 +143,12 @@ export class GPXLayer {
})
);
this.draggable = get(currentTool) === Tool.WAYPOINT;
this.map.on('style.import.load', this.updateBinded);
}
update() {
const _map = get(map);
let file = get(this.file)?.file;
if (!file) {
if (!_map || !file) {
return;
}
@@ -155,18 +162,18 @@ export class GPXLayer {
}
try {
let source = this.map.getSource(this.fileId);
let source = _map.getSource(this.fileId);
if (source) {
source.setData(this.getGeoJSON());
} else {
this.map.addSource(this.fileId, {
_map.addSource(this.fileId, {
type: 'geojson',
data: this.getGeoJSON(),
});
}
if (!this.map.getLayer(this.fileId)) {
this.map.addLayer({
if (!_map.getLayer(this.fileId)) {
_map.addLayer({
id: this.fileId,
type: 'line',
source: this.fileId,
@@ -181,16 +188,16 @@ export class GPXLayer {
},
});
this.map.on('click', this.fileId, this.layerOnClickBinded);
this.map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
this.map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
this.map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
this.map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
_map.on('click', this.fileId, this.layerOnClickBinded);
_map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
_map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
_map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
_map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
}
if (get(directionMarkers)) {
if (!this.map.getLayer(this.fileId + '-direction')) {
this.map.addLayer(
if (!_map.getLayer(this.fileId + '-direction')) {
_map.addLayer(
{
id: this.fileId + '-direction',
type: 'symbol',
@@ -212,12 +219,12 @@ export class GPXLayer {
'text-halo-color': 'white',
},
},
this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
_map.getLayer('distance-markers') ? 'distance-markers' : undefined
);
}
} else {
if (this.map.getLayer(this.fileId + '-direction')) {
this.map.removeLayer(this.fileId + '-direction');
if (_map.getLayer(this.fileId + '-direction')) {
_map.removeLayer(this.fileId + '-direction');
}
}
@@ -228,7 +235,7 @@ export class GPXLayer {
}
});
this.map.setFilter(
_map.setFilter(
this.fileId,
[
'any',
@@ -240,8 +247,8 @@ export class GPXLayer {
],
{ validate: false }
);
if (this.map.getLayer(this.fileId + '-direction')) {
this.map.setFilter(
if (_map.getLayer(this.fileId + '-direction')) {
_map.setFilter(
this.fileId + '-direction',
[
'any',
@@ -299,7 +306,7 @@ export class GPXLayer {
}
if (get(currentTool) === Tool.WAYPOINT && e.shiftKey) {
deleteWaypoint(this.fileId, marker._waypoint._data.index);
fileActions.deleteWaypoint(this.fileId, marker._waypoint._data.index);
e.stopPropagation();
return;
}
@@ -312,11 +319,11 @@ export class GPXLayer {
false
)
) {
addSelectItem(
selection.addSelectItem(
new ListWaypointItem(this.fileId, marker._waypoint._data.index)
);
} else {
selectItem(
selection.selectItem(
new ListWaypointItem(this.fileId, marker._waypoint._data.index)
);
}
@@ -336,7 +343,7 @@ export class GPXLayer {
resetCursor();
marker.getElement().style.cursor = '';
getElevation([marker._waypoint]).then((ele) => {
dbUtils.applyToFile(this.fileId, (file) => {
fileActionManager.applyToFile(this.fileId, (file) => {
let latLng = marker.getLngLat();
let wpt = file.wpt[marker._waypoint._data.index];
wpt.setCoordinates({
@@ -361,36 +368,31 @@ export class GPXLayer {
this.markers.forEach((marker) => {
if (!marker._waypoint._data.hidden) {
marker.addTo(this.map);
marker.addTo(_map);
} else {
marker.remove();
}
});
}
updateMap(map: mapboxgl.Map) {
this.map = map;
this.map.on('style.import.load', this.updateBinded);
this.update();
}
remove() {
if (get(map)) {
this.map.off('click', this.fileId, this.layerOnClickBinded);
this.map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
this.map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
this.map.off('style.import.load', this.updateBinded);
const _map = get(map);
if (_map) {
_map.off('click', this.fileId, this.layerOnClickBinded);
_map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
_map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
_map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
_map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
_map.off('style.import.load', this.updateBinded);
if (this.map.getLayer(this.fileId + '-direction')) {
this.map.removeLayer(this.fileId + '-direction');
if (_map.getLayer(this.fileId + '-direction')) {
_map.removeLayer(this.fileId + '-direction');
}
if (this.map.getLayer(this.fileId)) {
this.map.removeLayer(this.fileId);
if (_map.getLayer(this.fileId)) {
_map.removeLayer(this.fileId);
}
if (this.map.getSource(this.fileId)) {
this.map.removeSource(this.fileId);
if (_map.getSource(this.fileId)) {
_map.removeSource(this.fileId);
}
}
@@ -404,13 +406,17 @@ export class GPXLayer {
}
moveToFront() {
if (this.map.getLayer(this.fileId)) {
this.map.moveLayer(this.fileId);
const _map = get(map);
if (!_map) {
return;
}
if (this.map.getLayer(this.fileId + '-direction')) {
this.map.moveLayer(
if (_map.getLayer(this.fileId)) {
_map.moveLayer(this.fileId);
}
if (_map.getLayer(this.fileId + '-direction')) {
_map.moveLayer(
this.fileId + '-direction',
this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
_map.getLayer('distance-markers') ? 'distance-markers' : undefined
);
}
}
@@ -468,7 +474,7 @@ export class GPXLayer {
new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
)
) {
dbUtils.split(splitAs.current, this.fileId, trackIndex, segmentIndex, {
fileActions.split(get(splitAs), this.fileId, trackIndex, segmentIndex, {
lat: e.lngLat.lat,
lon: e.lngLat.lng,
});
@@ -492,9 +498,9 @@ export class GPXLayer {
}
if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) {
addSelectItem(item);
selection.addSelectItem(item);
} else {
selectItem(item);
selection.selectItem(item);
}
}

38
website/src/lib/components/map/gpx-layer/gpx-layers.ts Normal file
View File

@@ -0,0 +1,38 @@
import { GPXFileStateCollectionObserver } from '$lib/logic/file-state';
import { GPXLayer } from './gpx-layer';
export class GPXLayerCollection {
private _layers: Map<string, GPXLayer>;
private _fileStateCollectionObserver: GPXFileStateCollectionObserver | null = null;
constructor() {
this._layers = new Map<string, GPXLayer>();
}
init() {
if (this._fileStateCollectionObserver) {
return;
}
this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
(fileId, fileState) => {
const layer = new GPXLayer(fileId, fileState);
this._layers.set(fileId, layer);
},
(fileId) => {
const layer = this._layers.get(fileId);
if (layer) {
layer.remove();
this._layers.delete(fileId);
}
},
() => {
this._layers.forEach((layer) => {
layer.remove();
});
this._layers.clear();
}
);
}
}
export const gpxLayers = new GPXLayerCollection();

24
website/src/lib/components/map/layer-control/CustomLayers.svelte
View File

@@ -18,12 +18,12 @@
Layers2,
} from '@lucide/svelte';
import { i18n } from '$lib/i18n.svelte';
import { settings } from '$lib/db';
import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
import { map } from '$lib/stores';
import { onDestroy, onMount } from 'svelte';
import Sortable from 'sortablejs/Sortable';
import { customBasemapUpdate } from './utils.svelte';
import { customBasemapUpdate } from './utils';
import { settings } from '$lib/logic/settings';
import { map } from '$lib/components/map/map';
const {
customLayers,
@@ -312,10 +312,10 @@
<div class="flex flex-row items-center gap-2" data-id={id}>
<Move size="12" />
<span class="grow">{$customLayers[id].name}</span>
<Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
<Button variant="outline" onclick={() => (selectedLayerId = id)} class="p-1 h-7">
<Pencil size="16" />
</Button>
<Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
<Button variant="outline" onclick={() => deleteLayer(id)} class="p-1 h-7">
<Trash2 size="16" />
</Button>
</div>
@@ -338,10 +338,10 @@
<div class="flex flex-row items-center gap-2" data-id={id}>
<Move size="12" />
<span class="grow">{$customLayers[id].name}</span>
<Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
<Button variant="outline" onclick={() => (selectedLayerId = id)} class="p-1 h-7">
<Pencil size="16" />
</Button>
<Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
<Button variant="outline" onclick={() => deleteLayer(id)} class="p-1 h-7">
<Trash2 size="16" />
</Button>
</div>
@@ -373,7 +373,7 @@
/>
{#if tileUrls.length > 1}
<Button
on:click={() =>
onclick={() =>
(tileUrls = tileUrls.filter((_, index) => index !== i))}
variant="outline"
class="p-1 h-8"
@@ -383,7 +383,7 @@
{/if}
{#if i === tileUrls.length - 1}
<Button
on:click={() => (tileUrls = [...tileUrls, ''])}
onclick={() => (tileUrls = [...tileUrls, ''])}
variant="outline"
class="p-1 h-8"
>
@@ -416,16 +416,16 @@
</RadioGroup.Root>
{#if selectedLayerId}
<div class="mt-2 flex flex-row gap-2">
<Button variant="outline" on:click={createLayer} class="grow">
<Button variant="outline" onclick={createLayer} class="grow">
<Save size="16" class="mr-1" />
{i18n._('layers.custom_layers.update')}
</Button>
<Button variant="outline" on:click={() => (selectedLayerId = undefined)}>
<Button variant="outline" onclick={() => (selectedLayerId = undefined)}>
<CircleX size="16" />
</Button>
</div>
{:else}
<Button variant="outline" class="mt-2" on:click={createLayer}>
<Button variant="outline" class="mt-2" onclick={createLayer}>
<CirclePlus size="16" class="mr-1" />
{i18n._('layers.custom_layers.create')}
</Button>

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

@@ -1,18 +1,18 @@
<script lang="ts">
import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
import LayerTree from './LayerTree.svelte';
// import { OverpassLayer } from './OverpassLayer';
import { OverpassLayer } from './OverpassLayer';
import { Separator } from '$lib/components/ui/separator';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import { Layers } from '@lucide/svelte';
import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
import { settings } from '$lib/logic/settings.svelte';
import { map } from '$lib/components/map/utils.svelte';
import { customBasemapUpdate, getLayers } from './utils.svelte';
import { settings } from '$lib/logic/settings';
import { map } from '$lib/components/map/map';
import { customBasemapUpdate, getLayers } from './utils';
import type { ImportSpecification, StyleSpecification } from 'mapbox-gl';
let container: HTMLDivElement;
// let overpassLayer: OverpassLayer;
let overpassLayer: OverpassLayer;
const {
currentBasemap,
@@ -27,17 +27,17 @@
} = settings;
function setStyle() {
if (!map.value) {
if (!$map) {
return;
}
let basemap = basemaps.hasOwnProperty(currentBasemap.value)
? basemaps[currentBasemap.value]
: (customLayers.value[currentBasemap.value]?.value ?? basemaps[defaultBasemap]);
map.value.removeImport('basemap');
let basemap = basemaps.hasOwnProperty($currentBasemap)
? basemaps[$currentBasemap]
: ($customLayers[$currentBasemap] ?? basemaps[defaultBasemap]);
$map.removeImport('basemap');
if (typeof basemap === 'string') {
map.value.addImport({ id: 'basemap', url: basemap }, 'overlays');
$map.addImport({ id: 'basemap', url: basemap }, 'overlays');
} else {
map.value.addImport(
$map.addImport(
{
id: 'basemap',
url: '',
@@ -49,23 +49,21 @@
}
$effect(() => {
if (map.value && (currentBasemap.value || customBasemapUpdate.value)) {
if ($map && ($currentBasemap || $customBasemapUpdate)) {
setStyle();
}
});
function addOverlay(id: string) {
if (!map.value) {
if (!$map) {
return;
}
try {
let overlay = customLayers.value.hasOwnProperty(id)
? customLayers.value[id].value
: overlays[id];
let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
if (typeof overlay === 'string') {
map.value.addImport({ id, url: overlay });
$map.addImport({ id, url: overlay });
} else {
if (opacities.value.hasOwnProperty(id)) {
if ($opacities.hasOwnProperty(id)) {
overlay = {
...overlay,
layers: (overlay as StyleSpecification).layers.map((layer) => {
@@ -73,13 +71,13 @@
if (!layer.paint) {
layer.paint = {};
}
layer.paint['raster-opacity'] = opacities.value[id];
layer.paint['raster-opacity'] = $opacities[id];
}
return layer;
}),
};
}
map.value.addImport({
$map.addImport({
id,
url: '',
data: overlay as StyleSpecification,
@@ -91,13 +89,13 @@
}
function updateOverlays() {
if (map.value && currentOverlays.value && opacities.value) {
let overlayLayers = getLayers(currentOverlays.value);
if ($map && $currentOverlays && $opacities) {
let overlayLayers = getLayers($currentOverlays);
try {
let activeOverlays =
map.value
$map
.getStyle()
?.imports?.reduce(
.imports?.reduce(
(
acc: Record<string, ImportSpecification>,
imprt: ImportSpecification
@@ -113,7 +111,7 @@
) || {};
let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
toRemove.forEach((id) => {
map.value?.removeImport(id);
$map?.removeImport(id);
});
let toAdd = Object.entries(overlayLayers)
.filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
@@ -128,19 +126,19 @@
}
$effect(() => {
if (map.value && currentOverlays.value && opacities.value) {
if ($map && $currentOverlays && $opacities) {
updateOverlays();
}
});
// map.onLoad((map: mapboxgl.Map) => {
// if (overpassLayer) {
// overpassLayer.remove();
// }
// overpassLayer = new OverpassLayer(map);
// overpassLayer.add();
// map.on('style.import.load', updateOverlays);
// });
map.onLoad((_map: mapboxgl.Map) => {
if (overpassLayer) {
overpassLayer.remove();
}
overpassLayer = new OverpassLayer(_map);
overpassLayer.add();
_map.on('style.import.load', updateOverlays);
});
let open = $state(false);
function openLayerControl() {
@@ -185,34 +183,34 @@
<div class="h-fit">
<div class="p-2">
<LayerTree
layerTree={selectedBasemapTree.value}
layerTree={$selectedBasemapTree}
name="basemaps"
selected={currentBasemap.value}
selected={$currentBasemap}
onselect={(value) => {
previousBasemap.value = currentBasemap.value;
currentBasemap.value = value;
$previousBasemap = $currentBasemap;
$currentBasemap = value;
}}
/>
</div>
<Separator class="w-full" />
<div class="p-2">
{#if currentOverlays.value}
{#if $currentOverlays}
<LayerTree
layerTree={selectedOverlayTree.value}
layerTree={$selectedOverlayTree}
name="overlays"
multiple={true}
bind:checked={currentOverlays.value}
bind:checked={$currentOverlays}
/>
{/if}
</div>
<Separator class="w-full" />
<div class="p-2">
{#if currentOverpassQueries.value}
{#if $currentOverpassQueries}
<LayerTree
layerTree={selectedOverpassTree.value}
layerTree={$selectedOverpassTree}
name="overpass"
multiple={true}
bind:checked={currentOverpassQueries.value}
bind:checked={$currentOverpassQueries}
/>
{/if}
</div>

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

@@ -14,11 +14,11 @@
overlayTree,
overpassTree,
} from '$lib/assets/layers';
import { getLayers, isSelected, toggle } from '$lib/components/map/layer-control/utils.svelte';
import { settings } from '$lib/db';
import { getLayers, isSelected, toggle } from '$lib/components/map/layer-control/utils';
import { i18n } from '$lib/i18n.svelte';
import { map } from '$lib/components/map/map.svelte';
import { map } from '$lib/components/map/map';
import CustomLayers from './CustomLayers.svelte';
import { settings } from '$lib/logic/settings';
const {
selectedBasemapTree,
@@ -48,29 +48,33 @@
}
}
$: if ($selectedBasemapTree && $currentBasemap) {
if (!isSelected($selectedBasemapTree, $currentBasemap)) {
if (!isSelected($selectedBasemapTree, defaultBasemap)) {
$selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
$effect(() => {
if ($selectedBasemapTree && $currentBasemap) {
if (!isSelected($selectedBasemapTree, $currentBasemap)) {
if (!isSelected($selectedBasemapTree, defaultBasemap)) {
$selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
}
$currentBasemap = defaultBasemap;
}
$currentBasemap = defaultBasemap;
}
}
});
$: if ($selectedOverlayTree && $currentOverlays) {
let overlayLayers = getLayers($currentOverlays);
let toRemove = Object.entries(overlayLayers).filter(
([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
);
if (toRemove.length > 0) {
currentOverlays.update((tree) => {
toRemove.forEach(([id]) => {
toggle(tree, id);
$effect(() => {
if ($selectedOverlayTree && $currentOverlays) {
let overlayLayers = getLayers($currentOverlays);
let toRemove = Object.entries(overlayLayers).filter(
([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
);
if (toRemove.length > 0) {
currentOverlays.update((tree) => {
toRemove.forEach(([id]) => {
toggle(tree, id);
});
return tree;
});
return tree;
});
}
}
}
});
</script>
<Sheet.Root bind:open>
@@ -164,11 +168,12 @@
onValueChange={(value) => {
if (selectedOverlay) {
if (
map.current &&
$map &&
$currentOverlays &&
isSelected($currentOverlays, selectedOverlay)
) {
try {
map.current.removeImport(selectedOverlay);
$map.removeImport(selectedOverlay);
} catch (e) {
// No reliable way to check if the map is ready to remove sources and layers
}

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

@@ -4,9 +4,9 @@
import { Checkbox } from '$lib/components/ui/checkbox';
import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
import { type LayerTreeType } from '$lib/assets/layers';
import { anySelectedLayer } from './utils.svelte';
import { anySelectedLayer } from './utils';
import { i18n } from '$lib/i18n.svelte';
import { settings } from '$lib/logic/settings.svelte';
import { settings } from '$lib/logic/settings';
let {
name,
@@ -70,8 +70,8 @@
/>
{/if}
<Label for="{name}-{id}" class="flex flex-row items-center gap-1">
{#if customLayers.value.hasOwnProperty(id)}
{customLayers.value[id].name}
{#if $customLayers.hasOwnProperty(id)}
{$customLayers[id].name}
{:else}
{i18n._(`layers.label.${id}`)}
{/if}

15
website/src/lib/components/map/layer-control/OverpassLayer.ts
View File

@@ -1,12 +1,13 @@
import { SphericalMercator } from '@mapbox/sphericalmercator';
import { getLayers } from './utils.svelte';
import { getLayers } from './utils';
import { get, writable } from 'svelte/store';
import { liveQuery } from 'dexie';
import { db, settings } from '$lib/db';
import { overpassQueryData } from '$lib/assets/layers';
import { MapPopup } from '$lib/components/map/map.svelte';
import { MapPopup } from '$lib/components/map/map-popup';
import { settings } from '$lib/logic/settings';
import { db } from '$lib/db';
// const { currentOverpassQueries } = settings;
const { currentOverpassQueries } = settings;
const mercator = new SphericalMercator({
size: 256,
@@ -60,8 +61,10 @@ export class OverpassLayer {
queryIfNeeded() {
if (this.map.getZoom() >= this.minZoom) {
const bounds = this.map.getBounds().toArray();
this.query([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
const bounds = this.map.getBounds()?.toArray();
if (bounds) {
this.query([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
}
}
}

15
website/src/lib/components/map/layer-control/OverpassPopup.svelte
View File

@@ -1,13 +1,13 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import { Button } from '$lib/components/ui/button';
import { selection } from '$lib/components/file-list/Selection';
import { PencilLine, MapPin } from '@lucide/svelte';
import { i18n } from '$lib/i18n.svelte';
import { dbUtils } from '$lib/db';
import type { PopupItem } from '$lib/components/MapPopup';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import type { WaypointType } from 'gpx';
import type { PopupItem } from '$lib/components/map/map';
import { fileActions } from '$lib/logic/file-actions';
import { selection } from '$lib/logic/selection';
export let poi: PopupItem<any>;
@@ -43,7 +43,7 @@
},
};
}
dbUtils.addOrUpdateWaypoint(wpt);
fileActions.addOrUpdateWaypoint(wpt);
}
</script>
@@ -94,12 +94,7 @@
{/each}
</div>
</ScrollArea>
<Button
class="mt-2"
variant="outline"
disabled={$selection.size === 0}
on:click={addToFile}
>
<Button class="mt-2" variant="outline" disabled={$selection.size === 0} onclick={addToFile}>
<MapPin size="16" class="mr-1" />
{i18n._('toolbar.waypoint.add')}
</Button>

5
website/src/lib/components/map/layer-control/utils.svelte.ts → website/src/lib/components/map/layer-control/utils.ts
View File

@@ -1,4 +1,5 @@
import type { LayerTreeType } from '$lib/assets/layers';
import { writable } from 'svelte/store';
export function anySelectedLayer(node: LayerTreeType) {
return (
@@ -54,6 +55,4 @@ export function toggle(node: LayerTreeType, id: string) {
return node;
}
export const customBasemapUpdate = $state({
value: 0,
});
export const customBasemapUpdate = writable(0);

84
website/src/lib/components/map/map-popup.ts Normal file
View File

@@ -0,0 +1,84 @@
import { TrackPoint, Waypoint } from 'gpx';
import mapboxgl from 'mapbox-gl';
import { mount, tick } from 'svelte';
import { get, writable, type Writable } from 'svelte/store';
import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
export type PopupItem<T = Waypoint | TrackPoint | any> = {
item: T;
fileId?: string;
hide?: () => void;
};
export class MapPopup {
map: mapboxgl.Map;
popup: mapboxgl.Popup;
item: Writable<PopupItem | null> = writable(null);
component: ReturnType<typeof mount>;
maybeHideBinded = this.maybeHide.bind(this);
constructor(map: mapboxgl.Map, options?: mapboxgl.PopupOptions) {
this.map = map;
this.popup = new mapboxgl.Popup(options);
this.component = mount(MapPopupComponent, {
target: document.body,
props: {
item: this.item,
onContainerReady: (container: HTMLDivElement) => {
this.popup.setDOMContent(container);
},
},
});
}
setItem(item: PopupItem | null) {
if (item) item.hide = () => this.hide();
this.item.set(item);
if (item === null) {
this.hide();
} else {
tick().then(() => this.show());
}
}
show() {
const item = get(this.item);
if (item === null) {
this.hide();
return;
}
this.popup.setLngLat(this.getCoordinates()).addTo(this.map);
this.map.on('mousemove', this.maybeHideBinded);
}
maybeHide(e: mapboxgl.MapMouseEvent) {
const item = get(this.item);
if (item === null) {
this.hide();
return;
}
if (this.map.project(this.getCoordinates()).dist(this.map.project(e.lngLat)) > 60) {
this.hide();
}
}
hide() {
this.popup.remove();
this.map.off('mousemove', this.maybeHideBinded);
}
remove() {
this.popup.remove();
this.component.$destroy();
}
getCoordinates() {
const item = get(this.item);
if (item === null) {
return new mapboxgl.LngLat(0, 0);
}
return item.item instanceof Waypoint || item.item instanceof TrackPoint
? item.item.getCoordinates()
: new mapboxgl.LngLat(item.item.lon, item.item.lat);
}
}

205
website/src/lib/components/map/utils.svelte.ts → website/src/lib/components/map/map.ts
View File

@@ -1,10 +1,9 @@
import { TrackPoint, Waypoint, type Coordinates } from 'gpx';
import mapboxgl from 'mapbox-gl';
import { tick, mount } from 'svelte';
// import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
import { get } from 'svelte/store';
// import { fileObservers } from '$lib/db';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import { get, writable, type Writable } from 'svelte/store';
import { settings } from '$lib/logic/settings';
const { treeFileView, elevationProfile, bottomPanelSize, rightPanelSize, distanceUnits } = settings;
let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
maxZoom: 15,
@@ -13,13 +12,17 @@ let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
};
export class MapboxGLMap {
private _map: mapboxgl.Map | null = $state(null);
private _map: Writable<mapboxgl.Map | null> = writable(null);
private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
private _unsubscribes: (() => void)[] = [];
subscribe(run: (value: mapboxgl.Map | null) => void, invalidate?: () => void) {
return this._map.subscribe(run, invalidate);
}
init(
accessToken: string,
language: string,
distanceUnits: 'metric' | 'imperial' | 'nautical',
hash: boolean,
geocoder: boolean,
geolocate: boolean
@@ -126,7 +129,7 @@ export class MapboxGLMap {
);
}
const scaleControl = new mapboxgl.ScaleControl({
unit: distanceUnits,
unit: get(distanceUnits),
});
map.addControl(scaleControl);
map.on('style.load', () => {
@@ -160,46 +163,58 @@ export class MapboxGLMap {
});
});
map.on('load', () => {
this._map = map; // only set the store after the map has loaded
this._map.set(map); // only set the store after the map has loaded
window._map = map; // entry point for extensions
scaleControl.setUnit(distanceUnits);
scaleControl.setUnit(get(distanceUnits));
this._onLoadCallbacks.forEach((callback) => callback(map));
this._onLoadCallbacks = [];
});
this._unsubscribes.push(treeFileView.subscribe(() => this.resize()));
this._unsubscribes.push(elevationProfile.subscribe(() => this.resize()));
this._unsubscribes.push(bottomPanelSize.subscribe(() => this.resize()));
this._unsubscribes.push(rightPanelSize.subscribe(() => this.resize()));
this._unsubscribes.push(
distanceUnits.subscribe((units) => {
scaleControl.setUnit(units);
})
);
}
onLoad(callback: (map: mapboxgl.Map) => void) {
if (this._map) {
callback(this._map);
const map = get(this._map);
if (map) {
callback(map);
} else {
this._onLoadCallbacks.push(callback);
}
}
destroy() {
if (this._map) {
this._map.remove();
this._map = null;
const map = get(this._map);
if (map) {
map.remove();
this._map.set(null);
}
}
get value(): mapboxgl.Map | null {
return this._map;
this._unsubscribes.forEach((unsubscribe) => unsubscribe());
this._unsubscribes = [];
}
resize() {
if (this._map) {
this._map.resize();
const map = get(this._map);
if (map) {
map.resize();
}
}
toggle3D() {
if (this._map) {
if (this._map.getPitch() === 0) {
this._map.easeTo({ pitch: 70 });
const map = get(this._map);
if (map) {
if (map.getPitch() === 0) {
map.easeTo({ pitch: 70 });
} else {
this._map.easeTo({ pitch: 0 });
map.easeTo({ pitch: 0 });
}
}
}
@@ -207,15 +222,15 @@ export class MapboxGLMap {
export const map = new MapboxGLMap();
const targetMapBounds: {
bounds: mapboxgl.LngLatBounds;
ids: string[];
total: number;
} = $state({
bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
ids: [],
total: 0,
});
// const targetMapBounds: {
// bounds: mapboxgl.LngLatBounds;
// ids: string[];
// total: number;
// } = $state({
// bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
// ids: [],
// total: 0,
// });
// $effect(() => {
// if (
@@ -251,32 +266,32 @@ const targetMapBounds: {
// map.current.fitBounds(targetMapBounds.bounds, { padding: 80, linear: true, easing: () => 1 });
// });
export function initTargetMapBounds(ids: string[]) {
targetMapBounds.bounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
targetMapBounds.ids = ids;
targetMapBounds.total = ids.length;
}
// export function initTargetMapBounds(ids: string[]) {
// targetMapBounds.bounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
// targetMapBounds.ids = ids;
// targetMapBounds.total = ids.length;
// }
export function updateTargetMapBounds(
id: string,
bounds: { southWest: Coordinates; northEast: Coordinates }
) {
if (targetMapBounds.ids.indexOf(id) === -1) {
return;
}
// export function updateTargetMapBounds(
// id: string,
// bounds: { southWest: Coordinates; northEast: Coordinates }
// ) {
// if (targetMapBounds.ids.indexOf(id) === -1) {
// return;
// }
if (
bounds.southWest.lat !== 90 ||
bounds.southWest.lon !== 180 ||
bounds.northEast.lat !== -90 ||
bounds.northEast.lon !== -180
) {
// Avoid update for empty (new) files
targetMapBounds.ids = targetMapBounds.ids.filter((x) => x !== id);
targetMapBounds.bounds.extend(bounds.southWest);
targetMapBounds.bounds.extend(bounds.northEast);
}
}
// if (
// bounds.southWest.lat !== 90 ||
// bounds.southWest.lon !== 180 ||
// bounds.northEast.lat !== -90 ||
// bounds.northEast.lon !== -180
// ) {
// // Avoid update for empty (new) files
// targetMapBounds.ids = targetMapBounds.ids.filter((x) => x !== id);
// targetMapBounds.bounds.extend(bounds.southWest);
// targetMapBounds.bounds.extend(bounds.northEast);
// }
// }
// export function centerMapOnSelection() {
// let selected = get(selection).getSelected();
@@ -308,77 +323,3 @@ export function updateTargetMapBounds(
// maxZoom: 15,
// });
// }
export type PopupItem<T = Waypoint | TrackPoint | any> = {
item: T;
fileId?: string;
hide?: () => void;
};
// export class MapPopup {
// map: mapboxgl.Map;
// popup: mapboxgl.Popup;
// item: PopupItem | null = $state(null);
// maybeHideBinded = this.maybeHide.bind(this);
// constructor(map: mapboxgl.Map, options?: mapboxgl.PopupOptions) {
// this.map = map;
// this.popup = new mapboxgl.Popup(options);
// let component = mount(MapPopupComponent, {
// target: document.body,
// props: {
// item: this.item,
// },
// });
// tick().then(() => this.popup.setDOMContent(component.container));
// }
// setItem(item: PopupItem | null) {
// if (item) item.hide = () => this.hide();
// this.item = item;
// if (item === null) {
// this.hide();
// } else {
// tick().then(() => this.show());
// }
// }
// show() {
// if (this.item === null) {
// this.hide();
// return;
// }
// this.popup.setLngLat(this.getCoordinates()).addTo(this.map);
// this.map.on('mousemove', this.maybeHideBinded);
// }
// maybeHide(e: mapboxgl.MapMouseEvent) {
// if (this.item === null) {
// this.hide();
// return;
// }
// if (this.map.project(this.getCoordinates()).dist(this.map.project(e.lngLat)) > 60) {
// this.hide();
// }
// }
// hide() {
// this.popup.remove();
// this.map.off('mousemove', this.maybeHideBinded);
// }
// remove() {
// this.popup.remove();
// }
// getCoordinates() {
// if (this.item === null) {
// return new mapboxgl.LngLat(0, 0);
// }
// return this.item.item instanceof Waypoint || this.item.item instanceof TrackPoint
// ? this.item.item.getCoordinates()
// : new mapboxgl.LngLat(this.item.item.lon, this.item.item.lat);
// }
// }

14
website/src/lib/components/map/street-view-control/StreetViewControl.svelte
View File

@@ -1,13 +1,13 @@
<script lang="ts">
import { streetViewEnabled } from '$lib/components/map/street-view-control/utils.svelte';
import { map } from '$lib/components/map/utils.svelte';
import { streetViewEnabled } from '$lib/components/map/street-view-control/utils';
import { map } from '$lib/components/map/map';
import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
import Tooltip from '$lib/components/Tooltip.svelte';
import { Toggle } from '$lib/components/ui/toggle';
import { PersonStanding, X } from '@lucide/svelte';
import { MapillaryLayer } from './Mapillary';
import { GoogleRedirect } from './Google';
import { settings } from '$lib/logic/settings.svelte';
import { settings } from '$lib/logic/settings';
import { i18n } from '$lib/i18n.svelte';
import { onMount } from 'svelte';
@@ -28,16 +28,16 @@
});
$effect(() => {
if (streetViewSource.value === 'mapillary') {
if ($streetViewSource === 'mapillary') {
googleRedirect?.remove();
if (streetViewEnabled.current) {
if ($streetViewEnabled) {
mapillaryLayer?.add();
} else {
mapillaryLayer?.remove();
}
} else {
mapillaryLayer?.remove();
if (streetViewEnabled.current) {
if ($streetViewEnabled) {
googleRedirect?.add();
} else {
googleRedirect?.remove();
@@ -49,7 +49,7 @@
<CustomControl class="w-[29px] h-[29px] shrink-0">
<Tooltip class="w-full h-full" side="left" label={i18n._('menu.toggle_street_view')}>
<Toggle
bind:pressed={streetViewEnabled.current}
bind:pressed={$streetViewEnabled}
class="w-full h-full rounded p-0"
aria-label={i18n._('menu.toggle_street_view')}
>

3
website/src/lib/components/map/street-view-control/utils.svelte.ts
View File

@@ -1,3 +0,0 @@
export const streetViewEnabled = $state({
current: false,
});

3
website/src/lib/components/map/street-view-control/utils.ts Normal file
View File

@@ -0,0 +1,3 @@
import { writable } from 'svelte/store';
export const streetViewEnabled = writable(false);