@defra/interactive-map 0.0.24-alpha → 0.0.26-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,107));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,272));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/appEvents.js

@@ -1,50 +1,39 @@
-import XYZ from 'ol/source/XYZ.js'
-import TileGrid from 'ol/tilegrid/TileGrid.js'
-import TileState from 'ol/TileState.js'
-import { TILE_GRID_RESOLUTIONS, TILE_GRID_ORIGIN, TILE_SIZE } from './defaults.js'
+import { createTileSource, createVectorTileLayer, createOGCVectorTileLayer } from './utils/tileLayers.js'
 
-const createTileLoadFunction = (transformRequest) => (tile, src) => {
-  const result = transformRequest(src, 'Tile') || {}
-  const url = result.url || src
-  const headers = result.headers || {}
-  fetch(url, { headers })
-    .then(r => r.blob())
-    .then(blob => { tile.getImage().src = URL.createObjectURL(blob) })
-    .catch(() => tile.setState(TileState.ERROR))
-}
-
-export function createTileSource (url, transformRequest) {
-  const tileGrid = new TileGrid({
-    resolutions: TILE_GRID_RESOLUTIONS,
-    origin: TILE_GRID_ORIGIN,
-    tileSize: TILE_SIZE
-  })
+export { createTileSource, createVectorTileLayer, createOGCVectorTileLayer }
 
-  const tileUrlFunction = ([z, x, y]) => url
-    .replace('{z}', z)
-    .replace('{x}', x)
-    .replace('{y}', y)
+export function attachAppEvents ({ mapProvider, layer, layerType, transformRequest, events, eventBus, map }) {
+  const handleSetMapStyle = async (mapStyle) => {
+    if (layerType === 'raster') {
+      const source = createTileSource(mapStyle.url, transformRequest)
+      layer.setSource(source)
+    } else if (mapStyle.type === 'ogc-vt') {
+      const { layer: newLayer } = await createOGCVectorTileLayer(mapStyle.url, transformRequest, mapStyle)
+      map.getLayers().setAt(0, newLayer)
+    } else {
+      const { layer: newLayer } = await createVectorTileLayer(mapStyle.url, transformRequest, mapStyle)
+      map.getLayers().setAt(0, newLayer)
+    }
+    eventBus.emit(events.MAP_STYLE_CHANGE, { mapStyleId: mapStyle.id })
+  }
 
-  return new XYZ({
-    projection: 'EPSG:27700',
-    tileGrid,
-    tileUrlFunction,
-    tileLoadFunction: transformRequest ? createTileLoadFunction(transformRequest) : undefined
-  })
-}
+  const handleSetPixelRatio = (pixelRatio) => {
+    map.setPixelRatio(pixelRatio)
+  }
 
-export function attachAppEvents ({ tileLayer, transformRequest, events, eventBus }) {
-  const handleSetMapStyle = (mapStyle) => {
-    const source = createTileSource(mapStyle.url, transformRequest)
-    tileLayer.setSource(source)
-    eventBus.emit(events.MAP_STYLE_CHANGE, { mapStyleId: mapStyle.id })
+  const handleSizeChange = ({ mapSize }) => {
+    mapProvider.mapSize = mapSize
   }
 
   eventBus.on(events.MAP_SET_STYLE, handleSetMapStyle)
+  eventBus.on(events.MAP_SET_PIXEL_RATIO, handleSetPixelRatio)
+  eventBus.on(events.MAP_SIZE_CHANGE, handleSizeChange)
 
   return {
     remove () {
       eventBus.off(events.MAP_SET_STYLE, handleSetMapStyle)
+      eventBus.off(events.MAP_SET_PIXEL_RATIO, handleSetPixelRatio)
+      eventBus.off(events.MAP_SIZE_CHANGE, handleSizeChange)
     }
   }
 }

package/providers/beta/openlayers/src/appEvents.test.js

@@ -1,140 +1,118 @@
-import XYZ from 'ol/source/XYZ.js'
-import TileGrid from 'ol/tilegrid/TileGrid.js'
-import { createTileSource, attachAppEvents } from './appEvents.js'
-import { TILE_GRID_RESOLUTIONS, TILE_GRID_ORIGIN, TILE_SIZE } from './defaults.js'
+import { attachAppEvents } from './appEvents.js'
 
-const mockTileGridInstance = {}
-const mockSourceInstance = {}
-
-jest.mock('ol/source/XYZ.js', () => ({ __esModule: true, default: jest.fn(() => mockSourceInstance) }))
-jest.mock('ol/tilegrid/TileGrid.js', () => ({ __esModule: true, default: jest.fn(() => mockTileGridInstance) }))
-jest.mock('ol/TileState.js', () => ({ __esModule: true, default: { ERROR: 'error' } }))
+import { createTileSource, createVectorTileLayer } from './utils/tileLayers.js'
 
-const flushPromises = () => new Promise(resolve => setTimeout(resolve, 0))
+const mockSourceInstance = {}
+const mockVectorTileLayerInstance = {}
 
-describe('createTileSource', () => {
-  beforeEach(() => jest.clearAllMocks())
+jest.mock('./utils/tileLayers.js', () => ({
+  __esModule: true,
+  createTileSource: jest.fn(() => mockSourceInstance),
+  createVectorTileLayer: jest.fn(async () => ({ layer: mockVectorTileLayerInstance, source: {} }))
+}))
 
-  it('creates TileGrid with correct OS tile grid config', () => {
-    createTileSource('https://tiles.example.com/{z}/{x}/{y}', null)
-    expect(TileGrid).toHaveBeenCalledWith({
-      resolutions: TILE_GRID_RESOLUTIONS,
-      origin: TILE_GRID_ORIGIN,
-      tileSize: TILE_SIZE
-    })
-  })
+const events = {
+  MAP_SET_STYLE: 'map:setstyle',
+  MAP_STYLE_CHANGE: 'map:stylechange',
+  MAP_SET_PIXEL_RATIO: 'map:setpixelratio',
+  MAP_SIZE_CHANGE: 'map:sizechange'
+}
 
-  it('creates XYZ source with EPSG:27700 projection', () => {
-    createTileSource('https://tiles.example.com/{z}/{x}/{y}', null)
-    expect(XYZ).toHaveBeenCalledWith(expect.objectContaining({ projection: 'EPSG:27700' }))
-  })
+function makeMap () {
+  return { getLayers: jest.fn(() => ({ setAt: jest.fn() })), setPixelRatio: jest.fn() }
+}
 
-  it('tileUrlFunction substitutes z, x, y into url template', () => {
-    createTileSource('https://tiles.example.com/{z}/{x}/{y}', null)
-    const { tileUrlFunction } = XYZ.mock.calls[0][0]
-    expect(tileUrlFunction([7, 3, 5])).toBe('https://tiles.example.com/7/3/5')
-  })
+function makeProvider () {
+  return { mapSize: 'small' }
+}
 
-  it('does not set tileLoadFunction when transformRequest is null', () => {
-    createTileSource('https://tiles.example.com/{z}/{x}/{y}', null)
-    const { tileLoadFunction } = XYZ.mock.calls[0][0]
-    expect(tileLoadFunction).toBeUndefined()
-  })
-
-  it('sets tileLoadFunction when transformRequest is provided', () => {
-    createTileSource('https://tiles.example.com/{z}/{x}/{y}', jest.fn())
-    const { tileLoadFunction } = XYZ.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 }
-  const mockTile = { getImage: () => mockImg, setState: jest.fn() }
-
-  beforeEach(() => {
-    jest.clearAllMocks()
-    mockImg.src = null
-    global.URL.createObjectURL = jest.fn(() => 'blob:test')
-    global.fetch = jest.fn().mockResolvedValue({
-      blob: () => Promise.resolve(new Blob())
+describe('attachAppEvents', () => {
+  describe('raster', () => {
+    function makeSetup () {
+      jest.clearAllMocks()
+      const layer = { setSource: jest.fn() }
+      const eventBus = { on: jest.fn(), off: jest.fn(), emit: jest.fn() }
+      const mapProvider = makeProvider()
+      const handles = attachAppEvents({ mapProvider, layer, layerType: 'raster', transformRequest: null, events, eventBus, map: makeMap() })
+      const handlerFor = (event) => eventBus.on.mock.calls.find(c => c[0] === event)[1]
+      return { layer, eventBus, handles, handlerFor, mapProvider }
+    }
+
+    it('subscribes to MAP_SET_STYLE on the event bus', () => {
+      const { eventBus } = makeSetup()
+      expect(eventBus.on).toHaveBeenCalledWith(events.MAP_SET_STYLE, expect.any(Function))
     })
-  })
-
-  function getTileLoadFn (transformRequest) {
-    createTileSource('https://tiles.example.com/{z}/{x}/{y}', transformRequest)
-    return XYZ.mock.calls[0][0].tileLoadFunction
-  }
 
-  it('calls transformRequest with src and "Tile" resource type', async () => {
-    const transformRequest = jest.fn(() => null)
-    const fn = getTileLoadFn(transformRequest)
-    fn(mockTile, url)
-    expect(transformRequest).toHaveBeenCalledWith(url, 'Tile')
-  })
-
-  it('uses url and headers from transformRequest result', async () => {
-    const transformRequest = jest.fn(() => ({ url: 'https://proxied.example.com/tile', headers: { Authorization: 'Bearer abc' } }))
-    const fn = getTileLoadFn(transformRequest)
-    fn(mockTile, url)
-    await flushPromises()
-    expect(fetch).toHaveBeenCalledWith('https://proxied.example.com/tile', { headers: { Authorization: 'Bearer abc' } })
-  })
+    it('on MAP_SET_STYLE: creates a tile source and sets it on the layer', async () => {
+      const { layer, handlerFor } = makeSetup()
+      await handlerFor(events.MAP_SET_STYLE)({ url: 'https://new.tiles.com/{z}/{x}/{y}', id: 'newStyle' })
+      expect(createTileSource).toHaveBeenCalledWith('https://new.tiles.com/{z}/{x}/{y}', null)
+      expect(layer.setSource).toHaveBeenCalledWith(mockSourceInstance)
+    })
 
-  it('falls back to original src and empty headers when transformRequest returns null', async () => {
-    const fn = getTileLoadFn(() => null)
-    fn(mockTile, url)
-    await flushPromises()
-    expect(fetch).toHaveBeenCalledWith(url, { headers: {} })
-  })
+    it('on MAP_SET_STYLE: emits MAP_STYLE_CHANGE with the new style id', async () => {
+      const { eventBus, handlerFor } = makeSetup()
+      await handlerFor(events.MAP_SET_STYLE)({ url: 'https://new.tiles.com/{z}/{x}/{y}', id: 'newStyle' })
+      expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_STYLE_CHANGE, { mapStyleId: 'newStyle' })
+    })
 
-  it('sets tile image src via createObjectURL on success', async () => {
-    const fn = getTileLoadFn(() => null)
-    fn(mockTile, url)
-    await flushPromises()
-    expect(mockImg.src).toBe('blob:test')
+    it('remove() unsubscribes all handlers', () => {
+      const { eventBus, handles, handlerFor } = makeSetup()
+      handles.remove()
+      expect(eventBus.off).toHaveBeenCalledWith(events.MAP_SET_STYLE, handlerFor(events.MAP_SET_STYLE))
+      expect(eventBus.off).toHaveBeenCalledWith(events.MAP_SET_PIXEL_RATIO, handlerFor(events.MAP_SET_PIXEL_RATIO))
+      expect(eventBus.off).toHaveBeenCalledWith(events.MAP_SIZE_CHANGE, handlerFor(events.MAP_SIZE_CHANGE))
+    })
   })
 
-  it('sets tile state to ERROR on fetch failure', async () => {
-    global.fetch = jest.fn().mockRejectedValue(new Error('network error'))
-    const fn = getTileLoadFn(() => null)
-    fn(mockTile, url)
-    await flushPromises()
-    expect(mockTile.setState).toHaveBeenCalledWith('error')
-  })
-})
+  describe('vector', () => {
+    function makeSetup () {
+      jest.clearAllMocks()
+      const setAt = jest.fn()
+      const map = { getLayers: jest.fn(() => ({ setAt })), setPixelRatio: jest.fn() }
+      const eventBus = { on: jest.fn(), off: jest.fn(), emit: jest.fn() }
+      const mapProvider = makeProvider()
+      const handles = attachAppEvents({ mapProvider, layer: {}, layerType: 'vector', transformRequest: null, events, eventBus, map })
+      const handlerFor = (event) => eventBus.on.mock.calls.find(c => c[0] === event)[1]
+      return { map, setAt, eventBus, handles, handlerFor, mapProvider }
+    }
+
+    it('on MAP_SET_STYLE: creates a vector tile layer and places it at index 0', async () => {
+      const { setAt, handlerFor } = makeSetup()
+      const mapStyle = { url: 'https://example.com/styles', id: 'newVts' }
+      await handlerFor(events.MAP_SET_STYLE)(mapStyle)
+      expect(createVectorTileLayer).toHaveBeenCalledWith(mapStyle.url, null, mapStyle)
+      expect(setAt).toHaveBeenCalledWith(0, mockVectorTileLayerInstance)
+    })
 
-describe('attachAppEvents', () => {
-  const events = {
-    MAP_SET_STYLE: 'map:setstyle',
-    MAP_STYLE_CHANGE: 'map:stylechange'
-  }
-
-  function makeSetup () {
-    jest.clearAllMocks()
-    const tileLayer = { setSource: jest.fn() }
-    const eventBus = { on: jest.fn(), off: jest.fn(), emit: jest.fn() }
-    const handles = attachAppEvents({ tileLayer, transformRequest: null, events, eventBus })
-    const styleHandler = eventBus.on.mock.calls[0][1]
-    return { tileLayer, eventBus, handles, styleHandler }
-  }
-
-  it('subscribes to MAP_SET_STYLE on the event bus', () => {
-    const { eventBus } = makeSetup()
-    expect(eventBus.on).toHaveBeenCalledWith(events.MAP_SET_STYLE, expect.any(Function))
+    it('on MAP_SET_STYLE: emits MAP_STYLE_CHANGE with the new style id', async () => {
+      const { eventBus, handlerFor } = makeSetup()
+      await handlerFor(events.MAP_SET_STYLE)({ url: 'https://example.com/styles', id: 'newVts' })
+      expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_STYLE_CHANGE, { mapStyleId: 'newVts' })
+    })
   })
 
-  it('on MAP_SET_STYLE: updates tile layer source and emits MAP_STYLE_CHANGE', () => {
-    const { tileLayer, eventBus, styleHandler } = makeSetup()
-    styleHandler({ url: 'https://new.tiles.com/{z}/{x}/{y}', id: 'newStyle' })
-    expect(tileLayer.setSource).toHaveBeenCalledWith(mockSourceInstance)
-    expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_STYLE_CHANGE, { mapStyleId: 'newStyle' })
-  })
+  describe('pixel ratio and map size', () => {
+    function makeSetup () {
+      jest.clearAllMocks()
+      const map = makeMap()
+      const eventBus = { on: jest.fn(), off: jest.fn(), emit: jest.fn() }
+      const mapProvider = makeProvider()
+      attachAppEvents({ mapProvider, layer: {}, layerType: 'vector', transformRequest: null, events, eventBus, map })
+      const handlerFor = (event) => eventBus.on.mock.calls.find(c => c[0] === event)[1]
+      return { map, mapProvider, handlerFor }
+    }
+
+    it('on MAP_SET_PIXEL_RATIO: calls map.setPixelRatio with the new ratio', () => {
+      const { map, handlerFor } = makeSetup()
+      handlerFor(events.MAP_SET_PIXEL_RATIO)(3)
+      expect(map.setPixelRatio).toHaveBeenCalledWith(3)
+    })
 
-  it('remove() unsubscribes from MAP_SET_STYLE', () => {
-    const { eventBus, handles, styleHandler } = makeSetup()
-    handles.remove()
-    expect(eventBus.off).toHaveBeenCalledWith(events.MAP_SET_STYLE, styleHandler)
+    it('on MAP_SIZE_CHANGE: updates mapProvider.mapSize', () => {
+      const { mapProvider, handlerFor } = makeSetup()
+      handlerFor(events.MAP_SIZE_CHANGE)({ mapSize: 'large' })
+      expect(mapProvider.mapSize).toBe('large')
+    })
   })
 })

package/providers/beta/openlayers/src/mapEvents.js

@@ -82,8 +82,6 @@ export function attachMapEvents ({
   const debouncers = []
 
   const view = map.getView()
-  const viewMinZoom = view.getMinZoom()
-  const viewMaxZoom = view.getMaxZoom()
 
   const getMapState = () => {
     if (destroyed) {
@@ -95,8 +93,8 @@ export function attachMapEvents ({
       bounds: getBounds(),
       resolution: getResolution(),
       zoom,
-      isAtMaxZoom: zoom + ZOOM_TOLERANCE >= viewMaxZoom,
-      isAtMinZoom: zoom - ZOOM_TOLERANCE <= viewMinZoom
+      isAtMaxZoom: zoom + ZOOM_TOLERANCE >= view.getMaxZoom(),
+      isAtMinZoom: zoom - ZOOM_TOLERANCE <= view.getMinZoom()
     }
   }
 

package/providers/beta/openlayers/src/mapEvents.test.js

@@ -51,6 +51,7 @@ function setup () {
   map.getView = jest.fn(() => view)
 
   const source = makeTarget()
+  source.changed = jest.fn()
   const eventBus = { emit: jest.fn() }
 
   const getZoom = jest.fn(() => 7)
@@ -172,6 +173,32 @@ describe('attachMapEvents — render and data events', () => {
   })
 })
 
+describe('attachMapEvents — dynamic zoom bounds', () => {
+  it('isAtMaxZoom is updated in emitted event when view max zoom changes', () => {
+    const { view, eventBus } = setup()
+    view.trigger('change')
+    mockDebounceFns[0].fn()
+    expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_MOVE_END, expect.objectContaining({ isAtMaxZoom: false }))
+
+    eventBus.emit.mockClear()
+    view.getMaxZoom.mockReturnValue(7)
+    mockDebounceFns[0].fn()
+    expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_MOVE_END, expect.objectContaining({ isAtMaxZoom: true }))
+  })
+
+  it('isAtMinZoom is updated in emitted event when view min zoom changes', () => {
+    const { view, eventBus } = setup()
+    view.trigger('change')
+    mockDebounceFns[0].fn()
+    expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_MOVE_END, expect.objectContaining({ isAtMinZoom: false }))
+
+    eventBus.emit.mockClear()
+    view.getMinZoom.mockReturnValue(7)
+    mockDebounceFns[0].fn()
+    expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_MOVE_END, expect.objectContaining({ isAtMinZoom: true }))
+  })
+})
+
 describe('attachMapEvents — remove', () => {
   it('calls cancel on all debouncers', () => {
     const { handles } = setup()

package/providers/beta/openlayers/src/openlayersProvider.js

@@ -7,7 +7,7 @@ import { register } from 'ol/proj/proj4.js'
 import { supportedShortcuts, DEFAULTS } from './defaults.js'
 import { getViewResolutionConfig, ZOOM_ALIGNMENT } from './utils/zoom.js'
 import { attachMapEvents } from './mapEvents.js'
-import { attachAppEvents, createTileSource } from './appEvents.js'
+import { attachAppEvents, createTileSource, createVectorTileLayer, createOGCVectorTileLayer } from './appEvents.js'
 import { getAreaDimensions, getCardinalMove, getExtentFromGeoJSON, getPaddedExtent, isGeometryObscured } from './utils/spatial.js'
 
 const CRS = 'EPSG:27700'
@@ -31,19 +31,30 @@ export default class OpenLayersProvider {
     this.eventBus = eventBus
     this.capabilities = {
       supportedShortcuts,
-      supportsMapSizes: false
+      supportsMapSizes: true
     }
     Object.assign(this, mapProviderConfig)
   }
 
   async initMap (config) {
-    const { container, padding, mapStyle, mapSize, center, zoom, bounds, minZoom, maxZoom, transformRequest } = config
+    const { container, padding, mapStyle, mapSize, center, zoom, bounds, minZoom, maxZoom, transformRequest, pixelRatio } = config
     this.mapStyleId = mapStyle?.id
     this.mapSize = mapSize
     const { events, eventBus } = this
 
-    const source = createTileSource(mapStyle.url, transformRequest)
-    const tileLayer = new TileLayer({ source })
+    let tileLayer, source
+    if (mapStyle.type === 'raster') {
+      source = createTileSource(mapStyle.url, transformRequest)
+      tileLayer = new TileLayer({ source })
+    } else if (mapStyle.type === 'ogc-vt') {
+      const vectorTile = await createOGCVectorTileLayer(mapStyle.url, transformRequest, mapStyle)
+      tileLayer = vectorTile.layer
+      source = vectorTile.source
+    } else {
+      const vectorTile = await createVectorTileLayer(mapStyle.url, transformRequest, mapStyle)
+      tileLayer = vectorTile.layer
+      source = vectorTile.source
+    }
 
     const viewResolutions = getViewResolutionConfig(this.zoomAlignment ?? ZOOM_ALIGNMENT.UK)
 
@@ -63,7 +74,8 @@ export default class OpenLayersProvider {
       layers: [tileLayer],
       view,
       controls: [],
-      interactions: defaultInteractions({ doubleClickZoom: false })
+      interactions: defaultInteractions({ doubleClickZoom: false }),
+      pixelRatio
     })
 
     if (bounds) {
@@ -84,10 +96,13 @@ export default class OpenLayersProvider {
     })
 
     this.appEventHandles = attachAppEvents({
-      tileLayer,
+      mapProvider: this,
+      layer: tileLayer,
+      layerType: mapStyle.type ?? 'vector',
       transformRequest,
       events,
-      eventBus
+      eventBus,
+      map
     }) || []
 
     this.map = map

package/providers/beta/openlayers/src/openlayersProvider.test.js

@@ -1,7 +1,7 @@
 // Mock-prefixed variables are allowed in jest.mock factories by babel-plugin-jest-hoist
 import OpenLayersProvider from './openlayersProvider.js'
 import { attachMapEvents } from './mapEvents.js'
-import { attachAppEvents, createTileSource } from './appEvents.js'
+import { attachAppEvents, createTileSource, createVectorTileLayer } from './appEvents.js'
 import { getExtentFromGeoJSON, isGeometryObscured } from './utils/spatial.js'
 
 const mockAnimate = jest.fn()
@@ -36,6 +36,7 @@ const mockMapInstance = {
 
 const mockSource = {}
 const mockTileLayer = { setSource: jest.fn() }
+const mockVectorTileLayer = {}
 const mockMapEventHandlesRemove = jest.fn()
 const mockAppEventHandlesRemove = jest.fn()
 
@@ -56,6 +57,7 @@ jest.mock('./mapEvents.js', () => ({
 jest.mock('./appEvents.js', () => ({
   __esModule: true,
   createTileSource: jest.fn(() => mockSource),
+  createVectorTileLayer: jest.fn(async () => ({ layer: mockVectorTileLayer, source: mockSource })),
   attachAppEvents: jest.fn(() => ({ remove: mockAppEventHandlesRemove }))
 }))
 jest.mock('./utils/spatial.js', () => ({
@@ -106,9 +108,9 @@ describe('OpenLayersProvider', () => {
       expect(provider.eventBus).toBe(eventBus)
     })
 
-    it('sets capabilities with supportsMapSizes false and supportedShortcuts array', () => {
+    it('sets capabilities with supportsMapSizes true and supportedShortcuts array', () => {
       const { provider } = makeProvider()
-      expect(provider.capabilities.supportsMapSizes).toBe(false)
+      expect(provider.capabilities.supportsMapSizes).toBe(true)
       expect(Array.isArray(provider.capabilities.supportedShortcuts)).toBe(true)
     })
 
@@ -120,10 +122,10 @@ describe('OpenLayersProvider', () => {
   })
 
   describe('initMap', () => {
-    it('creates tile source, OL objects, and emits MAP_READY', async () => {
+    it('creates vector tile layer, OL objects, and emits MAP_READY by default', async () => {
       const { provider, eventBus } = makeProvider()
       await provider.initMap(defaultInitConfig)
-      expect(createTileSource).toHaveBeenCalledWith(defaultInitConfig.mapStyle.url, null)
+      expect(createVectorTileLayer).toHaveBeenCalledWith(defaultInitConfig.mapStyle.url, null, defaultInitConfig.mapStyle)
       expect(attachMapEvents).toHaveBeenCalled()
       expect(attachAppEvents).toHaveBeenCalled()
       expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_READY, expect.objectContaining({
@@ -148,6 +150,59 @@ describe('OpenLayersProvider', () => {
       await provider.initMap(defaultInitConfig)
       expect(mockMapOnce).not.toHaveBeenCalled()
     })
+
+    it('calls createVectorTileLayer and skips createTileSource when mapStyle has no type', async () => {
+      const { provider } = makeProvider()
+      await provider.initMap(defaultInitConfig)
+      expect(createVectorTileLayer).toHaveBeenCalled()
+      expect(createTileSource).not.toHaveBeenCalled()
+    })
+
+    it('calls createTileSource and skips createVectorTileLayer when mapStyle.type is "raster"', async () => {
+      const { provider, eventBus } = makeProvider()
+      const rasterConfig = {
+        ...defaultInitConfig,
+        mapStyle: { id: 'myStyle', url: 'https://tiles.example.com/{z}/{x}/{y}', type: 'raster' }
+      }
+      await provider.initMap(rasterConfig)
+      expect(createTileSource).toHaveBeenCalledWith('https://tiles.example.com/{z}/{x}/{y}', null)
+      expect(createVectorTileLayer).not.toHaveBeenCalled()
+      expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_READY, expect.objectContaining({ mapStyleId: 'myStyle' }))
+    })
+
+    it('passes layerType "vector" and map to attachAppEvents by default', async () => {
+      const { provider } = makeProvider()
+      await provider.initMap(defaultInitConfig)
+      expect(attachAppEvents).toHaveBeenCalledWith(expect.objectContaining({
+        layerType: 'vector',
+        map: mockMapInstance
+      }))
+    })
+
+    it('passes layerType "raster" to attachAppEvents when mapStyle.type is "raster"', async () => {
+      const { provider } = makeProvider()
+      const rasterConfig = {
+        ...defaultInitConfig,
+        mapStyle: { id: 'myStyle', url: 'https://tiles.example.com/{z}/{x}/{y}', type: 'raster' }
+      }
+      await provider.initMap(rasterConfig)
+      expect(attachAppEvents).toHaveBeenCalledWith(expect.objectContaining({
+        layerType: 'raster'
+      }))
+    })
+
+    it('passes pixelRatio to OlMap constructor', async () => {
+      const OlMap = require('ol/Map.js').default
+      const { provider } = makeProvider()
+      await provider.initMap({ ...defaultInitConfig, pixelRatio: 2 })
+      expect(OlMap).toHaveBeenCalledWith(expect.objectContaining({ pixelRatio: 2 }))
+    })
+
+    it('passes mapProvider to attachAppEvents', async () => {
+      const { provider } = makeProvider()
+      await provider.initMap(defaultInitConfig)
+      expect(attachAppEvents).toHaveBeenCalledWith(expect.objectContaining({ mapProvider: provider }))
+    })
   })
 
   describe('destroyMap', () => {

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

@@ -99,10 +99,19 @@ const getPaddedExtent = (map) => {
 
 /**
  * Returns true if the geometry's screen bounding box overlaps the given panel rectangle.
- * GeoJSON coords are expected in WGS84; they are transformed to EPSG:27700 for screen projection.
+ * getPixelFromCoordinate returns layout-space pixels (unscaled canvas), so we convert them
+ * to screen space using the ratio between the viewport's visual size and the canvas size.
+ * This accounts for the CSS scale transform applied on medium/large mapSize.
  */
 const isGeometryObscured = (geojson, panelRect, map) => {
   const containerRect = map.getTargetElement().getBoundingClientRect()
+  if (!containerRect.width || !containerRect.height) {
+    return false
+  }
+  const viewportRect = map.getViewport().getBoundingClientRect()
+  const scaleX = viewportRect.width / containerRect.width
+  const scaleY = viewportRect.height / containerRect.height
+
   const [west, south, east, north] = getBboxFromGeoJSON(geojson)
 
   const corners = [[west, south], [west, north], [east, south], [east, north]].map(coord => {
@@ -113,21 +122,16 @@ const isGeometryObscured = (geojson, panelRect, map) => {
     return false
   }
 
-  const screenMinX = Math.min(...corners.map(c => c[0]))
-  const screenMaxX = Math.max(...corners.map(c => c[0]))
-  const screenMinY = Math.min(...corners.map(c => c[1]))
-  const screenMaxY = Math.max(...corners.map(c => c[1]))
-
-  const panelLeft = panelRect.left - containerRect.left
-  const panelTop = panelRect.top - containerRect.top
-  const panelRight = panelRect.right - containerRect.left
-  const panelBottom = panelRect.bottom - containerRect.top
+  const screenMinX = containerRect.left + Math.min(...corners.map(c => c[0])) * scaleX
+  const screenMaxX = containerRect.left + Math.max(...corners.map(c => c[0])) * scaleX
+  const screenMinY = containerRect.top + Math.min(...corners.map(c => c[1])) * scaleY
+  const screenMaxY = containerRect.top + Math.max(...corners.map(c => c[1])) * scaleY
 
   return (
-    screenMinX < panelRight &&
-    screenMaxX > panelLeft &&
-    screenMinY < panelBottom &&
-    screenMaxY > panelTop
+    screenMinX < panelRect.right &&
+    screenMaxX > panelRect.left &&
+    screenMinY < panelRect.bottom &&
+    screenMaxY > panelRect.top
   )
 }