@swr-data-lab/components 1.12.5 → 1.13.1

package/dist/Switcher/Switcher.svelte.d.ts

@@ -0,0 +1,21 @@
+interface SwitcherProps {
+    /**
+     * Human-readable label
+     */
+    label: string;
+    /**
+     * Available options
+     */
+    options: string[];
+    /**
+     * Display size
+     */
+    size?: 'default' | 'small';
+    /**
+     * The currently-selected option
+     */
+    value: string | null;
+}
+declare const Switcher: import("svelte").Component<SwitcherProps, {}, "value">;
+type Switcher = ReturnType<typeof Switcher>;
+export default Switcher;

package/dist/Switcher/index.d.ts

@@ -0,0 +1,2 @@
+export default Switcher;
+import Switcher from "./Switcher.svelte";

package/{src → dist}/app.d.ts

@@ -10,4 +10,4 @@ declare global {
 	}
 }
 
-export { };
+export {};

package/dist/assets/close-circle.svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export default CloseCircle;
+type CloseCircle = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CloseCircle: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/assets/grow.svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Grow;
+type Grow = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Grow: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/assets/hand-pointer.svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export default HandPointer;
+type HandPointer = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const HandPointer: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/assets/shrink.svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Shrink;
+type Shrink = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Shrink: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/assets/tap.svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Tap;
+type Tap = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tap: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/assets/times-circle-solid.svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export default TimesCircleSolid;
+type TimesCircleSolid = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const TimesCircleSolid: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+export { default as DesignTokens } from "./DesignTokens/DesignTokens.svelte";
+export { tokens } from "./DesignTokens/index.js";
+export { default as Headline } from "./Headline/Headline.svelte";
+export { default as Copy } from "./Copy/Copy.svelte";
+export { default as Caption } from "./Caption/Caption.svelte";
+export { default as Note } from "./Note/Note.svelte";
+export { default as Card } from "./Card/Card.svelte";
+export { default as ChartHeader } from "./ChartHeader/ChartHeader.svelte";
+export { default as ChartFooter } from "./ChartFooter/ChartFooter.svelte";
+export { default as Logotype } from "./Logotype/Logotype.svelte";
+export { default as Middot } from "./Middot/Middot.svelte";
+export { default as Map } from "./maplibre/Map/Map.svelte";
+export { SWRDataLabLight } from "./maplibre/MapStyle";
+export { default as MapControl } from "./maplibre/MapControl/MapControl.svelte";
+export { default as AttributionControl } from "./maplibre/AttributionControl/AttributionControl.svelte";
+export { default as GeocoderControl } from "./maplibre/GeocoderControl/GeocoderControl.svelte";
+export { default as NavigationControl } from "./maplibre/NavigationControl/NavigationControl.svelte";
+export { default as ScaleControl } from "./maplibre/ScaleControl/ScaleControl.svelte";
+export { default as VectorLayer } from "./maplibre/VectorLayer/VectorLayer.svelte";
+export { default as VectorTileSource } from "./maplibre/VectorTileSource/VectorTileSource.svelte";
+export { default as Tooltip } from "./maplibre/Tooltip/Tooltip.svelte";
+export { default as WithLinkLocation } from "./maplibre/WithLinkLocation/WithLinkLocation.svelte";
+export { default as FormLabel } from "./FormLabel/FormLabel.svelte";
+export { default as Switcher } from "./Switcher/Switcher.svelte";
+export { default as Input } from "./Input/Input.svelte";
+export { default as Button } from "./Button/Button.svelte";
+export { default as Select } from "./Select/Select.svelte";
+export { default as Autocomplete } from "./Autocomplete/Autocomplete.svelte";
+export { default as ChartList } from "./ChartList/ChartList.svelte";

package/{src → dist}/index.js

@@ -39,3 +39,6 @@ export { default as Select } from './Select/Select.svelte';
 
 // Deprecated
 export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
+
+// Meta
+export { default as ChartList } from './ChartList/ChartList.svelte';

package/dist/maplibre/AttributionControl/AttributionControl.stories.svelte

@@ -0,0 +1,27 @@
+<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import AttributionControl from './AttributionControl.svelte';
+import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+import Map from '../Map/Map.svelte';
+import { SWRDataLabLight } from '../MapStyle';
+const { Story } = defineMeta({
+    title: 'Maplibre/Control/AttributionControl',
+    component: AttributionControl
+});
+</script>
+
+<Story asChild name="Default">
+	<DesignTokens>
+		<div class="container">
+			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
+				<AttributionControl customAttribution="SWR Data Lab" position="bottom-left" />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		width: 500px;
+		height: 300px;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import AttributionControl from './AttributionControl.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 AttributionControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AttributionControl = InstanceType<typeof AttributionControl>;
+export default AttributionControl;

package/dist/maplibre/AttributionControl/AttributionControl.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import maplibre, {} from 'maplibre-gl';
+import MapControl from '../MapControl/MapControl.svelte';
+const { position = 'bottom-right', customAttribution } = $props();
+</script>
+
+<MapControl
+	{position}
+	control={new maplibre.AttributionControl({
+		customAttribution,
+		compact: false
+	})}
+/>
+
+<style>
+</style>

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

@@ -0,0 +1,8 @@
+import { type ControlPosition } from 'maplibre-gl';
+interface AttributionControlProps {
+    position?: ControlPosition;
+    customAttribution?: string;
+}
+declare const AttributionControl: import("svelte").Component<AttributionControlProps, {}, "">;
+type AttributionControl = ReturnType<typeof AttributionControl>;
+export default AttributionControl;

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

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

package/dist/maplibre/GeocoderControl/GeocoderAPIs.d.ts

@@ -0,0 +1,6 @@
+import { type MaplibreGeocoderApi, type MaplibreGeocoderApiConfig, type MaplibreGeocoderFeatureResults } from '@maplibre/maplibre-gl-geocoder';
+export declare class MaptilerGeocoderAPI implements MaplibreGeocoderApi {
+    key: string;
+    constructor(key: string);
+    forwardGeocode(config: MaplibreGeocoderApiConfig): Promise<MaplibreGeocoderFeatureResults>;
+}

package/dist/maplibre/GeocoderControl/GeocoderAPIs.js

@@ -0,0 +1,40 @@
+import {} from '@maplibre/maplibre-gl-geocoder';
+export class MaptilerGeocoderAPI {
+    key;
+    constructor(key) {
+        this.key = key;
+    }
+    async forwardGeocode(config) {
+        const result = {
+            type: 'FeatureCollection',
+            features: []
+        };
+        try {
+            const response = await fetch(`https://api.maptiler.com/geocoding/${config.query}.json?country=${config.countries}&language=${config.language}&key=${this.key}`);
+            const geojson = await response.json();
+            for (const feature of geojson.features) {
+                const res = {
+                    type: 'Feature',
+                    id: feature.id,
+                    place_type: ['place'],
+                    place_name: feature.place_name,
+                    language: feature.properties.display_name,
+                    text: feature.text,
+                    bbox: feature.bbox,
+                    geometry: {
+                        type: 'Point',
+                        coordinates: feature.center
+                    },
+                    properties: {
+                        text: feature.text
+                    }
+                };
+                result.features.push(res);
+            }
+        }
+        catch (e) {
+            console.error(`Failed to forwardGeocode with error: ${e}`);
+        }
+        return result;
+    }
+}

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

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

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

@@ -0,0 +1,19 @@
+import GeocoderControl from './GeocoderControl.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 GeocoderControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GeocoderControl = InstanceType<typeof GeocoderControl>;
+export default GeocoderControl;

package/dist/maplibre/GeocoderControl/GeocoderControl.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import maplibre from 'maplibre-gl';
+import MaplibreGeocoder, {} from '@maplibre/maplibre-gl-geocoder';
+import { MaptilerGeocoderAPI } from './GeocoderAPIs';
+import MapControl from '../MapControl/MapControl.svelte';
+import {} from '../types';
+const { key, service = 'maptiler', countries = 'de', languages = 'en', placeholder, limit = 3 } = $props();
+const countriesArr = Array.isArray(countries) ? countries : [countries];
+const languagesArr = Array.isArray(languages) ? languages : [languages];
+// Future: initialise a different GeocoderAPI depending on "service"
+let geocoderAPI = new MaptilerGeocoderAPI(key);
+const geocoder = new MaplibreGeocoder(geocoderAPI, {
+    maplibregl: maplibre,
+    language: languagesArr.join(','),
+    countries: countriesArr.join(','),
+    showResultsWhileTyping: true,
+    showResultMarkers: false,
+    placeholder,
+    limit
+});
+</script>
+
+<MapControl control={geocoder} position="top-left" />
+
+<style>
+</style>

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

@@ -0,0 +1,27 @@
+import { type GeocodingCountry, type GeocodingLanguage, type GeocodingService } from '../types';
+interface GeocoderControlProps {
+    service: GeocodingService;
+    /**
+     * API key for selected geocoding `service`
+     */
+    key: string;
+    /**
+     * Maximum number of suggestions to display
+     */
+    limit?: number;
+    /**
+     * Limit search to one or more countries
+     */
+    countries?: GeocodingCountry | GeocodingCountry[];
+    /**
+     * Limit search to one or more languages. The UI is localised to the first language specified if [available](https://github.com/maplibre/maplibre-gl-geocoder/blob/main/lib/localization.ts).
+     */
+    languages?: GeocodingLanguage | GeocodingLanguage[];
+    /**
+     * Overwrite the default input placeholder text
+     */
+    placeholder?: string;
+}
+declare const GeocoderControl: import("svelte").Component<GeocoderControlProps, {}, "">;
+type GeocoderControl = ReturnType<typeof GeocoderControl>;
+export default GeocoderControl;

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

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

package/dist/maplibre/Map/FallbackStyle.d.ts

@@ -0,0 +1,3 @@
+import type { StyleSpecification } from 'maplibre-gl';
+declare const style: StyleSpecification;
+export default style;

package/dist/maplibre/Map/FallbackStyle.js

@@ -0,0 +1,15 @@
+const style = {
+    version: 8,
+    name: 'default',
+    sources: {},
+    layers: [
+        {
+            id: 'background',
+            type: 'background',
+            paint: {
+                'background-color': 'lightgray'
+            }
+        }
+    ]
+};
+export default style;

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

@@ -1,27 +1,22 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { within, expect } from 'storybook/test';
-
-	import Map from './Map.svelte';
-	import ScaleControl from '../ScaleControl/ScaleControl.svelte';
-	import NavigationControl from '../NavigationControl/NavigationControl.svelte';
-	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-	import AttributionControl from '../AttributionControl/AttributionControl.svelte';
-	import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
-
-	import { SWRDataLabLight } from '../MapStyle';
-
-	import { eclipse } from '@versatiles/style';
-	const alternateStyle = eclipse({
-		language: 'de',
-		baseUrl: 'https://tiles.versatiles.org',
-		glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf'
-	});
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/Map',
-		component: Map
-	});
+<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { within, expect } from 'storybook/test';
+import Map from './Map.svelte';
+import ScaleControl from '../ScaleControl/ScaleControl.svelte';
+import NavigationControl from '../NavigationControl/NavigationControl.svelte';
+import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
+import AttributionControl from '../AttributionControl/AttributionControl.svelte';
+import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
+import { SWRDataLabLight } from '../MapStyle';
+import { eclipse } from '@versatiles/style';
+const alternateStyle = eclipse({
+    language: 'de',
+    baseUrl: 'https://tiles.versatiles.org',
+    glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf'
+});
+const { Story } = defineMeta({
+    title: 'Maplibre/Map',
+    component: Map
+});
 </script>
 
 <Story

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

@@ -0,0 +1,19 @@
+import Map from './Map.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 Map: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Map = InstanceType<typeof Map>;
+export default Map;

package/dist/maplibre/Map/Map.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">import maplibre, {} from 'maplibre-gl';
+import { onMount, onDestroy, getContext, hasContext } from 'svelte';
+import { createMapContext } from '../context.svelte.js';
+import {} from '../types';
+import FallbackStyle from './FallbackStyle';
+let { children, options, style = FallbackStyle, minZoom = 0, maxZoom = 14.99, zoom = $bindable(), center = $bindable(), pitch = $bindable(0), bearing = $bindable(0), loading = $bindable(true), projection = { type: 'mercator' }, allowRotation = false, allowZoom = true, showDebug = false, initialLocation = { lat: 51.3, lng: 10.2, zoom: 5 } } = $props();
+let container;
+const mapContext = createMapContext();
+if (getContext('initialLocation') !== undefined && getContext('initialLocation') !== false) {
+    initialLocation = getContext('initialLocation');
+}
+onMount(() => {
+    mapContext.map = new maplibre.Map({
+        container,
+        style,
+        minZoom,
+        maxZoom,
+        pitch,
+        bearing,
+        attributionControl: false, // Added via component
+        center: [initialLocation.lng, initialLocation.lat],
+        zoom: initialLocation.zoom,
+        ...options
+    });
+    mapContext.map.on('load', () => {
+        zoom = mapContext.map?.getZoom();
+        center = mapContext.map?.getCenter();
+        pitch = mapContext.map?.getPitch();
+        bearing = mapContext.map?.getBearing();
+    });
+    mapContext.map.on('moveend', () => {
+        zoom = mapContext.map?.getZoom();
+        center = mapContext.map?.getCenter();
+        pitch = mapContext.map?.getPitch();
+        bearing = mapContext.map?.getBearing();
+    });
+});
+onDestroy(async () => {
+    if (mapContext.map)
+        mapContext.map.remove();
+});
+$effect(() => {
+    if (mapContext.map)
+        mapContext.map.setStyle(style);
+});
+$effect(() => {
+    if (mapContext.styleLoaded) {
+        mapContext.map?.setProjection(projection);
+    }
+});
+$effect(() => {
+    if (allowZoom === false) {
+        mapContext.map?.scrollZoom.disable();
+    }
+    else {
+        mapContext.map?.scrollZoom.enable();
+    }
+});
+</script>
+
+<div bind:this={container} class="container" data-testid="map-container">
+	{#if mapContext.map}
+		{#if children}
+			{@render children()}
+		{/if}
+	{/if}
+	{#if showDebug}
+		<pre class="debug">
+{Object.entries({ ...center, zoom, allowZoom, allowRotation })
+				.map(([key, val]) => `${key}: ${val}`)
+				.join('\n')}</pre>
+	{/if}
+</div>
+
+<style>
+	.container {
+		width: 100%;
+		height: 100%;
+	}
+
+	.debug {
+		position: absolute;
+		top: 0;
+		right: 0;
+		background: rgba(0, 0, 0, 0.9);
+		color: white;
+		z-index: 1000;
+		padding: 2px;
+		font-family: monospace;
+	}
+</style>