fix: $state.snapshot(style) (#81)

Author: ciscorn

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-maplibre-gl",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"license": "(MIT OR Apache-2.0)",
 	"description": "Build interactive web maps effortlessly with MapLibre GL JS and Svelte",
 	"repository": {

src/content/examples/basestyle/BaseStyle.svelte

@@ -5,32 +5,84 @@
 		LineLayer,
 		MapLibre,
 		Projection,
+		ImageLoader,
 		RasterDEMTileSource,
 		Sky,
 		Terrain,
+		GeoJSONSource,
+		SymbolLayer,
 		VectorTileSource
 	} from 'svelte-maplibre-gl';
 
 	import { Label } from '$lib/components/ui/label/index.js';
 	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
 	import { Switch } from '$lib/components/ui/switch/index.js';
+	import type { FeatureCollection } from 'geojson';
 
-	const STYLES = [
-		{ name: 'Voyager', url: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json' },
-		{ name: 'Positron', url: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json' },
-		{ name: 'Dark Matter', url: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json' },
-		{ name: 'Demo Tiles', url: 'https://demotiles.maplibre.org/style.json' }
-	];
-	let styleUrl = $state(STYLES[0].url);
+	// Base styles
+	const STYLES = new Map<string, string | maplibregl.StyleSpecification>([
+		['Voyager', 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json'],
+		['Positron', 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'],
+		['Dark Matter', 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'],
+		['Demo Tiles', 'https://demotiles.maplibre.org/style.json'],
+		[
+			'GSI Seamlessphoto',
+			{
+				version: 8,
+				sources: {
+					basemap: {
+						type: 'raster',
+						tiles: ['https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg'],
+						tileSize: 256,
+						minzoom: 2,
+						maxzoom: 18,
+						attribution:
+							"<a href='https://maps.gsi.go.jp/development/ichiran.html#seamlessphoto' target='_blank'>GSI, TSIC, AIST, NASA, USGS, GEBCO</a>"
+					}
+				},
+				layers: [{ id: 'basemap', type: 'raster', source: 'basemap' }]
+			} satisfies maplibregl.StyleSpecification
+		],
+		[
+			'GSI Standard',
+			{
+				version: 8,
+				sources: {
+					basemap: {
+						type: 'raster',
+						tiles: ['https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'],
+						tileSize: 256,
+						minzoom: 5,
+						maxzoom: 18,
+						attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html#std' target='_blank'>GSI</a>"
+					}
+				},
+				layers: [{ id: 'basemap', type: 'raster', source: 'basemap' }]
+			}
+		]
+	]);
+	let name = $state('Voyager');
+	let style = $derived(STYLES.get(name)!);
 	let globe = $state(true);
+
+	let data: FeatureCollection = {
+		type: 'FeatureCollection',
+		features: [
+			{
+				type: 'Feature',
+				geometry: { type: 'Point', coordinates: [140, 30] },
+				properties: { imageName: 'osgeo', year: 2024 }
+			}
+		]
+	};
 </script>
 
 <div class="mb-3 flex items-center justify-between">
-	<RadioGroup.Root bind:value={styleUrl} class="flex flex-row gap-x-3">
-		{#each STYLES as style}
+	<RadioGroup.Root bind:value={name} class="flex flex-row gap-x-3">
+		{#each STYLES as [name, _]}
 			<div class="flex items-center space-x-1">
-				<RadioGroup.Item value={style.url} id={style.name} />
-				<Label class="cursor-pointer" for={style.name}>{style.name}</Label>
+				<RadioGroup.Item value={name} id={name} />
+				<Label class="cursor-pointer" for={name}>{name}</Label>
 			</div>
 		{/each}
 	</RadioGroup.Root>
@@ -41,7 +93,8 @@
 	</div>
 </div>
 
-<MapLibre class="h-[55vh] min-h-[300px]" style={styleUrl} zoom={4} maxPitch={80} center={{ lng: 137, lat: 36 }}>
+<MapLibre class="h-[55vh] min-h-[300px]" {style} zoom={4} maxPitch={80} center={{ lng: 137, lat: 36 }}>
+	<!-- User-defined dynamic styles -->
 	<Projection type={globe ? 'globe' : undefined} />
 	<Light anchor="map" />
 	<Sky
@@ -86,4 +139,23 @@
 			<Terrain />
 		</RasterDEMTileSource>
 	{/if}
+	<ImageLoader
+		images={{
+			osgeo: 'https://maplibre.org/maplibre-gl-js/docs/assets/osgeo-logo.png'
+		}}
+	>
+		<GeoJSONSource {data}>
+			<!-- Children components will be added after all images have been loaded -->
+			<SymbolLayer
+				layout={{
+					'text-field': ['get', 'name'],
+					'icon-image': ['get', 'imageName'],
+					'icon-size': ['number', ['get', 'scale'], 1],
+					'icon-text-fit': 'both',
+					'icon-overlap': 'always',
+					'text-overlap': 'always'
+				}}
+			/>
+		</GeoJSONSource>
+	</ImageLoader>
 </MapLibre>

src/lib/maplibre/contexts.svelte.ts

@@ -121,7 +121,7 @@ class MapContext {
 			return;
 		}
 
-		this.map?.setStyle(style, {
+		this.map?.setStyle($state.snapshot(style) as string | StyleSpecification, {
 			// Preserves user styles when the base style changes
 			transformStyle: (previous, next) => {
 				this.baseLight = next.light;

src/lib/maplibre/map/MapLibre.svelte

@@ -489,7 +489,8 @@
 		}
 	});
 	$effect(() => {
-		if (style && !firstRun) {
+		style;
+		if (!firstRun) {
 			mapCtx.setStyle(style);
 		}
 	});