@defra/interactive-map 0.0.32-alpha → 0.0.33-alpha

package/providers/beta/openlayers/dist/umd/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("defra",[],t):"object"==typeof exports?exports.defra=t():(e.defra=e.defra||{},e.defra.openLayersProvider=t())}(this,()=>(()=>{"use strict";var e,t,r={},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.m=r,o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce((t,r)=>(o.f[r](e,t),t),[])),o.u=e=>"im-openlayers-provider.js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="defra.openLayersProvider:",o.l=(r,n,i,a)=>{if(e[r])e[r].push(n);else{var u,c;if(void 0!==i)for(var f=document.getElementsByTagName("script"),p=0;p<f.length;p++){var s=f[p];if(s.getAttribute("src")==r||s.getAttribute("data-webpack")==t+i){u=s;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",o.nc&&u.setAttribute("nonce",o.nc),u.setAttribute("data-webpack",t+i),u.src=r),e[r]=[n];var l=(t,n)=>{u.onerror=u.onload=null,clearTimeout(d);var o=e[r];if(delete e[r],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach(e=>e(n)),t)return t(n)},d=setTimeout(l.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=l.bind(null,u.onerror),u.onload=l.bind(null,u.onload),c&&document.head.appendChild(u)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;o.g.importScripts&&(e=o.g.location+"");var t=o.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),o.p=e})(),(()=>{var e={57:0};o.f.j=(t,r)=>{var n=o.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var i=new Promise((r,o)=>n=e[t]=[r,o]);r.push(n[2]=i);var a=o.p+o.u(t),u=new Error;o.l(a,r=>{if(o.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var i=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;u.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",u.name="ChunkLoadError",u.type=i,u.request=a,n[1](u)}},"chunk-"+t,t)}};var t=(t,r)=>{var n,i,[a,u,c]=r,f=0;if(a.some(t=>0!==e[t])){for(n in u)o.o(u,n)&&(o.m[n]=u[n]);c&&c(o)}for(t&&t(r);f<a.length;f++)i=a[f],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0},r=this.webpackChunkdefra_DefraMap=this.webpackChunkdefra_DefraMap||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var i={};function a(){var e,t,r="function"==typeof Symbol?Symbol:{},n=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,n,o,i){var a=n&&n.prototype instanceof f?n:f,p=Object.create(a.prototype);return u(p,"_invoke",function(r,n,o){var i,a,u,f=0,p=o||[],s=!1,l={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(t,r){return i=t,a=0,u=e,l.n=r,c}};function d(r,n){for(a=r,u=n,t=0;!s&&f&&!o&&t<p.length;t++){var o,i=p[t],d=l.p,v=i[2];r>3?(o=v===n)&&(u=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=r<2&&d<i[1])?(a=0,l.v=n,l.n=i[1]):d<v&&(o=r<3||i[0]>n||n>v)&&(i[4]=r,i[5]=n,l.n=v,a=0))}if(o||r>1)return c;throw s=!0,n}return function(o,p,v){if(f>1)throw TypeError("Generator is already running");for(s&&1===p&&d(p,v),a=p,u=v;(t=a<2?e:u)||!s;){i||(a?a<3?(a>1&&(l.n=-1),d(a,u)):l.n=u:l.v=u);try{if(f=2,i){if(a||(o="next"),t=i[o]){if(!(t=t.call(i,u)))throw TypeError("iterator result is not an object");if(!t.done)return t;u=t.value,a<2&&(a=0)}else 1===a&&(t=i.return)&&t.call(i),a<2&&(u=TypeError("The iterator does not provide a '"+o+"' method"),a=1);i=e}else if((t=(s=l.n<0)?u:r.call(n,l))!==c)break}catch(t){i=e,a=1,u=t}finally{f=1}}return{value:t,done:s}}}(r,o,i),!0),p}var c={};function f(){}function p(){}function s(){}t=Object.getPrototypeOf;var l=[][n]?t(t([][n]())):(u(t={},n,function(){return this}),t),d=s.prototype=f.prototype=Object.create(l);function v(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,s):(e.__proto__=s,u(e,o,"GeneratorFunction")),e.prototype=Object.create(d),e}return p.prototype=s,u(d,"constructor",s),u(s,"constructor",p),p.displayName="GeneratorFunction",u(s,o,"GeneratorFunction"),u(d),u(d,o,"Generator"),u(d,n,function(){return this}),u(d,"toString",function(){return"[object Generator]"}),(a=function(){return{w:i,m:v}})()}function u(e,t,r,n){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}u=function(e,t,r,n){function i(t,r){u(e,t,function(e){return this._invoke(t,r,e)})}t?o?o(e,t,{value:r,enumerable:!n,configurable:!n,writable:!n}):e[t]=r:(i("next",0),i("throw",1),i("return",2))},u(e,t,r,n)}function c(e,t,r,n,o,i,a){try{var u=e[i](a),c=u.value}catch(e){return void r(e)}u.done?t(c):Promise.resolve(c).then(n,o)}function f(){var e,t,r=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).zoomAlignment;return{checkDeviceCapabilities:function(){return{isSupported:!!document.createElement("canvas").getContext,error:"Canvas is not supported in this browser"}},load:(e=a().m(function e(){var t,n;return a().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,o.e(142).then(o.bind(o,792));case 1:return t=e.v.default,n={zoomAlignment:r,crs:"EPSG:27700"},e.a(2,{MapProvider:t,mapProviderConfig:n})}},e)}),t=function(){var t=this,r=arguments;return new Promise(function(n,o){var i=e.apply(t,r);function a(e){c(i,n,o,a,u,"next",e)}function u(e){c(i,n,o,a,u,"throw",e)}a(void 0)})},function(){return t.apply(this,arguments)})}}return o.d(i,{default:()=>f}),i.default})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("defra",[],t):"object"==typeof exports?exports.defra=t():(e.defra=e.defra||{},e.defra.openLayersProvider=t())}(this,()=>(()=>{"use strict";var e,t,r={},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.m=r,o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce((t,r)=>(o.f[r](e,t),t),[])),o.u=e=>"im-openlayers-provider.js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="defra.openLayersProvider:",o.l=(r,n,i,a)=>{if(e[r])e[r].push(n);else{var u,c;if(void 0!==i)for(var f=document.getElementsByTagName("script"),p=0;p<f.length;p++){var s=f[p];if(s.getAttribute("src")==r||s.getAttribute("data-webpack")==t+i){u=s;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",o.nc&&u.setAttribute("nonce",o.nc),u.setAttribute("data-webpack",t+i),u.src=r),e[r]=[n];var l=(t,n)=>{u.onerror=u.onload=null,clearTimeout(d);var o=e[r];if(delete e[r],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach(e=>e(n)),t)return t(n)},d=setTimeout(l.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=l.bind(null,u.onerror),u.onload=l.bind(null,u.onload),c&&document.head.appendChild(u)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;o.g.importScripts&&(e=o.g.location+"");var t=o.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),o.p=e})(),(()=>{var e={57:0};o.f.j=(t,r)=>{var n=o.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var i=new Promise((r,o)=>n=e[t]=[r,o]);r.push(n[2]=i);var a=o.p+o.u(t),u=new Error;o.l(a,r=>{if(o.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var i=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;u.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",u.name="ChunkLoadError",u.type=i,u.request=a,n[1](u)}},"chunk-"+t,t)}};var t=(t,r)=>{var n,i,[a,u,c]=r,f=0;if(a.some(t=>0!==e[t])){for(n in u)o.o(u,n)&&(o.m[n]=u[n]);c&&c(o)}for(t&&t(r);f<a.length;f++)i=a[f],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0},r=this.webpackChunkdefra_DefraMap=this.webpackChunkdefra_DefraMap||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var i={};function a(){var e,t,r="function"==typeof Symbol?Symbol:{},n=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,n,o,i){var a=n&&n.prototype instanceof f?n:f,p=Object.create(a.prototype);return u(p,"_invoke",function(r,n,o){var i,a,u,f=0,p=o||[],s=!1,l={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(t,r){return i=t,a=0,u=e,l.n=r,c}};function d(r,n){for(a=r,u=n,t=0;!s&&f&&!o&&t<p.length;t++){var o,i=p[t],d=l.p,v=i[2];r>3?(o=v===n)&&(u=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=r<2&&d<i[1])?(a=0,l.v=n,l.n=i[1]):d<v&&(o=r<3||i[0]>n||n>v)&&(i[4]=r,i[5]=n,l.n=v,a=0))}if(o||r>1)return c;throw s=!0,n}return function(o,p,v){if(f>1)throw TypeError("Generator is already running");for(s&&1===p&&d(p,v),a=p,u=v;(t=a<2?e:u)||!s;){i||(a?a<3?(a>1&&(l.n=-1),d(a,u)):l.n=u:l.v=u);try{if(f=2,i){if(a||(o="next"),t=i[o]){if(!(t=t.call(i,u)))throw TypeError("iterator result is not an object");if(!t.done)return t;u=t.value,a<2&&(a=0)}else 1===a&&(t=i.return)&&t.call(i),a<2&&(u=TypeError("The iterator does not provide a '"+o+"' method"),a=1);i=e}else if((t=(s=l.n<0)?u:r.call(n,l))!==c)break}catch(t){i=e,a=1,u=t}finally{f=1}}return{value:t,done:s}}}(r,o,i),!0),p}var c={};function f(){}function p(){}function s(){}t=Object.getPrototypeOf;var l=[][n]?t(t([][n]())):(u(t={},n,function(){return this}),t),d=s.prototype=f.prototype=Object.create(l);function v(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,s):(e.__proto__=s,u(e,o,"GeneratorFunction")),e.prototype=Object.create(d),e}return p.prototype=s,u(d,"constructor",s),u(s,"constructor",p),p.displayName="GeneratorFunction",u(s,o,"GeneratorFunction"),u(d),u(d,o,"Generator"),u(d,n,function(){return this}),u(d,"toString",function(){return"[object Generator]"}),(a=function(){return{w:i,m:v}})()}function u(e,t,r,n){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}u=function(e,t,r,n){function i(t,r){u(e,t,function(e){return this._invoke(t,r,e)})}t?o?o(e,t,{value:r,enumerable:!n,configurable:!n,writable:!n}):e[t]=r:(i("next",0),i("throw",1),i("return",2))},u(e,t,r,n)}function c(e,t,r,n,o,i,a){try{var u=e[i](a),c=u.value}catch(e){return void r(e)}u.done?t(c):Promise.resolve(c).then(n,o)}function f(){var e,t,r=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).zoomAlignment;return{checkDeviceCapabilities:function(){return{isSupported:!!document.createElement("canvas").getContext,error:"Canvas is not supported in this browser"}},load:(e=a().m(function e(){var t,n;return a().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,o.e(142).then(o.bind(o,93));case 1:return t=e.v.default,n={zoomAlignment:r,crs:"EPSG:27700"},e.a(2,{MapProvider:t,mapProviderConfig:n})}},e)}),t=function(){var t=this,r=arguments;return new Promise(function(n,o){var i=e.apply(t,r);function a(e){c(i,n,o,a,u,"next",e)}function u(e){c(i,n,o,a,u,"throw",e)}a(void 0)})},function(){return t.apply(this,arguments)})}}return o.d(i,{default:()=>f}),i.default})());

package/providers/beta/openlayers/src/utils/tileLayers.js

@@ -1,4 +1,5 @@
 import XYZ from 'ol/source/XYZ.js'
+import TileWMS from 'ol/source/TileWMS.js'
 import VectorTileSource from 'ol/source/VectorTile.js'
 import TileLayer from 'ol/layer/Tile.js'
 import VectorTileLayer from 'ol/layer/VectorTile.js'
@@ -14,6 +15,7 @@ import { TILE_GRID_RESOLUTIONS, TILE_GRID_ORIGIN, TILE_SIZE } from '../defaults.
 recordStyleLayer(true)
 
 const CRS = 'EPSG:27700'
+const SUPPORTED_MAP_STYLE_TYPES = ['vector', 'raster', 'wms', 'ogc-vt']
 
 export function fetchWithTransform (url, resourceType, transformRequest) {
   const result = transformRequest ? (transformRequest(url, resourceType) || {}) : {}
@@ -30,12 +32,28 @@ const createTileLoadFunction = (transformRequest) => (tile, src) => {
     .catch(() => tile.setState(TileState.ERROR))
 }
 
-export function createTileSource (url, transformRequest) {
-  const tileGrid = new TileGrid({
+function createTileGrid () {
+  return new TileGrid({
     resolutions: TILE_GRID_RESOLUTIONS,
     origin: TILE_GRID_ORIGIN,
     tileSize: TILE_SIZE
   })
+}
+
+export function createWMSTileSource (url, params, transformRequest) {
+  const tileGrid = createTileGrid()
+
+  return new TileWMS({
+    url,
+    params,
+    projection: CRS,
+    tileGrid,
+    tileLoadFunction: transformRequest ? createTileLoadFunction(transformRequest) : undefined
+  })
+}
+
+export function createTileSource (url, transformRequest) {
+  const tileGrid = createTileGrid()
 
   const tileUrlFunction = ([z, x, y]) => url
     .replace('{z}', z)
@@ -51,6 +69,15 @@ export function createTileSource (url, transformRequest) {
 }
 
 export async function createMapStyleLayer (mapStyle, transformRequest) {
+  if (mapStyle.type && !SUPPORTED_MAP_STYLE_TYPES.includes(mapStyle.type)) {
+    throw new Error(`Unsupported map style type: '${mapStyle.type}'`)
+  }
+
+  if (mapStyle.type === 'wms') {
+    const source = createWMSTileSource(mapStyle.url, mapStyle.params || {}, transformRequest)
+    return { layer: new TileLayer({ source }), source }
+  }
+
   if (mapStyle.type === 'raster') {
     const source = createTileSource(mapStyle.url, transformRequest)
     return { layer: new TileLayer({ source }), source }

package/providers/beta/openlayers/src/utils/tileLayers.test.js

@@ -1,14 +1,16 @@
 import XYZ from 'ol/source/XYZ.js'
+import TileWMS from 'ol/source/TileWMS.js'
 import TileGrid from 'ol/tilegrid/TileGrid.js'
 import TileLayer from 'ol/layer/Tile.js'
 import VectorTileSource from 'ol/source/VectorTile.js'
 import VectorTileLayer from 'ol/layer/VectorTile.js'
 import { stylefunction } from 'ol-mapbox-style'
-import { createTileSource, createMapStyleLayer, createVectorTileLayer } from './tileLayers.js'
+import { createTileSource, createWMSTileSource, createMapStyleLayer, createVectorTileLayer } from './tileLayers.js'
 import { TILE_GRID_RESOLUTIONS, TILE_GRID_ORIGIN, TILE_SIZE } from '../defaults.js'
 
 const mockTileGridInstance = {}
 const mockSourceInstance = {}
+const mockWMSSourceInstance = {}
 const mockTileLayerInstance = {}
 const mockVectorTileSourceInstance = {}
 const mockOGCVectorTileSourceInstance = { supportedMediaTypes: [] }
@@ -16,6 +18,7 @@ const mockVectorTileLayerInstance = {}
 const mockMVTInstance = { supportedMediaTypes: [] }
 
 jest.mock('ol/source/XYZ.js', () => ({ __esModule: true, default: jest.fn(() => mockSourceInstance) }))
+jest.mock('ol/source/TileWMS.js', () => ({ __esModule: true, default: jest.fn(() => mockWMSSourceInstance) }))
 jest.mock('ol/layer/Tile.js', () => ({ __esModule: true, default: jest.fn(() => mockTileLayerInstance) }))
 jest.mock('ol/tilegrid/TileGrid.js', () => ({ __esModule: true, default: jest.fn(() => mockTileGridInstance) }))
 jest.mock('ol/TileState.js', () => ({ __esModule: true, default: { ERROR: 'error' } }))
@@ -126,6 +129,43 @@ describe('createTileSource', () => {
   })
 })
 
+describe('createWMSTileSource', () => {
+  const wmsParams = { LAYERS: 'MyLayer', FORMAT: 'image/jpeg' }
+
+  beforeEach(() => jest.clearAllMocks())
+
+  it('creates TileGrid with correct OS tile grid config', () => {
+    createWMSTileSource('https://wms.example.com/wms', wmsParams, null)
+    expect(TileGrid).toHaveBeenCalledWith({
+      resolutions: TILE_GRID_RESOLUTIONS,
+      origin: TILE_GRID_ORIGIN,
+      tileSize: TILE_SIZE
+    })
+  })
+
+  it('creates TileWMS source with EPSG:27700 projection and params', () => {
+    createWMSTileSource('https://wms.example.com/wms', wmsParams, null)
+    expect(TileWMS).toHaveBeenCalledWith(expect.objectContaining({
+      url: 'https://wms.example.com/wms',
+      params: wmsParams,
+      projection: 'EPSG:27700',
+      tileGrid: mockTileGridInstance
+    }))
+  })
+
+  it('does not set tileLoadFunction when transformRequest is null', () => {
+    createWMSTileSource('https://wms.example.com/wms', wmsParams, null)
+    const { tileLoadFunction } = TileWMS.mock.calls[0][0]
+    expect(tileLoadFunction).toBeUndefined()
+  })
+
+  it('sets tileLoadFunction when transformRequest is provided', () => {
+    createWMSTileSource('https://wms.example.com/wms', wmsParams, jest.fn())
+    const { tileLoadFunction } = TileWMS.mock.calls[0][0]
+    expect(typeof tileLoadFunction).toBe('function')
+  })
+})
+
 describe('tileLoadFunction (via transformRequest)', () => {
   const url = 'https://tiles.example.com/7/3/5'
   const mockImg = { src: null }
@@ -191,6 +231,13 @@ describe('createMapStyleLayer', () => {
     global.fetch = makeVectorFetchMock()
   })
 
+  it('creates a WMS tile layer and source when mapStyle.type is wms', async () => {
+    const params = { LAYERS: 'MyLayer' }
+    const result = await createMapStyleLayer({ url: 'https://wms.example.com/wms', type: 'wms', params }, null)
+    expect(TileLayer).toHaveBeenCalledWith({ source: mockWMSSourceInstance })
+    expect(result).toEqual({ layer: mockTileLayerInstance, source: mockWMSSourceInstance })
+  })
+
   it('creates a raster tile layer and source when mapStyle.type is raster', async () => {
     const result = await createMapStyleLayer({ url: 'https://tiles.example.com/{z}/{x}/{y}', type: 'raster' }, null)
     expect(TileLayer).toHaveBeenCalledWith({ source: mockSourceInstance })
@@ -210,6 +257,11 @@ describe('createMapStyleLayer', () => {
     expect(result).toEqual({ layer: mockVectorTileLayerInstance, source: mockVectorTileSourceInstance })
   })
 
+  it('throws when mapStyle.type is unsupported', async () => {
+    await expect(createMapStyleLayer({ url: styleUrl, type: 'unsupported' }, null))
+      .rejects.toThrow("Unsupported map style type: 'unsupported'")
+  })
+
   it('creates a vector tile layer and source when mapStyle.type is missing', async () => {
     const result = await createMapStyleLayer({ url: styleUrl }, null)
     expect(VectorTileLayer).toHaveBeenCalledWith({ source: mockVectorTileSourceInstance, declutter: true })

package/src/App/components/MapButton/MapButton.jsx

@@ -1,5 +1,5 @@
 // components/MapButton.jsx
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useCallback } from 'react'
 import { stringToKebab } from '../../../utils/stringToKebab'
 import { Tooltip } from '../Tooltip/Tooltip'
 import { Icon } from '../Icon/Icon'
@@ -116,7 +116,7 @@ const getControlledElement = ({ idPrefix, panelId, buttonId, hasMenu }) => {
  * @param {string} options.className - CSS classes for the button
  * @param {Function} options.onClick - Click event handler
  * @param {Function} options.onKeyUp - Key up event handler
- * @param {Object} options.buttonRefs - React ref object for storing button references
+ * @param {Function} options.setButtonRef - Stable ref callback storing the button DOM node in buttonRefs
  * @param {boolean} options.isDisabled - Whether the button is disabled
  * @param {boolean} options.isPressed - Whether the button is in pressed state
  * @param {boolean} options.isExpanded - Whether content controlled by button is expanded
@@ -133,7 +133,7 @@ const buildButtonProps = ({
   onClick,
   onKeyUp,
   onKeyDown,
-  buttonRefs,
+  setButtonRef,
   isDisabled,
   isPressed,
   isExpanded,
@@ -159,16 +159,12 @@ const buildButtonProps = ({
     onClick,
     onKeyUp,
     onKeyDown,
-    ref: (el) => {
-      if (buttonRefs.current && buttonId) {
-        buttonRefs.current[buttonId] = el
-      }
-    },
+    ref: setButtonRef,
     'aria-disabled': isDisabled || undefined,
     'aria-expanded': ariaExpanded,
     'aria-pressed': typeof isPressed === 'boolean' ? isPressed : undefined,
     'aria-controls': controlledElement?.id,
-    'aria-haspopup': controlledElement?.type === 'popup' || undefined,
+    'aria-haspopup': controlledElement?.type === 'popup' ? 'menu' : undefined,
     ...(href
       ? { href, target: '_blank', onKeyUp: handleKeyUp, role: 'button' }
       : { type: 'button' })
@@ -224,6 +220,14 @@ export const MapButton = ({
   const [menuRect, setMenuRect] = useState(null)
   const menuRef = useRef(null)
 
+  // Stable across renders so Preact doesn't detach/reattach it (and transiently
+  // null out buttonRefs.current[buttonId]) on every unrelated re-render of this button.
+  const setButtonRef = useCallback((el) => {
+    if (buttonRefs.current && buttonId) {
+      buttonRefs.current[buttonId] = el
+    }
+  }, [buttonRefs, buttonId])
+
   const Element = href ? 'a' : 'button'
   const hasMenu = menuItems?.length >= 1
   const showIcon = iconId || iconSvgContent || hasMenu
@@ -264,7 +268,7 @@ export const MapButton = ({
     onClick: handleButtonClick,
     onKeyUp: handleButtonKeyUp,
     onKeyDown: handleButtonKeyDown,
-    buttonRefs,
+    setButtonRef,
     isDisabled,
     isPressed,
     isExpanded,

package/src/App/components/MapButton/MapButton.module.scss

@@ -172,7 +172,7 @@
 }
 
 // 4. State styles
-.im-c-map-button[aria-haspopup="true"][aria-expanded="true"] svg {
+.im-c-map-button[aria-haspopup="menu"][aria-expanded="true"] svg {
     transform: rotate(180deg);
 }
 

package/src/App/components/MapButton/MapButton.test.jsx

@@ -125,7 +125,7 @@ describe('MapButton', () => {
     renderButton({ idPrefix: 'prefix', menuItems: [{ label: 'Item' }] })
     const button = getButton()
     expect(button).toHaveAttribute('aria-controls', 'prefix-popup-test')
-    expect(button).toHaveAttribute('aria-haspopup', 'true')
+    expect(button).toHaveAttribute('aria-haspopup', 'menu')
   })
 
   it('toggles popup aria-expanded and startPos', () => {

package/src/App/components/PopupMenu/PopupMenu.test.jsx

@@ -145,6 +145,75 @@ describe('PopupMenu', () => {
     expect(mockSetIsOpen).toHaveBeenCalled()
   })
 
+  describe('Tab key focus handoff', () => {
+    let before, instigatorEl, after1, after2
+
+    beforeEach(() => {
+      before = document.createElement('button')
+      instigatorEl = document.createElement('button')
+      after1 = document.createElement('button')
+      after2 = document.createElement('button')
+      document.body.append(before, instigatorEl, after1, after2)
+      // jsdom never computes layout, so offsetParent is always null — findTabStop
+      // treats that as "hidden" and skips it, so it must be stubbed for these to look focusable.
+      ;[before, instigatorEl, after1, after2].forEach(el => Object.defineProperty(el, 'offsetParent', { value: true, configurable: true }))
+      mockUseApp.buttonRefs.current.instigator = instigatorEl
+    })
+
+    afterEach(() => {
+      [before, instigatorEl, after1, after2].forEach(el => el.remove())
+    })
+
+    it('moves focus to the tab stop after the instigator, not the first tab stop on the page', () => {
+      renderMenu()
+      fireEvent.keyDown(screen.getByRole('menu'), { key: 'Tab' })
+      expect(document.activeElement).toBe(after1)
+    })
+
+    it('Shift+Tab moves focus to the tab stop before the instigator', () => {
+      renderMenu()
+      fireEvent.keyDown(screen.getByRole('menu'), { key: 'Tab', shiftKey: true })
+      expect(document.activeElement).toBe(before)
+    })
+
+    it('falls back to computing the tab stop from the menu itself when the instigator is no longer available', () => {
+      mockUseApp.buttonRefs.current.instigator = null
+      renderMenu()
+      expect(() => fireEvent.keyDown(screen.getByRole('menu'), { key: 'Tab' })).not.toThrow()
+      expect(document.activeElement).toBe(before)
+      expect(mockUseApp.layoutRefs.viewportRef.current.focus).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Tab key inside a modal dialog', () => {
+    let dialogEl, insideBefore, instigatorEl, outsideAfter
+
+    beforeEach(() => {
+      dialogEl = document.createElement('div')
+      dialogEl.setAttribute('role', 'dialog')
+      dialogEl.setAttribute('aria-modal', 'true')
+      insideBefore = document.createElement('button')
+      instigatorEl = document.createElement('button')
+      dialogEl.append(insideBefore, instigatorEl)
+      outsideAfter = document.createElement('button')
+      document.body.append(dialogEl, outsideAfter)
+      ;[insideBefore, instigatorEl, outsideAfter].forEach(el => Object.defineProperty(el, 'offsetParent', { value: true, configurable: true }))
+      mockUseApp.buttonRefs.current.instigator = instigatorEl
+    })
+
+    afterEach(() => {
+      dialogEl.remove()
+      outsideAfter.remove()
+    })
+
+    it('wraps within the dialog instead of escaping to a tab stop outside it', () => {
+      renderMenu()
+      fireEvent.keyDown(screen.getByRole('menu'), { key: 'Tab' })
+      expect(document.activeElement).toBe(insideBefore)
+      expect(document.activeElement).not.toBe(outsideAfter)
+    })
+  })
+
   it('calls item onClick directly if no buttonConfig', () => {
     renderMenu()
     fireEvent.click(screen.getByText('Item 1'))
@@ -362,6 +431,16 @@ describe('PopupMenu', () => {
     expect(focusSpy).toHaveBeenCalled()
   })
 
+  it('Escape falls back to focusing viewport when instigator is no longer available', () => {
+    mockUseApp.buttonRefs.current.instigator = null
+    const focusSpy = jest.spyOn(mockUseApp.layoutRefs.viewportRef.current, 'focus')
+    renderMenu()
+    const ul = screen.getByRole('menu')
+    expect(() => fireEvent.keyDown(ul, { key: 'Escape' })).not.toThrow()
+    expect(focusSpy).toHaveBeenCalled()
+    focusSpy.mockRestore()
+  })
+
   it('direct render without startIndex respects startPos="first" (covers initializer and effect)', () => {
     renderDirect({ startPos: 'first' })
     expectSelected('Item 1')

package/src/App/components/PopupMenu/usePopupMenu.js

@@ -1,5 +1,6 @@
 import { useState, useMemo, useEffect } from 'react'
 import { stringToKebab } from '../../../utils/stringToKebab.js'
+import { findTabStop } from '../../../utils/findNextTabStop.js'
 import { useApp } from '../../store/appContext.js'
 
 /**
@@ -86,6 +87,54 @@ const resolveItemFocus = (item, buttonConfig) => ({
   keepFocus: buttonConfig[item.id]?.keepFocus ?? item.keepFocus
 })
 
+/**
+ * Focuses the instigator button if it's still in the DOM, otherwise falls back
+ * to the map viewport. The instigator can disappear while the menu is open
+ * (e.g. app state changes elsewhere remove/disable the triggering button),
+ * so callers must not assume it's still focusable.
+ *
+ * @param {HTMLElement|null} instigator - DOM node of the trigger button, may no longer exist.
+ * @param {object}           viewportRef - Ref to the map viewport element, used as fallback.
+ */
+const focusInstigatorOrViewport = (instigator, viewportRef) => {
+  if (instigator) {
+    instigator.focus()
+  } else {
+    viewportRef.current?.focus()
+  }
+}
+
+// A Panel rendered as a modal dialog (see Panel.jsx's computePanelState/getPanelRole)
+// carries both of these attributes together and traps focus within itself via
+// useModalPanelBehaviour's focusin redirect — tab-stop search must stay inside it.
+const MODAL_DIALOG_SELECTOR = '[role="dialog"][aria-modal="true"]'
+
+/**
+ * Moves focus to the tab stop immediately after (or before, for Shift+Tab)
+ * the instigator button, continuing the page's natural tab sequence rather
+ * than returning focus into the popup itself. The popup is rendered via a
+ * portal elsewhere in the DOM, so the browser's own Tab default action can't
+ * be relied on to continue from the instigator — it must be computed and
+ * applied manually. The search is scoped to the nearest modal dialog ancestor
+ * (if any): searching the whole document would let it pick a tab stop outside
+ * an open modal panel, which the app's own modal focus-trap then immediately
+ * yanks focus back from — landing on the trap's container div, which has no
+ * visible focus styling, making focus appear to vanish. Falls back to
+ * computing the tab stop from the menu element itself if the instigator is
+ * gone, so focus still lands on a real neighbouring control rather than
+ * jumping to an unrelated part of the app.
+ *
+ * @param {HTMLElement|null} instigator - DOM node of the trigger button, may no longer exist.
+ * @param {boolean}          isShiftTab - Whether Shift+Tab (move backwards) was pressed.
+ * @param {HTMLElement}      fallbackEl - Menu element to anchor from if the instigator is gone.
+ */
+const focusAdjacentTabStop = (instigator, isShiftTab, fallbackEl) => {
+  const anchor = instigator ?? fallbackEl
+  const root = anchor.closest?.(MODAL_DIALOG_SELECTOR) ?? document
+  const nextStop = findTabStop({ el: anchor, direction: isShiftTab ? 'prev' : 'next', root })
+  nextStop?.focus()
+}
+
 const handleMenuEnter = (event, { items, index, disabledButtons, activateCtx, instigator, dispatch, viewportRef, setIsOpen }) => {
   event.preventDefault()
   const item = items[index]
@@ -98,7 +147,7 @@ const handleMenuEnter = (event, { items, index, disabledButtons, activateCtx, in
     }
     activateItem(event, item, activateCtx)
     if (keepFocus) {
-      instigator.focus()
+      focusInstigatorOrViewport(instigator, viewportRef)
       setIsOpen(false)
       return
     }
@@ -122,7 +171,7 @@ const handleMenuSpace = (event, { items, index, disabledButtons, activateCtx, in
   activateItem(event, item, activateCtx)
   if (!(item.isPressed !== undefined || item.pressedWhen)) {
     if (keepFocus) {
-      instigator.focus()
+      focusInstigatorOrViewport(instigator, viewportRef)
     } else {
       requestAnimationFrame(() => viewportRef.current?.focus())
     }
@@ -149,11 +198,9 @@ const handleMenuSpace = (event, { items, index, disabledButtons, activateCtx, in
  * @returns {Function} onKeyDown handler for the menu element.
  */
 const createMenuKeyDownHandler = ({ items, visibleIndices, index, setIndex, disabledButtons, instigator, setIsOpen, activateCtx, dispatch, viewportRef }) => {
-  const closeAndFocus = (event, preventDefault = false) => {
-    if (preventDefault && event?.preventDefault) {
-      event.preventDefault()
-    }
-    instigator.focus()
+  const closeAndFocus = (event) => {
+    event.preventDefault()
+    focusInstigatorOrViewport(instigator, viewportRef)
     setIsOpen(false)
   }
 
@@ -179,11 +226,13 @@ const createMenuKeyDownHandler = ({ items, visibleIndices, index, setIndex, disa
 
   return (event) => {
     if (['Escape', 'Esc'].includes(event.key)) {
-      closeAndFocus(event, true)
+      closeAndFocus(event)
       return
     }
     if (event.key === 'Tab') {
-      closeAndFocus(event)
+      event.preventDefault()
+      focusAdjacentTabStop(instigator, event.shiftKey, event.currentTarget)
+      setIsOpen(false)
       return
     }
     if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
@@ -195,7 +244,7 @@ const createMenuKeyDownHandler = ({ items, visibleIndices, index, setIndex, disa
       return
     }
     if (event.key === 'End' && visibleIndices.length) {
-      setIndex(visibleIndices[visibleIndices.length - 1])
+      setIndex(visibleIndices[visibleIndices.length - 1]) // NOSONAR .length - 1 used instead of .at(-1) for wider browser support
       return
     }
     if (event.key === 'Enter') {
@@ -274,7 +323,7 @@ export const usePopupMenu = ({
     setIsOpen(false)
     activateItem(event, item, activateCtx)
     if (keepFocus) {
-      instigator.focus()
+      focusInstigatorOrViewport(instigator, viewportRef)
     } else {
       viewportRef.current?.focus()
     }
@@ -285,7 +334,7 @@ export const usePopupMenu = ({
     if (startPos === 'first') {
       setIndex(visibleIndices[0] ?? -1)
     } else if (startPos === 'last') {
-      setIndex(visibleIndices[visibleIndices.length - 1] ?? -1)
+      setIndex(visibleIndices[visibleIndices.length - 1] ?? -1) // NOSONAR .length - 1 used instead of .at(-1) for wider browser support
     } else {
       // No action
     }

package/src/types.js

@@ -403,18 +403,27 @@
  * Falls back to `#0b0c0c` (light) or `#ffffff` (dark).
  * Injected as the `--map-overlay-foreground-color` CSS custom property.
  *
- * @property {'raster' | 'ogc-vt'} [type]
+ * @property {'vector' | 'raster' | 'wms' | 'ogc-vt'} [type]
  * Tile layer type. Controls how the map provider constructs the basemap source. Omit (or leave
  * undefined) for the default Mapbox GL vector tile path. The OpenLayers provider supports all
- * three types, enabling raster, standard vector tile, and OGC vector tile basemaps:
+ * four types, enabling raster, WMS, standard vector tile, and OGC vector tile basemaps:
  * - `'raster'` — XYZ raster tile source; `url` should be a tile URL template.
+ * - `'vector'` — Mapbox GL vector tile path; `url` should point to a Mapbox GL style document.
+ * - `'wms'` — WMS raster tile source; `url` should be the WMS service endpoint and `params`
+ *   should provide the WMS request parameters.
+ *   **Currently only supported by the OpenLayers provider.**
  * - `'ogc-vt'` — OGC API - Tiles vector tile source; `url` should point to an OGC style endpoint
  *   that returns a Mapbox GL style document. **Currently only supported by the OpenLayers provider.**
  *
  * @property {string} url
  * URL for the style. For the default vector tile path and `'ogc-vt'`, this should be a URL that
  * returns a Mapbox GL style document (Mapbox Style Specification). For `'raster'`, this should
- * be an XYZ tile URL template with `{x}`, `{y}`, `{z}` placeholders.
+ * be an XYZ tile URL template with `{x}`, `{y}`, `{z}` placeholders. For `'wms'`, this should
+ * be the WMS service endpoint (the GetMap URL).
+ *
+ * @property {Object} [params]
+ * WMS request parameters. Passed directly to the OpenLayers `TileWMS` source when `type` is `'wms'`.
+ * Most WMS GetMap requests should include `LAYERS`. Example: `{ LAYERS: 'MyLayer', FORMAT: 'image/jpeg' }`.
  */
 
 /**

package/src/utils/findNextTabStop.js

@@ -1,7 +1,7 @@
-export function findTabStop ({ el, direction }) {
-  const focusableEls = document.querySelectorAll('input, button, select, textarea, a[href]')
+export function findTabStop ({ el, direction, root = document }) {
+  const focusableEls = root.querySelectorAll('input, button, select, textarea, a[href]')
   const list = Array.prototype.filter.call(focusableEls, item => {
-    return item.tabIndex >= 0
+    return item.tabIndex >= 0 && !!item.offsetParent
   })
   const index = list.indexOf(el)
   return list[direction === 'next' ? index + 1 : index - 1] || list[0]

package/src/utils/findNextTabStop.test.js

@@ -7,9 +7,10 @@ import { findTabStop } from './findNextTabStop.js'
 // --- MOCK SETUP ---
 // Helper to create mock elements. The default value (tabIndex = 0)
 // is covered below by creating 'el1' without the second argument.
-const createMockElement = (id, tabIndex = 0) => ({
+const createMockElement = (id, tabIndex = 0, offsetParent = {}) => ({
   id,
   tabIndex,
+  offsetParent,
   // Required so Jest knows which element is which in the array lookup
   toString: () => id
 })
@@ -74,4 +75,27 @@ describe('findTabStop', () => {
     // Assert: It wraps around to the first element, el1.
     expect(result).toBe(el1)
   })
+
+  // Test 4: Covers: skipping elements with no offsetParent (hidden, e.g. wrong-breakpoint duplicates).
+  it('should skip hidden elements (no offsetParent) even when tabIndex is valid', () => {
+    const el1 = createMockElement('el1', 0)
+    const hiddenEl = createMockElement('hidden', 0, null)
+    const el3 = createMockElement('el3', 0)
+
+    mockFocusableElements([el1, hiddenEl, el3])
+
+    const result = findTabStop({ el: el1, direction: 'next' })
+
+    expect(result).toBe(el3)
+  })
+
+  it('accepts a custom root to scope the search', () => {
+    const el1 = createMockElement('el1')
+    const scopedRoot = { querySelectorAll: jest.fn(() => [el1]) }
+
+    findTabStop({ el: el1, direction: 'next', root: scopedRoot })
+
+    expect(scopedRoot.querySelectorAll).toHaveBeenCalledTimes(1)
+    expect(document.querySelectorAll).not.toHaveBeenCalled()
+  })
 })

package/webpack.dev.mjs

@@ -87,6 +87,7 @@ export default {
         NGD_BLACK_AND_WHITE_URL_27700: JSON.stringify(process.env.NGD_BLACK_AND_WHITE_URL_27700),
         // Aerial photography
         AERIAL_URL: JSON.stringify(process.env.AERIAL_URL),
+        APGB_WMS_URL: JSON.stringify(process.env.APGB_WMS_URL),
         // OS Maps API (27700 raster)
         MAPS_OUTDOOR_URL: JSON.stringify(process.env.MAPS_OUTDOOR_URL),
         MAPS_ROAD_URL: JSON.stringify(process.env.MAPS_ROAD_URL),