From e972bba11c77ca68c641344541b599395b740aa4 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Fri, 16 Jan 2026 14:27:17 +0100
Subject: [PATCH 1/4] Add 'allowPan' prop, consistent with zoom and rotation
options
---
.../src/maplibre/Map/Map.stories.svelte | 39 +++++++++++++++++++
components/src/maplibre/Map/Map.svelte | 13 ++++++-
2 files changed, 51 insertions(+), 1 deletion(-)
diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index 11cf1c1..ea563e9 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -28,6 +28,8 @@
let mapContext: MapContext;
const onMoveStart = fn();
+
+ let mapOptions = $state({});
+ {}}>
+
+
+
+
+
+
+
+
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index d0a72f4..f971c78 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,16 @@
}
});
- const debugValues = $derived(Object.entries({ zoom, pitch, allowZoom, allowRotation }));
+ $effect(() => {
+ console.log('allowPan changed:', allowPan);
+ 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;
From 8a3914141317e4d343d8c3135f798e2ff3b259e9 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Fri, 16 Jan 2026 14:33:50 +0100
Subject: [PATCH 2/4] Toggle cursors (grab/grabbing) based on dragPan setting
---
components/src/maplibre/Map/Map.svelte | 9 ++++-----
1 file changed, 4 insertions(+), 5 deletions(-)
diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index f971c78..affa622 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -264,19 +264,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;
From fa9ca1e67d8ca4e609220ff886ad529f515a8f67 Mon Sep 17 00:00:00 2001
From: Simon Jockers <449739+sjockers@users.noreply.github.com>
Date: Fri, 16 Jan 2026 15:06:02 +0100
Subject: [PATCH 3/4] Add unit tests
---
.../src/maplibre/Map/Map.stories.svelte | 43 +++++++++++++++----
1 file changed, 34 insertions(+), 9 deletions(-)
diff --git a/components/src/maplibre/Map/Map.stories.svelte b/components/src/maplibre/Map/Map.stories.svelte
index ea563e9..dc4001f 100644
--- a/components/src/maplibre/Map/Map.stories.svelte
+++ b/components/src/maplibre/Map/Map.stories.svelte
@@ -29,7 +29,10 @@
let mapContext: MapContext;
const onMoveStart = fn();
- let mapOptions = $state({});
+ let mapOptions = $state({
+ allowZoom: true,
+ allowPan: true
+ });
- {}}>
+ {
+ 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);
+ });
+ }}
+>
-