@defra/interactive-map 0.0.26-alpha → 0.0.27-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,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})());
+!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})());

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

@@ -1,20 +1,16 @@
-import { createTileSource, createVectorTileLayer, createOGCVectorTileLayer } from './utils/tileLayers.js'
+import { createTileSource, createVectorTileLayer, createOGCVectorTileLayer, createMapStyleLayer } from './utils/tileLayers.js'
 
-export { createTileSource, createVectorTileLayer, createOGCVectorTileLayer }
+export { createTileSource, createVectorTileLayer, createOGCVectorTileLayer, createMapStyleLayer }
 
-export function attachAppEvents ({ mapProvider, layer, layerType, transformRequest, events, eventBus, map }) {
+export function attachAppEvents ({ mapProvider, transformRequest, events, eventBus, map, onBaseSourceChange }) {
   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)
-    }
+    const { layer, source } = await createMapStyleLayer(mapStyle, transformRequest)
+    map.getLayers().setAt(0, layer)
+    onBaseSourceChange(source)
     eventBus.emit(events.MAP_STYLE_CHANGE, { mapStyleId: mapStyle.id })
+    // MAP_DATA_CHANGE is driven by the original source's tileloadend and won't fire
+    // for the new source, so re-apply highlights directly on the new layer.
+    mapProvider.reapplyHighlights()
   }
 
   const handleSetPixelRatio = (pixelRatio) => {

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

@@ -1,14 +1,13 @@
 import { attachAppEvents } from './appEvents.js'
 
-import { createTileSource, createVectorTileLayer } from './utils/tileLayers.js'
+import { createMapStyleLayer } from './utils/tileLayers.js'
 
+const mockLayerInstance = {}
 const mockSourceInstance = {}
-const mockVectorTileLayerInstance = {}
 
 jest.mock('./utils/tileLayers.js', () => ({
   __esModule: true,
-  createTileSource: jest.fn(() => mockSourceInstance),
-  createVectorTileLayer: jest.fn(async () => ({ layer: mockVectorTileLayerInstance, source: {} }))
+  createMapStyleLayer: jest.fn(async () => ({ layer: mockLayerInstance, source: mockSourceInstance }))
 }))
 
 const events = {
@@ -23,19 +22,21 @@ function makeMap () {
 }
 
 function makeProvider () {
-  return { mapSize: 'small' }
+  return { mapSize: 'small', reapplyHighlights: jest.fn() }
 }
 
 describe('attachAppEvents', () => {
   describe('raster', () => {
     function makeSetup () {
       jest.clearAllMocks()
-      const layer = { setSource: jest.fn() }
+      const setAt = jest.fn()
+      const map = { getLayers: jest.fn(() => ({ setAt })), setPixelRatio: jest.fn() }
+      const onBaseSourceChange = 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 handles = attachAppEvents({ mapProvider, transformRequest: null, events, eventBus, map, onBaseSourceChange })
       const handlerFor = (event) => eventBus.on.mock.calls.find(c => c[0] === event)[1]
-      return { layer, eventBus, handles, handlerFor, mapProvider }
+      return { map, setAt, onBaseSourceChange, eventBus, handles, handlerFor, mapProvider }
     }
 
     it('subscribes to MAP_SET_STYLE on the event bus', () => {
@@ -43,11 +44,18 @@ describe('attachAppEvents', () => {
       expect(eventBus.on).toHaveBeenCalledWith(events.MAP_SET_STYLE, expect.any(Function))
     })
 
-    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('on MAP_SET_STYLE: creates a map style layer and places it at index 0', async () => {
+      const { setAt, handlerFor } = makeSetup()
+      const mapStyle = { url: 'https://new.tiles.com/{z}/{x}/{y}', id: 'newStyle', type: 'raster' }
+      await handlerFor(events.MAP_SET_STYLE)(mapStyle)
+      expect(createMapStyleLayer).toHaveBeenCalledWith(mapStyle, null)
+      expect(setAt).toHaveBeenCalledWith(0, mockLayerInstance)
+    })
+
+    it('on MAP_SET_STYLE: updates the base source for map events', async () => {
+      const { onBaseSourceChange, handlerFor } = makeSetup()
+      await handlerFor(events.MAP_SET_STYLE)({ url: 'https://new.tiles.com/{z}/{x}/{y}', id: 'newStyle', type: 'raster' })
+      expect(onBaseSourceChange).toHaveBeenCalledWith(mockSourceInstance)
     })
 
     it('on MAP_SET_STYLE: emits MAP_STYLE_CHANGE with the new style id', async () => {
@@ -72,7 +80,7 @@ describe('attachAppEvents', () => {
       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 handles = attachAppEvents({ mapProvider, transformRequest: null, events, eventBus, map, onBaseSourceChange: jest.fn() })
       const handlerFor = (event) => eventBus.on.mock.calls.find(c => c[0] === event)[1]
       return { map, setAt, eventBus, handles, handlerFor, mapProvider }
     }
@@ -81,8 +89,8 @@ describe('attachAppEvents', () => {
       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)
+      expect(createMapStyleLayer).toHaveBeenCalledWith(mapStyle, null)
+      expect(setAt).toHaveBeenCalledWith(0, mockLayerInstance)
     })
 
     it('on MAP_SET_STYLE: emits MAP_STYLE_CHANGE with the new style id', async () => {
@@ -98,7 +106,7 @@ describe('attachAppEvents', () => {
       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 })
+      attachAppEvents({ mapProvider, transformRequest: null, events, eventBus, map, onBaseSourceChange: jest.fn() })
       const handlerFor = (event) => eventBus.on.mock.calls.find(c => c[0] === event)[1]
       return { map, mapProvider, handlerFor }
     }

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

@@ -6,17 +6,6 @@ const DEBOUNCE_IDLE_TIME = 500
 const MOVE_THROTTLE_TIME = 10
 const DRAG_TOLERANCE = 6
 
-function attachLoadEvents ({ source, map, emit, eventBus, events, on }) {
-  let loadedEmitted = false
-  on(source, 'tileloadend', () => {
-    if (!loadedEmitted) {
-      loadedEmitted = true
-      eventBus.emit(events.MAP_LOADED)
-    }
-  })
-  map.once('rendercomplete', () => emit(events.MAP_FIRST_IDLE))
-}
-
 function attachMoveEvents ({ map, view, emit, eventBus, events, on, debouncers }) {
   let moving = false
 
@@ -79,6 +68,7 @@ export function attachMapEvents ({
 }) {
   let destroyed = false
   const listeners = []
+  let sourceListeners = []
   const debouncers = []
 
   const view = map.getView()
@@ -110,21 +100,47 @@ export function attachMapEvents ({
     listeners.push([target, type, handler])
   }
 
-  attachLoadEvents({ source, map, emit, eventBus, events, on })
-  attachMoveEvents({ map, view: map.getView(), emit, eventBus, events, on, debouncers })
-  attachClickEvents({ map, eventBus, events, on })
+  const onSource = (target, type, handler) => {
+    target.on(type, handler)
+    sourceListeners.push([target, type, handler])
+  }
 
-  on(map, 'postrender', () => eventBus.emit(events.MAP_RENDER))
+  let loadedEmitted = false
+  const emitLoaded = () => {
+    if (!loadedEmitted) {
+      loadedEmitted = true
+      eventBus.emit(events.MAP_LOADED)
+    }
+  }
 
   const emitDataChange = debounce(() => emit(events.MAP_DATA_CHANGE), DEBOUNCE_IDLE_TIME)
   debouncers.push(emitDataChange)
-  on(source, 'tileloadend', emitDataChange)
+
+  const setSource = (newSource) => {
+    if (destroyed) {
+      return
+    }
+
+    sourceListeners.forEach(([target, type, handler]) => target.un(type, handler))
+    sourceListeners = []
+    onSource(newSource, 'tileloadend', emitLoaded)
+    onSource(newSource, 'tileloadend', emitDataChange)
+  }
+
+  attachMoveEvents({ map, view: map.getView(), emit, eventBus, events, on, debouncers })
+  setSource(source)
+  map.once('rendercomplete', () => emit(events.MAP_FIRST_IDLE))
+  attachClickEvents({ map, eventBus, events, on })
+
+  on(map, 'postrender', () => eventBus.emit(events.MAP_RENDER))
 
   return {
+    setSource,
     remove () {
       destroyed = true
       debouncers.forEach(d => d.cancel())
       listeners.forEach(([target, type, handler]) => target.un(type, handler))
+      sourceListeners.forEach(([target, type, handler]) => target.un(type, handler))
     }
   }
 }

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

@@ -35,7 +35,9 @@ function makeTarget () {
   return {
     on: jest.fn((type, handler) => { (handlers[type] = handlers[type] || []).push(handler) }),
     once: jest.fn((type, handler) => { (handlers[type] = handlers[type] || []).push(handler) }),
-    un: jest.fn(),
+    un: jest.fn((type, handler) => {
+      handlers[type] = (handlers[type] || []).filter(h => h !== handler)
+    }),
     trigger: (type, event = {}) => (handlers[type] || []).forEach(h => h(event))
   }
 }
@@ -104,14 +106,14 @@ describe('attachMapEvents — move events', () => {
   it('emits MAP_MOVE_END (with state) when debounced callback fires', () => {
     const { view, eventBus } = setup()
     view.trigger('change')
-    mockDebounceFns[0].fn() // emitMoveEnd's inner callback
+    mockDebounceFns[1].fn() // emitMoveEnd's inner callback
     expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_MOVE_END, expect.any(Object))
   })
 
   it('resets moving flag after MAP_MOVE_END so MAP_MOVE_START can fire again', () => {
     const { view, eventBus } = setup()
     view.trigger('change')
-    mockDebounceFns[0].fn() // resets moving = false
+    mockDebounceFns[1].fn() // resets moving = false
     eventBus.emit.mockClear()
     view.trigger('change')
     expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_MOVE_START)
@@ -168,33 +170,46 @@ describe('attachMapEvents — render and data events', () => {
   it('emits MAP_DATA_CHANGE (with state) when debounced tileloadend callback fires', () => {
     const { source, eventBus } = setup()
     source.trigger('tileloadend')
-    mockDebounceFns[1].fn() // emitDataChange's inner callback
+    mockDebounceFns[0].fn() // emitDataChange's inner callback
     expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_DATA_CHANGE, expect.any(Object))
   })
+
+  it('moves source listeners when source changes', () => {
+    const { source, handles, eventBus } = setup()
+    const newSource = makeTarget()
+
+    handles.setSource(newSource)
+
+    source.trigger('tileloadend')
+    expect(eventBus.emit).not.toHaveBeenCalledWith(events.MAP_LOADED)
+
+    newSource.trigger('tileloadend')
+    expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_LOADED)
+  })
 })
 
 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()
+    mockDebounceFns[1].fn()
     expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_MOVE_END, expect.objectContaining({ isAtMaxZoom: false }))
 
     eventBus.emit.mockClear()
     view.getMaxZoom.mockReturnValue(7)
-    mockDebounceFns[0].fn()
+    mockDebounceFns[1].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()
+    mockDebounceFns[1].fn()
     expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_MOVE_END, expect.objectContaining({ isAtMinZoom: false }))
 
     eventBus.emit.mockClear()
     view.getMinZoom.mockReturnValue(7)
-    mockDebounceFns[0].fn()
+    mockDebounceFns[1].fn()
     expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_MOVE_END, expect.objectContaining({ isAtMinZoom: true }))
   })
 })
@@ -203,8 +218,8 @@ describe('attachMapEvents — remove', () => {
   it('calls cancel on all debouncers', () => {
     const { handles } = setup()
     handles.remove()
-    expect(mockDebounceFns[0].wrapper.cancel).toHaveBeenCalled()
     expect(mockDebounceFns[1].wrapper.cancel).toHaveBeenCalled()
+    expect(mockDebounceFns[0].wrapper.cancel).toHaveBeenCalled()
   })
 
   it('calls un on all registered event targets', () => {
@@ -215,10 +230,28 @@ describe('attachMapEvents — remove', () => {
     expect(source.un).toHaveBeenCalled()
   })
 
+  it('unbinds source listeners when source changes', () => {
+    const { source, handles } = setup()
+    handles.setSource(makeTarget())
+    expect(source.un).toHaveBeenCalledWith('tileloadend', expect.any(Function))
+  })
+
+  it('does not bind a new source after remove', () => {
+    const { eventBus, handles } = setup()
+    const newSource = makeTarget()
+
+    handles.remove()
+    handles.setSource(newSource)
+    newSource.trigger('tileloadend')
+
+    expect(newSource.on).not.toHaveBeenCalled()
+    expect(eventBus.emit).not.toHaveBeenCalledWith(events.MAP_LOADED)
+  })
+
   it('prevents state-bearing events from emitting after destroy', () => {
     const { eventBus, handles } = setup()
     handles.remove()
-    mockDebounceFns[0].fn() // emitMoveEnd fires after destroy → getMapState returns null
+    mockDebounceFns[1].fn() // emitMoveEnd fires after destroy → getMapState returns null
     expect(eventBus.emit).not.toHaveBeenCalledWith(events.MAP_MOVE_END, expect.anything())
   })
 })

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

@@ -1,18 +1,23 @@
 import OlMap from 'ol/Map.js'
 import View from 'ol/View.js'
-import TileLayer from 'ol/layer/Tile.js'
 import { defaults as defaultInteractions } from 'ol/interaction/defaults.js'
 import proj4 from 'proj4'
 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, createVectorTileLayer, createOGCVectorTileLayer } from './appEvents.js'
+import { attachAppEvents, createMapStyleLayer } from './appEvents.js'
 import { getAreaDimensions, getCardinalMove, getExtentFromGeoJSON, getPaddedExtent, isGeometryObscured } from './utils/spatial.js'
+import { updateHighlightedFeatures } from './utils/highlightFeatures.js'
+import { queryFeatures } from './utils/queryFeatures.js'
+import { collectTileFragments } from './utils/vtTileFragments.js'
+import { setupHoverCursor } from './utils/hoverCursor.js'
+import { applyOpenLayersFixes } from './utils/openLayersFixes.js'
+
+applyOpenLayersFixes()
 
 const CRS = 'EPSG:27700'
 
-// OL view padding is [top, right, bottom, left]; app passes { top, right, bottom, left }
 const toPaddingArray = (padding) => {
   if (!padding) {
     return undefined
@@ -42,19 +47,7 @@ export default class OpenLayersProvider {
     this.mapSize = mapSize
     const { events, eventBus } = this
 
-    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 { layer: tileLayer, source } = await createMapStyleLayer(mapStyle, transformRequest)
 
     const viewResolutions = getViewResolutionConfig(this.zoomAlignment ?? ZOOM_ALIGNMENT.UK)
 
@@ -97,18 +90,15 @@ export default class OpenLayersProvider {
 
     this.appEventHandles = attachAppEvents({
       mapProvider: this,
-      layer: tileLayer,
-      layerType: mapStyle.type ?? 'vector',
       transformRequest,
       events,
       eventBus,
-      map
+      map,
+      onBaseSourceChange: this.mapEventHandles.setSource
     }) || []
 
     this.map = map
     this.view = view
-    this.tileLayer = tileLayer
-    this.source = source
 
     // MAP_READY is synchronous — OL map is immediately interactive after construction
     eventBus.emit(events.MAP_READY, {
@@ -127,13 +117,15 @@ export default class OpenLayersProvider {
     this.appEventHandles = null
 
     if (this.map) {
+      if (this._onHoverMove) {
+        this.map.un('pointermove', this._onHoverMove)
+        this._onHoverMove = null
+      }
       this.map.setTarget(null)
       this.map = null
     }
 
     this.view = null
-    this.tileLayer = null
-    this.source = null
   }
 
   // ==========================
@@ -203,15 +195,42 @@ export default class OpenLayersProvider {
     return extent.map(n => Math.round(n * 100) / 100)
   }
 
-  getFeaturesAtPoint (_point, _options) {
-    // Raster tiles have no queryable features
-    return []
+  getFeaturesAtPoint (point, options) {
+    return queryFeatures(this.map, point, options)
+  }
+
+  getFeatureGeometry (layerId, featureId, idProperty) {
+    const fragments = collectTileFragments(this.map, layerId, featureId, idProperty)
+    if (fragments.length === 0) { return null }
+    if (fragments.length === 1) { return fragments[0] }
+    const coords = fragments.flatMap(g => g.type === 'MultiPolygon' ? g.coordinates : [g.coordinates])
+    return { type: 'MultiPolygon', coordinates: coords }
+  }
+
+  setHoverCursor (layerIds) {
+    if (!this.map) {
+      return
+    }
+    this._onHoverMove = setupHoverCursor(this.map, layerIds, this._onHoverMove)
   }
 
   getVisibleFeatures (_layerIds) {
     return []
   }
 
+  updateHighlightedFeatures (selectedFeatures, activeFeatures, stylesMap) {
+    this._lastHighlightArgs = { selectedFeatures, activeFeatures, stylesMap }
+    return updateHighlightedFeatures(this.map, selectedFeatures, activeFeatures, stylesMap)
+  }
+
+  reapplyHighlights () {
+    if (!this._lastHighlightArgs) {
+      return
+    }
+    const { selectedFeatures, activeFeatures, stylesMap } = this._lastHighlightArgs
+    updateHighlightedFeatures(this.map, selectedFeatures, activeFeatures, stylesMap)
+  }
+
   // ==========================
   // Spatial helpers
   // ==========================

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, createVectorTileLayer } from './appEvents.js'
+import { attachAppEvents, createMapStyleLayer } from './appEvents.js'
 import { getExtentFromGeoJSON, isGeometryObscured } from './utils/spatial.js'
 
 const mockAnimate = jest.fn()
@@ -35,14 +35,13 @@ const mockMapInstance = {
 }
 
 const mockSource = {}
-const mockTileLayer = { setSource: jest.fn() }
 const mockVectorTileLayer = {}
 const mockMapEventHandlesRemove = jest.fn()
+const mockSetSource = jest.fn()
 const mockAppEventHandlesRemove = jest.fn()
 
 jest.mock('ol/Map.js', () => ({ __esModule: true, default: jest.fn(() => mockMapInstance) }))
 jest.mock('ol/View.js', () => ({ __esModule: true, default: jest.fn(() => mockViewInstance) }))
-jest.mock('ol/layer/Tile.js', () => ({ __esModule: true, default: jest.fn(() => mockTileLayer) }))
 jest.mock('ol/interaction/defaults.js', () => ({ __esModule: true, defaults: jest.fn(() => []) }))
 jest.mock('proj4', () => {
   const fn = jest.fn()
@@ -52,12 +51,11 @@ jest.mock('proj4', () => {
 jest.mock('ol/proj/proj4.js', () => ({ __esModule: true, register: jest.fn() }))
 jest.mock('./mapEvents.js', () => ({
   __esModule: true,
-  attachMapEvents: jest.fn(() => ({ remove: mockMapEventHandlesRemove }))
+  attachMapEvents: jest.fn(() => ({ remove: mockMapEventHandlesRemove, setSource: mockSetSource }))
 }))
 jest.mock('./appEvents.js', () => ({
   __esModule: true,
-  createTileSource: jest.fn(() => mockSource),
-  createVectorTileLayer: jest.fn(async () => ({ layer: mockVectorTileLayer, source: mockSource })),
+  createMapStyleLayer: jest.fn(async () => ({ layer: mockVectorTileLayer, source: mockSource })),
   attachAppEvents: jest.fn(() => ({ remove: mockAppEventHandlesRemove }))
 }))
 jest.mock('./utils/spatial.js', () => ({
@@ -125,7 +123,7 @@ describe('OpenLayersProvider', () => {
     it('creates vector tile layer, OL objects, and emits MAP_READY by default', async () => {
       const { provider, eventBus } = makeProvider()
       await provider.initMap(defaultInitConfig)
-      expect(createVectorTileLayer).toHaveBeenCalledWith(defaultInitConfig.mapStyle.url, null, defaultInitConfig.mapStyle)
+      expect(createMapStyleLayer).toHaveBeenCalledWith(defaultInitConfig.mapStyle, null)
       expect(attachMapEvents).toHaveBeenCalled()
       expect(attachAppEvents).toHaveBeenCalled()
       expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_READY, expect.objectContaining({
@@ -151,43 +149,29 @@ describe('OpenLayersProvider', () => {
       expect(mockMapOnce).not.toHaveBeenCalled()
     })
 
-    it('calls createVectorTileLayer and skips createTileSource when mapStyle has no type', async () => {
+    it('creates the initial layer from the map style', async () => {
       const { provider } = makeProvider()
       await provider.initMap(defaultInitConfig)
-      expect(createVectorTileLayer).toHaveBeenCalled()
-      expect(createTileSource).not.toHaveBeenCalled()
+      expect(createMapStyleLayer).toHaveBeenCalledWith(defaultInitConfig.mapStyle, null)
     })
 
-    it('calls createTileSource and skips createVectorTileLayer when mapStyle.type is "raster"', async () => {
+    it('creates the initial layer from raster map styles', 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(createMapStyleLayer).toHaveBeenCalledWith(rasterConfig.mapStyle, null)
       expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_READY, expect.objectContaining({ mapStyleId: 'myStyle' }))
     })
 
-    it('passes layerType "vector" and map to attachAppEvents by default', async () => {
+    it('passes map and source change handler to attachAppEvents', 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'
+        map: mockMapInstance,
+        onBaseSourceChange: mockSetSource
       }))
     })
 
@@ -218,8 +202,6 @@ describe('OpenLayersProvider', () => {
       expect(mockMapSetTarget).toHaveBeenCalledWith(null)
       expect(provider.map).toBeNull()
       expect(provider.view).toBeNull()
-      expect(provider.tileLayer).toBeNull()
-      expect(provider.source).toBeNull()
     })
 
     it('does not throw when called before initMap', () => {
@@ -324,10 +306,6 @@ describe('OpenLayersProvider', () => {
       expect(provider.getBounds()).toEqual([1.13, 2.46, 3.99, 4])
     })
 
-    it('getFeaturesAtPoint returns empty array', () => {
-      expect(provider.getFeaturesAtPoint()).toEqual([])
-    })
-
     it('getVisibleFeatures returns empty array', () => {
       expect(provider.getVisibleFeatures()).toEqual([])
     })