fix(VectorLayer): Fix default value for placeBelow pointing to a layer that doesn't exist anymore (#143)

* Fix default value for placeBelow
* Improve formatting, mark optional props as such
* Rebuild lockfile

Author: awesomephant

components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte

@@ -40,6 +40,7 @@
 				<GeoJSONSource id="demo" data={geoJSON} attribution="Demo attribution" />
 				<VectorLayer
 					sourceId="demo"
+					placeBelow="street-residential"
 					id="test-outline"
 					type="line"
 					paint={{

components/src/maplibre/GeoJSONSource/GeoJSONSource.svelte

@@ -20,9 +20,9 @@
 
 	const sourceSpec: GeoJSONSourceSpecification = {
 		type: 'geojson',
-		data,
 		maxzoom: maxZoom,
-		attribution
+		attribution,
+		data
 	};
 </script>
 

components/src/maplibre/Source/MapSource.svelte

@@ -3,7 +3,7 @@
 	import { type Map, type SourceSpecification } from 'maplibre-gl';
 	import { getMapContext, createSourceContext } from '../context.svelte.js';
 
-	type Source = maplibregl.VectorTileSource;
+	type Source = maplibregl.VectorTileSource | maplibregl.GeoJSONSource;
 
 	interface MapSourceProps {
 		id: string;
@@ -35,7 +35,10 @@
 
 	// 2. Do extra stuff with the source object
 	$effect(() => {
-		if (source) {
+		if (source && sourceSpec.type === 'geojson') {
+			if (!firstRun) {
+				source.setData(sourceSpec.data);
+			}
 		}
 	});
 

components/src/maplibre/VectorLayer/VectorLayer.stories.svelte

@@ -24,9 +24,9 @@
 				/>
 				<VectorLayer
 					sourceId="ev-infra-source"
+					sourceLayer="coverage"
 					type="fill"
 					id="coverage-fill"
-					sourceLayer="coverage"
 					placeBelow="street-residential"
 					paint={{
 						'fill-color': [

components/src/maplibre/VectorLayer/VectorLayer.svelte

@@ -22,7 +22,7 @@
 		sourceId: string;
 		sourceLayer?: string;
 		type: 'line' | 'fill' | 'circle' | 'symbol';
-		placeBelow: string;
+		placeBelow?: string;
 		visible?: boolean;
 		minZoom?: number;
 		maxZoom?: number;
@@ -31,16 +31,16 @@
 		hovered?: MapGeoJSONFeature | undefined;
 		selected?: MapGeoJSONFeature | undefined;
 
-		onclick: (e: MapLayerMouseEvent) => any;
-		onmousemove: (e: MapLayerMouseEvent) => any;
-		onmouseleave: (e: MapLayerMouseEvent) => any;
+		onclick?: (e: MapLayerMouseEvent) => any;
+		onmousemove?: (e: MapLayerMouseEvent) => any;
+		onmouseleave?: (e: MapLayerMouseEvent) => any;
 	}
 	const {
 		id,
 		sourceId,
 		sourceLayer,
 		visible = true,
-		placeBelow = 'label-place-capital',
+		placeBelow = 'label-place-major-city',
 		type,
 		paint,
 		layout,