feat(VectorLayer): Make placeBelow optional (#342)

Removes default value of label-place-major-city

Author: awesomephant

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

@@ -113,6 +113,26 @@
 	</DesignTokens>
 </Story>
 
+<Story asChild name="feat/341">
+	<DesignTokens theme="light">
+		<div class="container">
+			<Map showDebug={true} style={SWRDataLabLight({ places: { showLabels: false } })}>
+				<GeoJsonSource id="demo" data={SamplePoints as GeoJSON} attribution="Demo attribution" />
+				<VectorLayer
+					sourceId="demo"
+					id="circles"
+					type="circle"
+					paint={{
+						'circle-radius': 12,
+						'circle-color': 'red'
+					}}
+				/>
+				<AttributionControl position="bottom-left" />
+			</Map>
+		</div>
+	</DesignTokens>
+</Story>
+
 <Story asChild name="Filter">
 	<DesignTokens theme="light">
 		<div class="controls">

components/src/maplibre/VectorLayer/VectorLayer.svelte

@@ -45,8 +45,7 @@
 		sourceId,
 		sourceLayer,
 		filter,
-		visible = true,
-		placeBelow = 'label-place-major-city',
+		placeBelow,
 		type,
 		paint,
 		layout,
@@ -80,15 +79,17 @@
 	$effect(() => {
 		if (map && styleLoaded) {
 			const style = map.getStyle();
-			beforeId = style.layers.find((l) => {
-				return l.id === placeBelow;
-			})?.id;
+			beforeId = placeBelow
+				? style.layers.find((l) => {
+						return l.id === placeBelow;
+					})?.id
+				: undefined;
 		}
 	});
 
 	$effect(() => {
-		if (map && styleLoaded && beforeId) {
-			map.addLayer(layerSpec, beforeId);
+		if (map && styleLoaded) {
+			beforeId ? map.addLayer(layerSpec, beforeId) : map.addLayer(layerSpec);
 		}
 	});