@walkthru-earth/objex 1.2.0 → 1.3.0

package/dist/components/viewers/StacMapViewer.svelte

@@ -1,20 +1,42 @@
 <script lang="ts">
 import type { Tab } from '../../types';
-import { buildHttpsUrl } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
 
-let { tab }: { tab: Tab } = $props();
+let { tab, variant = 'stac-map' }: { tab: Tab; variant?: 'stac-map' | 'stac-browser' } = $props();
 
-const fileUrl = $derived(buildHttpsUrl(tab));
-const iframeSrc = $derived(
-	`https://developmentseed.org/stac-map?href=${encodeURIComponent(fileUrl)}`
-);
+let fileUrl = $state('');
+
+$effect(() => {
+	const id = tab.id;
+	let cancelled = false;
+	(async () => {
+		const url = await buildHttpsUrlAsync(tab);
+		if (cancelled || id !== tab.id) return;
+		fileUrl = url;
+	})();
+	return () => {
+		cancelled = true;
+	};
+});
+
+const iframeSrc = $derived.by(() => {
+	if (!fileUrl) return '';
+	if (variant === 'stac-browser') {
+		return `https://radiantearth.github.io/stac-browser/#/external/${encodeURIComponent(fileUrl)}`;
+	}
+	return `https://developmentseed.org/stac-map?href=${encodeURIComponent(fileUrl)}`;
+});
+
+const iframeTitle = $derived(variant === 'stac-browser' ? 'STAC Browser' : 'stac-map');
 </script>
 
 <div class="relative flex h-full overflow-hidden">
-	<iframe
-		src={iframeSrc}
-		class="h-full w-full border-0"
-		title="STAC Map"
-		allow="fullscreen"
-	></iframe>
+	{#if iframeSrc}
+		<iframe
+			src={iframeSrc}
+			class="h-full w-full border-0"
+			title={iframeTitle}
+			allow="fullscreen"
+		></iframe>
+	{/if}
 </div>

package/dist/components/viewers/StacMapViewer.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Tab } from '../../types';
 type $$ComponentProps = {
     tab: Tab;
+    variant?: 'stac-map' | 'stac-browser';
 };
 declare const StacMapViewer: import("svelte").Component<$$ComponentProps, {}, "">;
 type StacMapViewer = ReturnType<typeof StacMapViewer>;