Bugs

demo/js/index.js

@@ -247,7 +247,7 @@ let selectedFeatureIds = []
 interactiveMap.on('draw:ready', function () {
 	// interactiveMap.addButton('drawPolygon', {
 	// 	label: 'Draw polygon',
-	// 	group: 'Drawing tools',
+	// 	group: { name: 'drawing-tools', label: 'Drawing tools', order: 2 },
 	// 	iconSvgContent: '<path d="M19.5 7v10M4.5 7v10M7 19.5h10M7 4.5h10"/><path d="M22 18v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zm0-15v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 18v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 3v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1z"/>',
 	// 	isPressed: false,
 	// 	mobile: { slot: 'right-top' },
@@ -263,7 +263,7 @@ interactiveMap.on('draw:ready', function () {
 	// })
 	// interactiveMap.addButton('drawLine', {
 	// 	label: 'Draw line',
-	// 	group: 'Drawing tools',
+	// 	group: { name: 'drawing-tools', label: 'Drawing tools', order: 2 },
 	// 	iconSvgContent: '<path d="M5.706 16.294L16.294 5.706"/><path d="M21 2v3c0 .549-.451 1-1 1h-3c-.549 0-1-.451-1-1V2c0-.549.451-1 1-1h3c.549 0 1 .451 1 1zM6 17v3c0 .549-.451 1-1 1H2c-.549 0-1-.451-1-1v-3c0-.549.451-1 1-1h3c.549 0 1 .451 1 1z"/>',
 	// 	isPressed: false,
 	// 	mobile: { slot: 'right-top' },
@@ -278,7 +278,7 @@ interactiveMap.on('draw:ready', function () {
 	// })
 	// interactiveMap.addButton('editFeature', {
 	// 	label: 'Edit feature',
-	// 	group: 'Drawing tools',
+	// 	group: { name: 'drawing-tools', label: 'Drawing tools', order: 2 },
 	// 	iconSvgContent: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
 	// 	isDisabled: true,
 	// 	mobile: { slot: 'right-top' },
@@ -294,7 +294,7 @@ interactiveMap.on('draw:ready', function () {
 	// })
 	// interactiveMap.addButton('deleteFeature', {
 	// 	label: 'Delete feature',
-	// 	group: 'Drawing tools',
+	// 	group: { name: 'drawing-tools', label: 'Drawing tools', order: 2 },
 	// 	iconSvgContent: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
 	// 	isDisabled: true,
 	// 	mobile: { slot: 'right-top' },

demo/js/planning.js

@@ -77,9 +77,11 @@ const interactiveMap = new InteractiveMap('map', {
 		searchPlugin({
 			transformRequest: transformGeocodeRequest,
 			osNamesURL: process.env.OS_NAMES_URL,
+			regions: ['england', 'wales'],
 			customDatasets: [gridRefSearchOSGB36],
 			width: '300px',
-			showMarker: true
+			showMarker: true,
+			// expanded: true
 		}),
 		useLocationPlugin(),
 		interactPlugin,

docs/api.md

@@ -666,6 +666,51 @@ interactiveMap.toggleButtonState('opt-a', 'pressed', true)
 
 ---
 
+### `fitToBounds(bounds)`
+
+Fit the map view to a bounding box or GeoJSON geometry. Safe zone padding is automatically applied so the content remains fully visible.
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `bounds` | `[number, number, number, number]` | Bounds as [west, south, east, north] or [minX, minY, maxX, maxY] depending on CRS |
+| `bounds` | `object` | A GeoJSON Feature, FeatureCollection, or geometry — bbox is computed automatically |
+
+```js
+// Flat bbox
+interactiveMap.fitToBounds([-0.489, 51.28, 0.236, 51.686])
+
+// GeoJSON Feature
+interactiveMap.fitToBounds({
+  type: 'Feature',
+  geometry: { type: 'Point', coordinates: [-0.1276, 51.5074] },
+  properties: {}
+})
+
+// GeoJSON FeatureCollection
+interactiveMap.fitToBounds({
+  type: 'FeatureCollection',
+  features: [featureA, featureB]
+})
+```
+
+---
+
+### `setView(opts)`
+
+Set the map center and zoom. Safe zone padding is automatically applied.
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `opts` | `Object` | View options |
+| `opts.center` | `[number, number]` | Optional center [lng, lat] or [easting, northing] depending on CRS |
+| `opts.zoom` | `number` | Optional zoom level |
+
+```js
+interactiveMap.setView({ center: [-0.1276, 51.5074], zoom: 12 })
+```
+
+---
+
 ## Events
 
 Subscribe to events using `interactiveMap.on()` and unsubscribe with `interactiveMap.off()`.
@@ -709,8 +754,6 @@ Emitted when the underlying map is ready and initial app state (style and size)
 | `map` | Object | The underlying map instance (all providers) |
 | `view` | Object | The map view (ESRI only) |
 | `crs` | string | The coordinate reference system (e.g. `'EPSG:4326'`) |
-| `fitToBounds` | Function | Fit the map to a bounding box |
-| `setView` | Function | Set the map center and zoom |
 | `mapStyleId` | string | The ID of the active map style |
 | `mapSize` | string | The active map size (`'small'`, `'medium'`, or `'large'`) |
 

docs/api/button-definition.md

@@ -64,9 +64,24 @@ Raw SVG content for the button icon. The outer `<svg>` tag should be excluded.
 ---
 
 ### `group`
-**Type:** `string`
+**Type:** `{ name: string, label?: string, order?: number }`
+
+Groups this button with other buttons that share the same `name`. Two or more buttons sharing a group are rendered inside a semantic `<div role="group">` wrapper, collapsing their visual borders into a single grouped unit.
+
+- **`name`** — Internal identifier used to collect group members. Buttons with the same `name` are grouped together.
+- **`label`** — Accessible label for the group, announced by screen readers. Defaults to `name` if not provided. Should be a short human-readable description (e.g. `'Zoom controls'`).
+- **`order`** — The group's position within its slot, equivalent to the `order` property on singleton buttons. All buttons in the same group must share the same value. Defaults to `0`.
 
-Button group label for grouping related buttons.
+```js
+// Two buttons rendered as a labelled group at slot position 2
+{ group: { name: 'zoom', label: 'Zoom controls', order: 2 }, ... }
+```
+
+The `order` property on each button's breakpoint config (e.g. `desktop.order`) controls the button's position *within* the group when an explicit sequence is needed. If omitted, buttons appear in their declaration order.
+
+> If only one button declares a given group name, it is rendered as a standalone button and the group wrapper is not created.
+
+> **Note:** Passing a plain string (e.g. `group: 'zoom'`) is deprecated and will log a warning in development.
 
 ---
 
@@ -216,7 +231,9 @@ The [slot](./slots.md) where the button should appear at this breakpoint. Slots
 ### `order`
 **Type:** `number`
 
-The order the button appears within its slot.
+For **ungrouped buttons**, this is the button's position within its slot.
+
+For **grouped buttons**, this is the button's position *within its group*. The group's position within the slot is controlled by `group.order` instead. If omitted, buttons appear in their declaration order within the group.
 
 ### `showLabel`
 **Type:** `boolean`

docs/api/panel-definition.md

@@ -83,7 +83,7 @@ Each breakpoint (`mobile`, `tablet`, `desktop`) accepts the following properties
 
 The [slot](./slots.md) where the panel should appear at this breakpoint. Slots are named regions in the UI layout.
 
-### `dismissable`
+### `dismissible`
 **Type:** `boolean`
 
 Whether the panel can be dismissed (closed) by the user. When `false` and `open` is `true`, the panel is always visible at this breakpoint and any associated panel-toggle button is automatically suppressed.
@@ -96,7 +96,7 @@ Whether the panel is exclusive. An exclusive panel will hide other panels when i
 ### `open`
 **Type:** `boolean`
 
-Whether the panel is open. When `true` and combined with `dismissable: false`, the panel is always visible at this breakpoint and will be restored automatically when the breakpoint is entered.
+Whether the panel is open. When `true` and combined with `dismissible: false`, the panel is always visible at this breakpoint and will be restored automatically when the breakpoint is entered.
 
 ### `showLabel`
 **Type:** `boolean`

docs/plugins/plugin-manifest.md

@@ -92,7 +92,7 @@ const InitComponent = ({ context }) => {
 
 Panel definitions to register in the UI.
 
-Panels come with pre-built behaviour and styling, including headings, dismissable states, and modal overlays. Supports responsive breakpoint configuration.
+Panels come with pre-built behaviour and styling, including headings, dismissible states, and modal overlays. Supports responsive breakpoint configuration.
 
 See [PanelDefinition](../api/panel-definition.md) for full details.
 

package.json

@@ -197,6 +197,7 @@
     "@docusaurus/theme-common": "^3.9.2",
     "@easyops-cn/docusaurus-search-local": "^0.55.0",
     "@turf/area": "^7.2.0",
+    "@turf/bbox": "^7.3.4",
     "@turf/bearing": "^7.3.3",
     "@turf/boolean-disjoint": "^7.3.3",
     "@turf/boolean-valid": "^7.2.0",

plugins/beta/datasets/src/manifest.js

@@ -24,18 +24,18 @@ export const manifest = {
     mobile: {
       slot: 'bottom',
       modal: true,
-      dismissable: true
+      dismissible: true
     },
     tablet: {
       slot: 'inset',
-      dismissable: true,
+      dismissible: true,
       exclusive: true,
       width: '300px'
     },
     desktop: {
       slot: 'inset',
       modal: false,
-      dismissable: true,
+      dismissible: true,
       exclusive: true,
       width: '320px'
     },

plugins/beta/map-styles/src/manifest.js

@@ -11,19 +11,19 @@ export const manifest = {
     mobile: {
       slot: 'bottom',
       modal: true,
-      dismissable: true
+      dismissible: true
     },
     tablet: {
       slot: 'inset',
       modal: true,
       width: '400px',
-      dismissable: true
+      dismissible: true
     },
     desktop: {
       slot: 'inset',
       modal: true,
       width: '400px',
-      dismissable: true
+      dismissible: true
     },
     render: MapStyles // will be wrapped automatically
   }],

plugins/beta/use-location/src/manifest.js

@@ -18,7 +18,7 @@ export const manifest = {
 
   buttons: [{
     id: 'useLocation',
-    group: 'location',
+    group: { name: 'location', label: 'Location', order: 0 },
     label: 'Use your location',
     iconId: 'locateFixed',
     hiddenWhen: () => !navigator.geolocation,
@@ -33,19 +33,19 @@ export const manifest = {
     mobile: {
       slot: 'banner',
       open: false,
-      dismissable: true,
+      dismissible: true,
       modal: true
     },
     tablet: {
       slot: 'banner',
       open: false,
-      dismissable: true,
+      dismissible: true,
       modal: true
     },
     desktop: {
       slot: 'banner',
       open: false,
-      dismissable: true,
+      dismissible: true,
       modal: true
     },
     render: UseLocation