diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index 11cf1c1..dc4001f 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -28,6 +28,11 @@
 
 	let mapContext: MapContext;
 	const onMoveStart = fn();
+
+	let mapOptions = $state({
+		allowZoom: true,
+		allowPan: true
+	});
 </script>
 
 <Story
@@ -132,6 +137,65 @@
 	</div>
 </Story>
 
+<Story
+	asChild
+	name="Toggle zoom and pan"
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const containerEl = canvas.getByTestId('map-container');
+		const toggleZoomButton = canvas.getByTestId('toggle-zoom');
+		const togglePanButton = canvas.getByTestId('toggle-pan');
+
+		await step('toggle zoom off', async () => {
+			await userEvent.click(toggleZoomButton);
+			expect(mapContext.map?.scrollZoom.isEnabled()).toBe(false);
+		});
+
+		await step('toggle zoom on', async () => {
+			await userEvent.click(toggleZoomButton);
+			expect(mapContext.map?.scrollZoom.isEnabled()).toBe(true);
+		});
+
+		await step('toggle pan off', async () => {
+			await userEvent.click(togglePanButton);
+			expect(mapContext.map?.dragPan.isEnabled()).toBe(false);
+		});
+
+		await step('toggle pan on', async () => {
+			await userEvent.click(togglePanButton);
+			expect(mapContext.map?.dragPan.isEnabled()).toBe(true);
+		});
+	}}
+>
+	<div class="container">
+		<DesignTokens theme="light">
+			<button
+				data-testid="toggle-zoom"
+				onclick={() => {
+					mapOptions.allowZoom = !mapOptions.allowZoom;
+				}}>Toggle Zoom</button
+			>
+			<button
+				data-testid="toggle-pan"
+				onclick={() => {
+					mapOptions.allowPan = !mapOptions.allowPan;
+				}}>Toggle Pan</button
+			>
+			<Map
+				style={SWRDataLabLight()}
+				initialLocation={{ lat: 50.88, lng: 10.43, zoom: 5 }}
+				showDebug
+				onmovestart={onMoveStart}
+				allowZoom={mapOptions.allowZoom}
+				allowPan={mapOptions.allowPan}
+				bind:mapContext
+			>
+				<AttributionControl />
+			</Map>
+		</DesignTokens>
+	</div>
+</Story>
+
 <Story asChild name="Globe Projection">
 	<div class="container">
 		<DesignTokens theme="dark">
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index d0a72f4..4b2fbef 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -19,6 +19,7 @@
 		initialBounds?: LngLatBoundsLike;
 		maxBounds?: LngLatBoundsLike;
 		initialLocation?: Location;
+		allowPan?: boolean;
 		allowRotation?: boolean;
 		allowZoom?: boolean;
 		minZoom?: number;
@@ -57,6 +58,7 @@
 		bearing = $bindable(0),
 		loading = $bindable(true),
 		projection = { type: 'mercator' },
+		allowPan = true,
 		allowRotation = false,
 		allowZoom = true,
 		showDebug = false,
@@ -157,7 +159,15 @@
 		}
 	});
 
-	const debugValues = $derived(Object.entries({ zoom, pitch, allowZoom, allowRotation }));
+	$effect(() => {
+		if (allowPan === false) {
+			mapContext.map?.dragPan.disable();
+		} else {
+			mapContext.map?.dragPan.enable();
+		}
+	});
+
+	const debugValues = $derived(Object.entries({ zoom, pitch, allowZoom, allowPan, allowRotation }));
 	const handleDebugValueClick = (e: MouseEvent) => {
 		if (e.target) {
 			const t = e.target as HTMLElement;
@@ -253,19 +263,18 @@
 			width: 100%;
 		}
 
-		.maplibregl-canvas-container.maplibregl-interactive {
+		.maplibregl-canvas-container.maplibregl-touch-drag-pan {
 			cursor: grab;
 			user-select: none;
 		}
+		.maplibregl-canvas-container.maplibregl-touch-drag-pan:active {
+			cursor: grabbing;
+		}
 
 		.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer {
 			cursor: pointer;
 		}
 
-		.maplibregl-canvas-container.maplibregl-interactive:active {
-			cursor: grabbing;
-		}
-
 		.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,
 		.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas {
 			touch-action: pan-x pan-y;