@swr-data-lab/components 2.0.0 → 2.2.0

package/dist/maplibre/GeoJSONSource/GeoJSONSource.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">// See: https://maplibre.org/maplibre-gl-js/docs/API/classes/GeoJSONSource/
+import {} from 'maplibre-gl';
+import MapSource from '../Source/MapSource.svelte';
+const { maxZoom = 24, id, data, attribution = '' } = $props();
+const sourceSpec = {
+    type: 'geojson',
+    data,
+    maxzoom: maxZoom,
+    attribution
+};
+</script>
+
+<MapSource {id} {sourceSpec} />

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

@@ -0,0 +1,15 @@
+interface GeoJSONSourceProps {
+    id: string;
+    /**
+     * GeoJSON object or URL
+     */
+    data: GeoJSON.GeoJSON | string;
+    /**
+     * Attribution string for your data, usually rendered using an `<AttributionControl>`
+     */
+    attribution?: string;
+    maxZoom?: number;
+}
+declare const GeoJsonSource: import("svelte").Component<GeoJSONSourceProps, {}, "">;
+type GeoJsonSource = ReturnType<typeof GeoJsonSource>;
+export default GeoJsonSource;

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

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

package/dist/maplibre/GeoJSONSource/index.js

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

package/dist/maplibre/Map/Map.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">import maplibre, {} from 'maplibre-gl';
 import { onMount, onDestroy, getContext, hasContext } from 'svelte';
-import { createMapContext } from '../context.svelte.js';
+import { createMapContext, MapContext } 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: receivedInitialLocation } = $props();
+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: receivedInitialLocation, 
+// Future: This should become bindable.readonly when that becomes
+// available, see: https://github.com/sveltejs/svelte/issues/7712
+mapContext = $bindable(), onmoveend, onmovestart } = $props();
 let container;
 // Merge initial location with default object so individual
 // properties (like pitch) can be omitted by the caller
@@ -14,7 +17,7 @@ let initialLocation = {
     pitch: 0,
     ...receivedInitialLocation
 };
-const mapContext = createMapContext();
+mapContext = createMapContext();
 if (getContext('initialLocation') !== undefined && getContext('initialLocation') !== false) {
     initialLocation = getContext('initialLocation');
 }
@@ -43,6 +46,12 @@ onMount(() => {
         pitch = mapContext.map?.getPitch();
         bearing = mapContext.map?.getBearing();
     });
+    if (onmoveend) {
+        mapContext.map.on('moveend', onmoveend);
+    }
+    if (onmovestart) {
+        mapContext.map.on('movestart', onmovestart);
+    }
 });
 onDestroy(async () => {
     if (mapContext.map)

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

@@ -1,5 +1,6 @@
-import maplibre, { type ProjectionSpecification, type StyleSpecification } from 'maplibre-gl';
+import maplibre, { type MapLibreEvent, type ProjectionSpecification, type StyleSpecification } from 'maplibre-gl';
 import { type Snippet } from 'svelte';
+import { MapContext } from '../context.svelte.js';
 import { type Location } from '../types';
 interface MapProps {
     style?: StyleSpecification | string;
@@ -16,8 +17,11 @@ interface MapProps {
     projection?: ProjectionSpecification;
     showDebug?: boolean;
     options?: any;
+    mapContext?: MapContext;
+    onmovestart?: (e: MapLibreEvent) => null;
+    onmoveend?: (e: MapLibreEvent) => null;
     children?: Snippet;
 }
-declare const Map: import("svelte").Component<MapProps, {}, "center" | "zoom" | "pitch" | "bearing" | "loading">;
+declare const Map: import("svelte").Component<MapProps, {}, "center" | "zoom" | "pitch" | "bearing" | "loading" | "mapContext">;
 type Map = ReturnType<typeof Map>;
 export default Map;

package/dist/maplibre/VectorLayer/VectorLayer.svelte

@@ -10,7 +10,7 @@ const layerSpec = {
     id,
     type,
     source: sourceId,
-    'source-layer': sourceLayer,
+    'source-layer': sourceLayer || '',
     layout: $state.snapshot(layout) ?? {},
     paint: $state.snapshot(paint) ?? {},
     minzoom: minZoom,

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

@@ -2,7 +2,7 @@ import type { CircleLayoutProps, CirclePaintProps, FillLayoutProps, FillPaintPro
 interface VectorLayerProps {
     id: string;
     sourceId: string;
-    sourceLayer: string;
+    sourceLayer?: string;
     type: 'line' | 'fill' | 'circle' | 'symbol';
     placeBelow: string;
     visible?: boolean;

package/dist/maplibre/VectorTileSource/VectorTileSource.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">import {} from 'svelte';
-import {} from 'maplibre-gl';
+<script lang="ts">import {} from 'maplibre-gl';
 import MapSource from '../Source/MapSource.svelte';
-const { minZoom = 0, maxZoom = 24, id, url } = $props();
+const { minZoom = 0, maxZoom = 24, id, url, attribution = '' } = $props();
 const sourceSpec = {
     type: 'vector',
     tiles: [url],
     maxzoom: maxZoom,
-    minzoom: minZoom
+    minzoom: minZoom,
+    attribution
 };
 </script>
 

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

@@ -1,10 +1,12 @@
-import { type Snippet } from 'svelte';
 interface VectorTileSourceProps {
     id: string;
     url: string;
     minZoom?: number;
     maxZoom?: number;
-    children?: Snippet;
+    /**
+     * Attribution string for your data, usually rendered using an `<AttributionControl>`
+     */
+    attribution?: string;
 }
 declare const VectorTileSource: import("svelte").Component<VectorTileSourceProps, {}, "">;
 type VectorTileSource = ReturnType<typeof VectorTileSource>;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "2.0.0",
+	"version": "2.2.0",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",
@@ -49,6 +49,7 @@
 		"@sveltejs/kit": "^2.22.2",
 		"@sveltejs/package": "^2.3.12",
 		"@sveltejs/vite-plugin-svelte": "^5.1.0",
+		"@types/geojson": "^7946.0.16",
 		"@versatiles/style": "^5.6.0",
 		"@vitest/browser": "^3.2.4",
 		"@vitest/coverage-v8": "^3.2.4",
@@ -61,9 +62,9 @@
 		"sass-embedded": "^1.89.2",
 		"semantic-release": "^24.2.6",
 		"storybook": "^9.0.15",
-		"svelte-preprocess": "^6.0.3",
 		"svelte": "^5.23.0",
 		"svelte-check": "^4.0.0",
+		"svelte-preprocess": "^6.0.3",
 		"typescript": "^5.8.3",
 		"vite": "^6.0.0",
 		"vitest": "^3.1.1",