@swr-data-lab/components 1.13.0 → 1.13.1

package/dist/maplibre/MapStyle/index.d.ts

@@ -0,0 +1,2 @@
+export { SWRDataLabLight };
+import SWRDataLabLight from './SWRDataLabLight';

package/dist/maplibre/MapStyle/tokens.d.ts

@@ -0,0 +1,20 @@
+declare const tokens: {
+    sans_regular: string[];
+    sans_medium: string[];
+    sans_bold: string[];
+    background: string;
+    water: string;
+    water_light: string;
+    marsh: string;
+    grass: string;
+    grass_dark: string;
+    street_primary: string;
+    street_primary_outline: string;
+    street_secondary: string;
+    street_secondary_outline: string;
+    street_tertiary: string;
+    street_tertiary_outline: string;
+    label_primary: string;
+    label_secondary: string;
+};
+export default tokens;

package/dist/maplibre/MapStyle/tokens.js

@@ -0,0 +1,20 @@
+const tokens = {
+    sans_regular: ['SWR Sans Regular'],
+    sans_medium: ['SWR Sans Medium'],
+    sans_bold: ['SWR Sans Bold'],
+    background: 'hsl(0, 0%, 100%)',
+    water: 'hsl(210, 41%, 87%)',
+    water_light: 'hsl(210, 41%, 90%)',
+    marsh: 'hsl(200, 14%, 97%)',
+    grass: 'hsl(149, 37%, 97%)',
+    grass_dark: 'hsl(149, 37%, 93%)',
+    street_primary: 'hsl(0, 0%, 95%)',
+    street_primary_outline: 'hsla(0, 0%, 0%, 20%)',
+    street_secondary: 'hsl(0, 0%, 95%)',
+    street_secondary_outline: 'hsl(0, 0%, 50%)',
+    street_tertiary: 'hsl(0, 0%, 95%)',
+    street_tertiary_outline: 'hsl(0, 0%, 50%)',
+    label_primary: 'rgb(10, 10, 11)',
+    label_secondary: 'hsl(240, 2%, 20%)'
+};
+export default tokens;

package/{src → dist}/maplibre/NavigationControl/NavigationControl.stories.svelte

@@ -1,14 +1,12 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import NavigationControl from './NavigationControl.svelte';
-	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-	import { SWRDataLabLight } from '../MapStyle';
-	import Map from '../Map/Map.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/Control/NavigationControl',
-		component: NavigationControl
-	});
+<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import NavigationControl from './NavigationControl.svelte';
+import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+import { SWRDataLabLight } from '../MapStyle';
+import Map from '../Map/Map.svelte';
+const { Story } = defineMeta({
+    title: 'Maplibre/Control/NavigationControl',
+    component: NavigationControl
+});
 </script>
 
 <Story asChild name="Default">

package/dist/maplibre/NavigationControl/NavigationControl.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import NavigationControl from './NavigationControl.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NavigationControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NavigationControl = InstanceType<typeof NavigationControl>;
+export default NavigationControl;

package/dist/maplibre/NavigationControl/NavigationControl.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import maplibre, {} from 'maplibre-gl';
+import MapControl from '../MapControl/MapControl.svelte';
+const { showCompass = false, visualizePitch = false, position = 'bottom-left' } = $props();
+</script>
+
+<MapControl control={new maplibre.NavigationControl({ showCompass, visualizePitch })} {position} />
+
+<style>
+</style>

package/dist/maplibre/NavigationControl/NavigationControl.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ControlPosition } from 'maplibre-gl';
+interface NavigationControlProps {
+    showCompass?: boolean;
+    /**
+     * Show 3d tilt in the compass control. Requires `showCompass` to be `true`
+     */
+    visualizePitch?: boolean;
+    position?: ControlPosition;
+}
+declare const NavigationControl: import("svelte").Component<NavigationControlProps, {}, "">;
+type NavigationControl = ReturnType<typeof NavigationControl>;
+export default NavigationControl;

package/dist/maplibre/NavigationControl/index.d.ts

@@ -0,0 +1,2 @@
+export default NavigationControl;
+import NavigationControl from './NavigationControl.svelte';

package/{src → dist}/maplibre/ScaleControl/ScaleControl.stories.svelte

@@ -1,16 +1,13 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { within, expect } from 'storybook/test';
-
-	import ScaleControl from './ScaleControl.svelte';
-	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-	import Map from '../Map/Map.svelte';
-	import { SWRDataLabLight } from '../MapStyle';
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/Control/ScaleControl',
-		component: ScaleControl
-	});
+<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { within, expect } from 'storybook/test';
+import ScaleControl from './ScaleControl.svelte';
+import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+import Map from '../Map/Map.svelte';
+import { SWRDataLabLight } from '../MapStyle';
+const { Story } = defineMeta({
+    title: 'Maplibre/Control/ScaleControl',
+    component: ScaleControl
+});
 </script>
 
 <Story

package/dist/maplibre/ScaleControl/ScaleControl.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import ScaleControl from './ScaleControl.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ScaleControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ScaleControl = InstanceType<typeof ScaleControl>;
+export default ScaleControl;

package/dist/maplibre/ScaleControl/ScaleControl.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import maplibre, {} from 'maplibre-gl';
+import MapControl from '../MapControl/MapControl.svelte';
+let { maxWidth = 100, unit = 'metric', position = 'bottom-left' } = $props();
+</script>
+
+<MapControl control={new maplibre.ScaleControl({ maxWidth, unit })} {position} />
+
+<style>
+</style>

package/dist/maplibre/ScaleControl/ScaleControl.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type ControlPosition, type Unit } from 'maplibre-gl';
+interface ScaleControlProps {
+    maxWidth?: number | undefined;
+    position?: ControlPosition;
+    unit?: Unit;
+}
+declare const ScaleControl: import("svelte").Component<ScaleControlProps, {}, "">;
+type ScaleControl = ReturnType<typeof ScaleControl>;
+export default ScaleControl;

package/dist/maplibre/ScaleControl/index.d.ts

@@ -0,0 +1,2 @@
+export default ScaleControl;
+import ScaleControl from './ScaleControl.svelte';

package/dist/maplibre/Source/MapSource.stories.svelte

@@ -0,0 +1,7 @@
+<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import MapSource from './MapSource.svelte';
+const { Story } = defineMeta({
+    title: 'Maplibre/MapSource',
+    component: MapSource
+});
+</script>

package/dist/maplibre/Source/MapSource.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import MapSource from './MapSource.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MapSource: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MapSource = InstanceType<typeof MapSource>;
+export default MapSource;

package/dist/maplibre/Source/MapSource.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">import { onDestroy } from 'svelte';
+import {} from 'maplibre-gl';
+import { getMapContext, createSourceContext } from '../context.svelte.js';
+let { id, sourceSpec, source = $bindable(), children } = $props();
+let firstRun = true;
+// Get map context
+const { map, styleLoaded } = $derived(getMapContext());
+// Create source context
+const sourceContext = createSourceContext();
+// 1. Add the source to the map using the spec, then get the
+// actual source object back from the map instance
+$effect(() => {
+    if (map && styleLoaded) {
+        // See: https://svelte.dev/docs/svelte/$state#$state.snapshot
+        map.addSource(id, $state.snapshot(sourceSpec));
+        source = map.getSource(id);
+        firstRun = true;
+    }
+});
+// 2. Do extra stuff with the source object
+$effect(() => {
+    if (source) {
+    }
+});
+$effect(() => {
+    source;
+    firstRun = false;
+});
+onDestroy(() => {
+    if (map && styleLoaded) {
+        const layers = map?.getStyle().layers;
+        layers
+            .filter((l) => l.type !== 'background' && l.source == id)
+            .forEach((l) => {
+            map?.removeLayer(l.id);
+        });
+        map.removeSource(id);
+        source = undefined;
+    }
+});
+</script>
+
+{@render children?.()}

package/dist/maplibre/Source/MapSource.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Snippet } from 'svelte';
+import { type Map, type SourceSpecification } from 'maplibre-gl';
+type Source = maplibregl.VectorTileSource;
+interface MapSourceProps {
+    id: string;
+    sourceSpec: SourceSpecification;
+    source?: Source;
+    onLoad?: (map: Map, url?: string, data?: string) => undefined;
+    children?: Snippet;
+}
+declare const MapSource: import("svelte").Component<MapSourceProps, {}, "source">;
+type MapSource = ReturnType<typeof MapSource>;
+export default MapSource;

package/dist/maplibre/Source/index.d.ts

@@ -0,0 +1,2 @@
+export default MapSource;
+import MapSource from './MapSource.svelte';

package/dist/maplibre/Source/source.d.ts

@@ -0,0 +1,28 @@
+import type { Map, SourceSpecification } from 'maplibre-gl';
+/**
+ * Add a source to the map.
+ *
+ * @param map - The map instance
+ * @param sourceId - The ID of the source to add
+ * @param source - The source specification object
+ * @param okToAdd - Callback to check if the source should still be added
+ * @param cb - Callback when the source has been added
+ *
+ * This properly handles the case where an old source with the same ID is still being removed.
+ */
+export declare function addSource(map: Map, sourceId: string, source: SourceSpecification, okToAdd: (sourceId: string) => boolean, cb: () => void): void;
+/**
+ * A helper function that removes a source from the map after all of the layers inside it have
+ * had a chance to remove themselves.
+ *
+ * @param {Readable<Map|undefined>} mapStore - The store containing the Map instance
+ * @param {string} sourceId - The ID of the source to remove
+ * @param {unknown} sourceObj - The source object that was originally added
+ *
+ * Waits one tick to ensure layers have a chance to be removed, then checks if the
+ * source with the given ID is still the same object as was originally added.
+ *
+ * If so, it removes the source from the map. This avoids removing a source that was
+ * already replaced by another source reusing the same ID.
+ */
+export declare function removeSource(map: Map, sourceId: string, sourceObj: unknown): void;

package/dist/maplibre/Source/source.js

@@ -0,0 +1,76 @@
+import { tick } from 'svelte';
+/**
+ * Add a source to the map.
+ *
+ * @param map - The map instance
+ * @param sourceId - The ID of the source to add
+ * @param source - The source specification object
+ * @param okToAdd - Callback to check if the source should still be added
+ * @param cb - Callback when the source has been added
+ *
+ * This properly handles the case where an old source with the same ID is still being removed.
+ */
+export function addSource(map, sourceId, source, okToAdd, cb) {
+    // If there was an old source with the same ID, then remove it. This can happen when removing a source and adding a new source in quick succession.
+    let removed = false;
+    if (map.getSource(sourceId)) {
+        removed = true;
+        map.removeSource(sourceId);
+    }
+    const doAddSource = () => {
+        if (!okToAdd(sourceId)) {
+            // in case the component was destroyed or the id changed while waiting to call this
+            return;
+        }
+        map.addSource(sourceId, source);
+        cb();
+    };
+    if (removed) {
+        // Source removal happens quickly but asynchronously, and we have no way to really interlock on when it happens, so just loop until it does.
+        const waitForRemoval = () => {
+            if (!sourceId) {
+                return;
+            }
+            if (map.getSource(sourceId)) {
+                // The source hasn't been removed yet, so keep waiting.
+                setTimeout(waitForRemoval, 1);
+            }
+            else {
+                doAddSource();
+            }
+        };
+        waitForRemoval();
+    }
+    else {
+        // If we don't have an existing source to remove (i.e. the normal case) then
+        // just add the source right away.
+        doAddSource();
+    }
+}
+/**
+ * A helper function that removes a source from the map after all of the layers inside it have
+ * had a chance to remove themselves.
+ *
+ * @param {Readable<Map|undefined>} mapStore - The store containing the Map instance
+ * @param {string} sourceId - The ID of the source to remove
+ * @param {unknown} sourceObj - The source object that was originally added
+ *
+ * Waits one tick to ensure layers have a chance to be removed, then checks if the
+ * source with the given ID is still the same object as was originally added.
+ *
+ * If so, it removes the source from the map. This avoids removing a source that was
+ * already replaced by another source reusing the same ID.
+ */
+export function removeSource(map, sourceId, sourceObj) {
+    tick().then(() => {
+        // Wait a tick so that the layers inside this source can all be removed.
+        // But make sure that the source wasn't already replaced with another source with the same ID.
+        if (!map.loaded()) {
+            return;
+        }
+        let remainingSource = map.getSource(sourceId);
+        if (remainingSource === sourceObj) {
+            map.removeSource(sourceId);
+        }
+    });
+}

package/{src → dist}/maplibre/Tooltip/Tooltip.stories.svelte

@@ -1,26 +1,20 @@
-<script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import type { LngLatLike, MapGeoJSONFeature } from 'maplibre-gl';
-
-	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-	import Map from '../Map/Map.svelte';
-	import VectorTileSource from '../VectorTileSource/VectorTileSource.svelte';
-	import VectorLayer from '../VectorLayer/VectorLayer.svelte';
-	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
-	import Tooltip from './Tooltip.svelte';
-	import { SWRDataLabLight } from '../MapStyle';
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/Extras/Tooltip',
-		component: Tooltip
-	});
-
-	let hovered = $state() as MapGeoJSONFeature | undefined;
-	let hovered2 = $state() as MapGeoJSONFeature | undefined;
-	let hoverCoords = $state([0, 0]) as LngLatLike;
-
-	let selected = $state() as MapGeoJSONFeature | undefined;
-	let selectCoords = $state([0, 0]) as LngLatLike;
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+import Map from '../Map/Map.svelte';
+import VectorTileSource from '../VectorTileSource/VectorTileSource.svelte';
+import VectorLayer from '../VectorLayer/VectorLayer.svelte';
+import AttributionControl from '../AttributionControl/AttributionControl.svelte';
+import Tooltip from './Tooltip.svelte';
+import { SWRDataLabLight } from '../MapStyle';
+const { Story } = defineMeta({
+    title: 'Maplibre/Extras/Tooltip',
+    component: Tooltip
+});
+let hovered = $state();
+let hovered2 = $state();
+let hoverCoords = $state([0, 0]);
+let selected = $state();
+let selectCoords = $state([0, 0]);
 </script>
 
 <Story asChild name="Default">

package/dist/maplibre/Tooltip/Tooltip.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Tooltip from './Tooltip.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tooltip = InstanceType<typeof Tooltip>;
+export default Tooltip;

package/dist/maplibre/Tooltip/Tooltip.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">import { onDestroy } from 'svelte';
+import maplibre, {} from 'maplibre-gl';
+import { getMapContext } from '../context.svelte.js';
+import { resetPopupEventListener } from '../utils';
+let { position, children, offset = 20, maxWidth = 360, showCloseButton = false, closeOnClick = true, mouseEvents = false, onClose, onOpen } = $props();
+const { map } = $derived(getMapContext());
+let tooltip = new maplibre.Popup({
+    closeButton: showCloseButton,
+    closeOnClick: closeOnClick,
+    maxWidth: `${maxWidth}px`,
+    offset: offset
+});
+let el = $state();
+$effect(() => {
+    if (position && el && map) {
+        tooltip.setLngLat(position).setDOMContent(el).addTo(map);
+    }
+    else {
+        tooltip.remove();
+    }
+});
+// Bind events
+$effect(() => resetPopupEventListener(tooltip, 'open', onOpen));
+$effect(() => resetPopupEventListener(tooltip, 'close', onClose));
+onDestroy(() => tooltip.remove());
+</script>
+
+<div bind:this={el} class="container" class:mouseEvents>
+	{@render children?.()}
+</div>
+
+<style>
+	.container {
+		background: white;
+		padding: 0.75em;
+		border-radius: 2px;
+		border: 1px solid rgba(0, 0, 0, 0.75);
+		border-radius: var(--br-small);
+		filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
+		pointer-events: none;
+	}
+
+	.mouseEvents {
+		pointer-events: all;
+	}
+</style>

package/dist/maplibre/Tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type Snippet } from 'svelte';
+import { type Listener, type LngLatLike } from 'maplibre-gl';
+interface TooltipProps {
+    position: LngLatLike | undefined;
+    children?: Snippet;
+    maxWidth?: number;
+    showCloseButton?: boolean;
+    /**
+     * Close the tooltip if the user clicks anywhere on the map
+     */
+    closeOnClick?: boolean;
+    /**
+     * y axis offset (px)
+     */
+    offset?: number;
+    /**
+     * Toggle mouse events on the tooltip element. Should be false if the tooltip appears on hover to avoid flickering.
+     */
+    mouseEvents?: boolean;
+    onClose?: Listener | undefined;
+    onOpen?: Listener | undefined;
+}
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/maplibre/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export default Tooltip;
+import Tooltip from './Tooltip.svelte';

package/{src → dist}/maplibre/VectorLayer/VectorLayer.stories.svelte

@@ -1,17 +1,14 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Map from '../Map/Map.svelte';
-	import VectorLayer from './VectorLayer.svelte';
-	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
-	import VectorTileSource from '../VectorTileSource/VectorTileSource.svelte';
-
-	import { SWRDataLabLight } from '../MapStyle';
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/Layer/VectorLayer',
-		component: VectorLayer
-	});
+<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Map from '../Map/Map.svelte';
+import VectorLayer from './VectorLayer.svelte';
+import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+import AttributionControl from '../AttributionControl/AttributionControl.svelte';
+import VectorTileSource from '../VectorTileSource/VectorTileSource.svelte';
+import { SWRDataLabLight } from '../MapStyle';
+const { Story } = defineMeta({
+    title: 'Maplibre/Layer/VectorLayer',
+    component: VectorLayer
+});
 </script>
 
 <Story asChild name="Default">

package/dist/maplibre/VectorLayer/VectorLayer.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import VectorLayer from './VectorLayer.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const VectorLayer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VectorLayer = InstanceType<typeof VectorLayer>;
+export default VectorLayer;