-
-
- {#if fileStateCollection.files.size > 1}
+
+
+ {#if $fileStateCollection.size > 1}
-
+
{/if}
@@ -237,26 +114,20 @@
class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
>
-
+ />
{#if options.elevation.show}
-
+ />
{/if}
diff --git a/website/src/lib/components/embedding/EmbeddingPlayground.svelte b/website/src/lib/components/embedding/EmbeddingPlayground.svelte
index 92d66d3f5..0f6d7698b 100644
--- a/website/src/lib/components/embedding/EmbeddingPlayground.svelte
+++ b/website/src/lib/components/embedding/EmbeddingPlayground.svelte
@@ -18,63 +18,61 @@
import { i18n } from '$lib/i18n.svelte';
import {
allowedEmbeddingBasemaps,
+ defaultEmbeddingOptions,
getCleanedEmbeddingOptions,
- getDefaultEmbeddingOptions,
- } from './Embedding';
+ getMergedEmbeddingOptions,
+ } from './embedding';
import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
import Embedding from './Embedding.svelte';
- import { map } from '$lib/stores';
- import { tick } from 'svelte';
+ import { onDestroy } from 'svelte';
import { base } from '$app/paths';
+ import { map } from '$lib/components/map/map';
+ import { mode } from 'mode-watcher';
- let options = getDefaultEmbeddingOptions();
- options.token = 'YOUR_MAPBOX_TOKEN';
- options.files = [
- 'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx',
- ];
+ let options = $state(
+ getMergedEmbeddingOptions(
+ {
+ token: 'YOUR_MAPBOX_TOKEN',
+ theme: mode.current,
+ },
+ defaultEmbeddingOptions
+ )
+ );
+ let files = $state(
+ 'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx'
+ );
+ let driveIds = $state('');
- let files = options.files[0];
- $: {
- let urls = files.split(',');
- urls = urls.filter((url) => url.length > 0);
- if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
- options.files = urls;
+ let iframeOptions = $derived(
+ getMergedEmbeddingOptions(
+ {
+ token:
+ options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
+ ? PUBLIC_MAPBOX_TOKEN
+ : options.token,
+ files: files.split(',').filter((url) => url.length > 0),
+ ids: driveIds.split(',').filter((id) => id.length > 0),
+ elevation: {
+ fill: options.elevation.fill === 'none' ? undefined : options.elevation.fill,
+ },
+ },
+ options
+ )
+ );
+
+ let manualCamera = $state(false);
+ let zoom = $state('0');
+ let lat = $state('0');
+ let lon = $state('0');
+ let bearing = $state('0');
+ let pitch = $state('0');
+ let hash = $derived(manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '');
+
+ $effect(() => {
+ if (options.elevation.show || options.elevation.height) {
+ map.resize();
}
- }
- let driveIds = '';
- $: {
- let ids = driveIds.split(',');
- ids = ids.filter((id) => id.length > 0);
- if (JSON.stringify(ids) !== JSON.stringify(options.ids)) {
- options.ids = ids;
- }
- }
-
- let manualCamera = false;
-
- let zoom = '0';
- let lat = '0';
- let lon = '0';
- let bearing = '0';
- let pitch = '0';
-
- $: hash = manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '';
-
- $: iframeOptions =
- options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
- ? Object.assign({}, options, { token: PUBLIC_MAPBOX_TOKEN })
- : options;
-
- async function resizeMap() {
- if ($map) {
- await tick();
- $map.resize();
- }
- }
-
- $: if (options.elevation.height || options.elevation.show) {
- resizeMap();
- }
+ });
function updateCamera() {
if ($map) {
@@ -87,9 +85,15 @@
}
}
- $: if ($map) {
- $map.on('moveend', updateCamera);
- }
+ map.onLoad((map_) => {
+ map_.on('moveend', updateCamera);
+ });
+
+ onDestroy(() => {
+ if ($map) {
+ $map.off('moveend', updateCamera);
+ }
+ });