From 7298ad0c6180bb3d42af2f1295e0c32d93bc8de6 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 17 Mar 2026 15:27:34 +0100
Subject: [PATCH 1/2] Add test case

---
 .../VectorLayer/VectorLayer.stories.svelte    | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte b/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
index 3691ee0d..eb1b866d 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.stories.svelte
+++ b/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">

From e9aeab94c3f135da90360321a6ea7de03cb7d6db Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 17 Mar 2026 15:31:53 +0100
Subject: [PATCH 2/2] Implement feature

---
 .../src/maplibre/VectorLayer/VectorLayer.svelte   | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/src/maplibre/VectorLayer/VectorLayer.svelte b/components/src/maplibre/VectorLayer/VectorLayer.svelte
index e375ac38..11654d4d 100644
--- a/components/src/maplibre/VectorLayer/VectorLayer.svelte
+++ b/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);
 		}
 	});