@swr-data-lab/components 2.44.0 → 3.0.1

package/dist/maplibre/Map/Map.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import maplibre, {} from 'maplibre-gl';
+import {} from '../types';
 import { onMount, onDestroy, getContext, hasContext } from 'svelte';
 import { createMapContext, MapContext } from '../context.svelte.js';
-import {} from '../types';
 import FallbackStyle from './FallbackStyle';
 import { de } from './locale';
 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' }, allowPan = true, allowRotation = false, allowZoom = true, showDebug = false, cursor, initialBounds, maxBounds, initialLocation: receivedInitialLocation, 
@@ -9,19 +9,20 @@ let { children, options, style = FallbackStyle, minZoom = 0, maxZoom = 14.99, zo
 // available, see: https://github.com/sveltejs/svelte/issues/7712
 mapContext = $bindable(), cooperativeGestures = false, onmoveend, onmovestart } = $props();
 let container;
-// Merge initial location with default object so individual
-// properties (like pitch) can be omitted by the caller
-let initialLocation = {
+mapContext = createMapContext();
+// Initial location is determined by (in order of precedence) :
+// 1. An arbitrary default location
+// 2. initialLocation prop
+// 3. initialLocation context (notably set by <WithLinkLocation/>)
+let contextLocation = getContext('initialLocation');
+let initialLocation = $derived({
     lat: 51.3,
     lng: 10.2,
     zoom: 5,
     pitch: 0,
-    ...receivedInitialLocation
-};
-mapContext = createMapContext();
-if (getContext('initialLocation') !== undefined && getContext('initialLocation') !== false) {
-    initialLocation = getContext('initialLocation');
-}
+    ...receivedInitialLocation,
+    ...contextLocation
+});
 onMount(() => {
     mapContext.map = new maplibre.Map({
         container,
@@ -76,6 +77,12 @@ $effect(() => {
         mapContext.map?.setProjection(projection);
     }
 });
+$effect(() => {
+    mapContext.map?.jumpTo({
+        center: [initialLocation.lng, initialLocation.lat],
+        zoom: initialLocation.zoom
+    });
+});
 $effect(() => {
     if (allowZoom === false) {
         mapContext.map?.scrollZoom.disable();

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

@@ -1,7 +1,7 @@
 import maplibre, { type LngLatBoundsLike, type MapLibreEvent, type ProjectionSpecification, type StyleSpecification } from 'maplibre-gl';
+import { type Location } from '../types';
 import { type Snippet } from 'svelte';
 import { MapContext } from '../context.svelte.js';
-import { type Location } from '../types';
 interface MapProps {
     style?: StyleSpecification | string;
     /**
@@ -24,7 +24,7 @@ interface MapProps {
     showDebug?: boolean;
     options?: any;
     /**
-     * Set the mouse cursor. `""` (empty string) restores Maplibre's default behaviour. See VectorLayer/Default for a common usage example
+     * Set the mouse cursor. `""` (empty string) restores Maplibre's default behaviour. See VectorLayer/Default for a usage example
      */
     cursor?: string;
     mapContext?: MapContext;

package/dist/maplibre/MapStyle/SWRDataLabLight.js

@@ -7,26 +7,32 @@ import makeWalking from './components/Walking';
 import makeRoads from './components/Roads';
 import defaultOptions from './defaultOptions';
 import makeHillshade from './components/Hillshade';
+const water = {
+    stops: [
+        [6, 'white'],
+        [6.5, 'hsl(216, 50%, 92%)']
+    ]
+};
 const tokens = {
     sans_regular: ['swr_sans_regular'],
     sans_medium: ['swr_sans_medium'],
     sans_bold: ['swr_sans_bold'],
     background: {
         stops: [
-            [8, 'hsl(24, 29%, 98%)'],
-            [10, 'white']
+            [6, 'hsl(24, 20%, 97%)'],
+            [6.5, 'hsl(24, 10%, 99%)']
         ]
     },
-    water: 'hsl(212, 71%, 83%)',
-    water_light: 'hsl(212, 41%, 90%)',
-    water_ocean: 'hsl(212, 60%, 83%)',
-    marsh: 'hsl(200, 14%, 97%)',
+    water,
+    water_light: water,
+    water_ocean: water,
+    marsh: 'hsl(200, 14%, 93%)',
     grass: 'hsl(133, 36%, 95%)',
     grass_dark: 'hsl(127, 49%, 93%)',
     sand: 'hsl(60, 0%, 95%)',
     rock: 'hsl(192, 0%, 90%)',
     street_primary: 'hsl(0, 4%, 95%)',
-    street_primary_faded: 'hsl(0, 4%, 96%)',
+    street_primary_faded: 'hsl(0, 4%, 93%)',
     street_primary_case: 'hsl(240, 1%, 84%)',
     street_secondary: 'hsl(0, 0%, 95%)',
     street_secondary_case: 'hsl(0, 0%, 75%)',
@@ -34,7 +40,7 @@ const tokens = {
     street_tertiary_case: 'hsl(0, 0%, 70%)',
     label_primary: 'hsl(240, 10%, 2%)',
     label_secondary: 'hsl(0, 0%, 18%)',
-    label_tertiary: 'hsl(60, 1%, 50%)',
+    label_tertiary: 'hsl(60, 1%, 25%)',
     building: '#f3f2f1',
     rail: '#d3d3d3',
     boundary_country: '#8b8a89',

package/dist/maplibre/VectorTileSource/VectorTileSource.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">import {} from 'maplibre-gl';
 import MapSource from '../Source/MapSource.svelte';
-const { minZoom = 0, maxZoom = 24, id, url, attribution = '' } = $props();
-const sourceSpec = {
+import fetchTileJSON from './fetchTileJson';
+const { minZoom, maxZoom, id, url, tiles, attribution, promoteId } = $props();
+let tileJsonData = $derived(url ? await fetchTileJSON(url) : {});
+const sourceSpec = $derived({
     type: 'vector',
-    tiles: [url],
-    maxzoom: maxZoom,
-    minzoom: minZoom,
-    attribution
-};
+    tiles: tiles || tileJsonData.tiles || [],
+    maxzoom: maxZoom || tileJsonData.maxZoom || 24,
+    minzoom: minZoom || tileJsonData.minZoom || 0,
+    attribution: attribution || tileJsonData.attribution || '',
+    promoteId
+});
 </script>
 
 <MapSource {id} {sourceSpec} />

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

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

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

@@ -0,0 +1,2 @@
+import { type TileJsonData } from './types';
+export default function fetchTileJSON(url: string): Promise<TileJsonData>;

package/dist/maplibre/VectorTileSource/fetchTileJson.js

@@ -0,0 +1,16 @@
+import {} from './types';
+// Workaround for https://github.com/versatiles-org/versatiles-rs/issues/184
+// Drop when/if this lands: https://github.com/maplibre/maplibre-gl-js/issues/182
+export default async function fetchTileJSON(url) {
+    const u = new URL(url);
+    const res = await fetch(u);
+    const data = await res.json();
+    // Simple heuristic for absolute URLs
+    const re = /(((http)s?)):\/\/.*/gi;
+    return {
+        tiles: data?.tiles.map((path) => (re.test(path) ? path : `${u.origin}${path}`)),
+        attribution: data?.attribution || data?.author,
+        minZoom: data?.minzoom,
+        maxZoom: data?.maxzoom
+    };
+}

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

@@ -0,0 +1,7 @@
+interface TileJsonData {
+    tiles?: string[];
+    attribution?: string;
+    minZoom?: number;
+    maxZoom?: number;
+}
+export { type TileJsonData };

package/dist/maplibre/VectorTileSource/types.js

@@ -0,0 +1 @@
+export {};

package/dist/maplibre/WithLinkLocation/WithLinkLocation.svelte

@@ -8,11 +8,11 @@ let geocoder;
 if (service === 'maptiler') {
     geocoder = new MaptilerGeocoderAPI(key);
 }
-let location = $state();
+let location = $state({});
 function bboxToArea(bbox) {
     return (bbox[2] - bbox[0]) * (bbox[3] - bbox[1]);
 }
-onMount(async () => {
+$effect(async () => {
     const params = new URLSearchParams(window.location.search);
     if (params.has(urlParameter)) {
         const config = {
@@ -23,22 +23,17 @@ onMount(async () => {
         };
         const res = await geocoder.forwardGeocode(config);
         if (res.features[0].bbox && res.features[0].geometry.type === 'Point') {
-            location = {
-                lat: res.features[0].geometry.coordinates[1],
-                lng: res.features[0].geometry.coordinates[0],
-                zoom: 11 - bboxToArea(res.features[0].bbox) * 5.5
-            };
+            location.lat = res.features[0].geometry.coordinates[1];
+            location.lng = res.features[0].geometry.coordinates[0];
+            location.zoom = 11 - bboxToArea(res.features[0].bbox) * 5.5;
+            location.active = true;
         }
     }
     else {
-        location = false;
+        location = {};
     }
 });
-$effect.pre(() => {
-    setContext('initialLocation', location);
-});
+setContext('initialLocation', location);
 </script>
 
-{#if location !== undefined}
-	{@render children?.()}
-{/if}
+{@render children?.()}

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

@@ -10,7 +10,13 @@ interface WithLinkLocationProps {
      * Limit search to one or more countries
      */
     countries?: GeocodingLanguage | GeocodingCountry[];
+    /**
+     * Limit search to one or more languages
+     */
     languages?: GeocodingLanguage | GeocodingLanguage[];
+    /**
+     * Customise the URL parameter used to set the initial location
+     */
     urlParameter?: string;
     children: Snippet;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "2.44.0",
+	"version": "3.0.1",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",