@defra/interactive-map 0.0.40-alpha → 0.0.41-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,480));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,501));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/openlayersProvider.js

@@ -2,6 +2,7 @@ import { MapProvider } from '../../../mapProvider.js'
 import OlMap from 'ol/Map.js'
 import View from 'ol/View.js'
 import { defaults as defaultInteractions } from 'ol/interaction/defaults.js'
+import { getCenter as getExtentCenter } from 'ol/extent.js'
 import proj4 from 'proj4'
 import { register } from 'ol/proj/proj4.js'
 import { supportedShortcuts, DEFAULTS } from './defaults.js'
@@ -57,9 +58,11 @@ export default class OpenLayersProvider extends MapProvider {
 
     const viewResolutions = getViewResolutionConfig(this.zoomAlignment ?? ZOOM_ALIGNMENT.UK)
 
+    // A View with no center never renders a frame, so 'rendercomplete' below (which applies
+    // `bounds`) would never fire — fall back to the bounds' own center so it can.
     const view = new View({
       projection: CRS,
-      center,
+      center: center ?? (bounds ? getExtentCenter(bounds) : undefined),
       zoom: zoom ?? viewResolutions.defaultMinZoom,
       minZoom: Math.max(minZoom ?? viewResolutions.defaultMinZoom, viewResolutions.defaultMinZoom),
       maxZoom: maxZoom ?? viewResolutions.maxZoom,

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

@@ -3,6 +3,7 @@ import OpenLayersProvider from './openlayersProvider.js'
 import { attachMapEvents } from './mapEvents.js'
 import { attachAppEvents, createMapStyleLayer } from './appEvents.js'
 import { getExtentFromGeoJSON, isGeometryObscured } from './utils/spatial.js'
+import View from 'ol/View.js'
 
 const mockAnimate = jest.fn()
 const mockGetCenter = jest.fn(() => [400000.126, 300000.455])
@@ -154,6 +155,23 @@ describe('OpenLayersProvider', () => {
       expect(mockMapOnce).not.toHaveBeenCalled()
     })
 
+    // Regression: a View with no center is never "defined" (ol/View#isDef), so the map can't
+    // render a single frame — meaning 'rendercomplete' (which is what applies bounds) never
+    // fires either, deadlocking on a permanently blank map for bounds-only config.
+    it('derives an initial center from bounds when no explicit center is given, so the map can render at all', async () => {
+      const { provider } = makeProvider()
+      const bounds = [100, 200, 300, 400]
+      await provider.initMap({ ...defaultInitConfig, center: undefined, bounds })
+      expect(View).toHaveBeenCalledWith(expect.objectContaining({ center: [200, 300] }))
+    })
+
+    it('prefers an explicit center over one derived from bounds', async () => {
+      const { provider } = makeProvider()
+      const bounds = [100, 200, 300, 400]
+      await provider.initMap({ ...defaultInitConfig, center: [400000, 300000], bounds })
+      expect(View).toHaveBeenCalledWith(expect.objectContaining({ center: [400000, 300000] }))
+    })
+
     it('creates the initial layer from the map style', async () => {
       const { provider } = makeProvider()
       await provider.initMap(defaultInitConfig)

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

@@ -6,7 +6,11 @@ import GeoJSON from 'ol/format/GeoJSON.js'
 import Style from 'ol/style/Style.js'
 import Stroke from 'ol/style/Stroke.js'
 import Fill from 'ol/style/Fill.js'
+import Icon from 'ol/style/Icon.js'
 import { collectTileFragments } from './vtTileFragments.js'
+import { getCachedSymbolImage } from './symbolImages.js'
+import { symbolRegistry } from '../../../../../src/services/symbolRegistry.js'
+import { getSymbolAnchor } from '../../../../../src/utils/symbolUtils.js'
 
 const CRS = 'EPSG:27700'
 const geoJsonFormat = new GeoJSON({ dataProjection: CRS, featureProjection: CRS })
@@ -34,6 +38,28 @@ const buildHighlightStyles = (styleEntry, isActive) => {
   return styles
 }
 
+const hasSymbolStyle = (properties) => !!(properties?.symbol || properties?.symbolSvgContent)
+
+// A drawn point renders as a real symbol icon, not Stroke/Fill, so its selected/active ring is
+// the active/selected variant of that same icon instead. Returns null (not []) for a
+// non-symbol feature so the caller falls through to buildHighlightStyles.
+const buildSymbolHighlightStyle = (properties, isActive) => {
+  if (!hasSymbolStyle(properties)) {
+    return null
+  }
+  const imageId = isActive ? properties.symbolActiveImageId : properties.symbolSelectedImageId
+  const canvas = imageId && getCachedSymbolImage(imageId)
+  if (!canvas) {
+    return null
+  }
+  const symbolDef = symbolRegistry.getSymbolDef(properties)
+  const anchor = getSymbolAnchor(properties, symbolDef)
+  // The cached canvas is rasterised at symbolPixelRatio for crispness — ol/style/Icon draws
+  // it at native size, so the inverse scale keeps the displayed size correct.
+  const scale = 1 / (properties.symbolPixelRatio || 1)
+  return [new Style({ image: new Icon({ img: canvas, anchor, scale }), zIndex: HIGHLIGHT_Z })]
+}
+
 // ---------------------------------------------------------------------------
 // VectorTileLayer: style-function wrap
 // Evaluated per feature per tile at render time — automatically covers all
@@ -127,12 +153,33 @@ const getOrCreateHighlightLayer = (map) => {
   return layer
 }
 
-const addVectorHighlights = (source, features, isActive, stylesMap) => {
-  for (const { layerId, geometry } of features ?? []) {
+// interact's selectedFeatures carry a `properties` snapshot taken at selection time, which
+// goes stale for the symbol icon path once a map style change re-resolves the point's image
+// ids — reading straight off the live feature avoids showing the previous theme's variant.
+const getLiveProperties = (map, layerId, featureId) => {
+  if (featureId == null) {
+    return undefined
+  }
+  let properties
+  map.getLayers().forEach(l => {
+    if (properties || !(l instanceof VectorLayer) || l.get(HIGHLIGHT_MARKER) || l.get('layerId') !== layerId) {
+      return
+    }
+    const feature = l.getSource()?.getFeatureById(String(featureId))
+    if (feature) {
+      properties = feature.getProperties()
+    }
+  })
+  return properties
+}
+
+const addVectorHighlights = (map, source, features, isActive, stylesMap) => {
+  for (const { layerId, featureId, geometry } of features ?? []) {
     if (!geometry) {
       continue
     }
-    const styles = buildHighlightStyles(stylesMap?.[layerId], isActive)
+    const liveProperties = getLiveProperties(map, layerId, featureId)
+    const styles = buildSymbolHighlightStyle(liveProperties, isActive) ?? buildHighlightStyles(stylesMap?.[layerId], isActive)
     if (!styles.length) {
       continue
     }
@@ -236,8 +283,8 @@ export const updateHighlightedFeatures = (map, selectedFeatures, activeFeatures,
   const vecActive = (activeFeatures ?? []).filter(f => vectorLayerIds.has(f.layerId))
 
   // VT features are handled by style-wrap; only add vector features to overlay
-  addVectorHighlights(hlSource, vecActive, true, stylesMap)
-  addVectorHighlights(hlSource, vecSelected, false, stylesMap)
+  addVectorHighlights(map, hlSource, vecActive, true, stylesMap)
+  addVectorHighlights(map, hlSource, vecSelected, false, stylesMap)
 
   // Bounds from all tile fragments of selected features
   const allGeoms = (selectedFeatures ?? []).flatMap(feat => resolveGeometries(map, feat))

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

@@ -0,0 +1,176 @@
+import VectorLayer from 'ol/layer/Vector.js'
+import VectorSource from 'ol/source/Vector.js'
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import OlFeature from 'ol/Feature.js'
+import Point from 'ol/geom/Point.js'
+import Icon from 'ol/style/Icon.js'
+import { updateHighlightedFeatures } from './highlightFeatures.js'
+import { getOrCreateSymbolImage, clearSymbolImageCache } from './symbolImages.js'
+
+const HIGHLIGHT_MARKER = '_highlight'
+
+// Mirrors the map interface this module actually calls: getLayers().forEach(...) to find/
+// enumerate real ol/layer instances, and addLayer() to register new ones. Layers passed in
+// (or added during a test) are real ol/layer/Vector or ol/layer/VectorTile instances, same as
+// the rest of this codebase's OL tests use real ol classes over mocks for anything the
+// module under test actually instantiates or type-checks (instanceof).
+const createFakeMap = (layers = []) => {
+  const list = [...layers]
+  return {
+    _layers: list,
+    getLayers: () => ({ forEach: (cb) => list.forEach(cb) }),
+    addLayer: jest.fn((l) => list.push(l))
+  }
+}
+
+const getHighlightLayer = (map) => map._layers.find(l => l.get(HIGHLIGHT_MARKER))
+
+// features: [[id, properties]] — populates the layer's real VectorSource, since the module
+// under test now reads a selected/active point's CURRENT properties straight off this live
+// feature (not off whatever the caller's selectedFeatures/activeFeatures snapshot carries) —
+// see getLiveProperties's own comment for why.
+const drawLayer = (features = []) => {
+  const source = new VectorSource()
+  features.forEach(([id, properties]) => {
+    const f = new OlFeature({ geometry: new Point([1, 2]), ...properties })
+    f.setId(id)
+    source.addFeature(f)
+  })
+  const layer = new VectorLayer({ source })
+  layer.set('layerId', 'draw')
+  return layer
+}
+
+const selEntry = (id, geometry = { type: 'Point', coordinates: [1, 2] }) => ({ layerId: 'draw', featureId: id, geometry })
+
+beforeEach(() => {
+  clearSymbolImageCache()
+  HTMLCanvasElement.prototype.getContext = jest.fn(function () {
+    this._ctx ??= { putImageData: jest.fn() }
+    return this._ctx
+  })
+})
+
+describe('updateHighlightedFeatures', () => {
+  test('returns null and does nothing when there is no map', () => {
+    expect(updateHighlightedFeatures(null, [], [], {})).toBeNull()
+  })
+
+  test('creates the highlight overlay layer once and reuses it on later calls', () => {
+    const map = createFakeMap([drawLayer()])
+    updateHighlightedFeatures(map, [], [], {})
+    expect(map.addLayer).toHaveBeenCalledTimes(1)
+    updateHighlightedFeatures(map, [], [], {})
+    expect(map.addLayer).toHaveBeenCalledTimes(1) // reused, not re-added
+  })
+
+  test('clears previous overlay features before adding the current selection', () => {
+    const map = createFakeMap([drawLayer([['f1', {}]])])
+    const stylesMap = { draw: { stroke: '#000', selectionStroke: '#000', fill: 'transparent', strokeWidth: 2, activeStrokeWidth: 2 } }
+    updateHighlightedFeatures(map, [{ ...selEntry('f1'), geometry: { type: 'LineString', coordinates: [[0, 0], [1, 1]] } }], [], stylesMap)
+    expect(getHighlightLayer(map).getSource().getFeatures()).toHaveLength(1)
+    updateHighlightedFeatures(map, [], [], stylesMap)
+    expect(getHighlightLayer(map).getSource().getFeatures()).toHaveLength(0)
+  })
+
+  test('a feature with no geometry is skipped', () => {
+    const map = createFakeMap([drawLayer()])
+    const stylesMap = { draw: { stroke: '#000', selectionStroke: '#000', fill: 'transparent', strokeWidth: 2, activeStrokeWidth: 2 } }
+    updateHighlightedFeatures(map, [{ layerId: 'draw' }], [], stylesMap)
+    expect(getHighlightLayer(map).getSource().getFeatures()).toHaveLength(0)
+  })
+
+  test('a feature whose layerId has no stylesMap entry and no symbol properties renders nothing', () => {
+    const map = createFakeMap([drawLayer([['f1', {}]])])
+    updateHighlightedFeatures(map, [{ ...selEntry('f1'), geometry: { type: 'LineString', coordinates: [[0, 0], [1, 1]] } }], [], {})
+    expect(getHighlightLayer(map).getSource().getFeatures()).toHaveLength(0)
+  })
+
+  test('plain (non-symbol) Polygon/LineString selection still styles via Stroke/Fill, unaffected by the symbol path', () => {
+    const map = createFakeMap([drawLayer([['f1', {}]])])
+    const stylesMap = { draw: { stroke: '#000', selectionStroke: '#111', fill: '#222', strokeWidth: 3, activeStrokeWidth: 5 } }
+    const feature = { ...selEntry('f1'), geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] } }
+    updateHighlightedFeatures(map, [feature], [], stylesMap)
+    const [hlFeature] = getHighlightLayer(map).getSource().getFeatures()
+    const styles = hlFeature.getStyle()
+    expect(styles.some(s => s.getFill())).toBe(true) // selected polygons get a fill
+    expect(styles.every(s => !s.getImage())).toBe(true) // no Icon involved
+  })
+
+  describe('symbol-styled points (draw)', () => {
+    const symbolProperties = (variantImageId, imageId = 'sym-normal') => ({
+      symbol: 'pin',
+      symbolImageId: imageId,
+      symbolSelectedImageId: variantImageId,
+      symbolActiveImageId: variantImageId,
+      symbolPixelRatio: 2
+    })
+
+    test('renders the selected-variant Icon for a selected symbol point, scaled down by symbolPixelRatio', () => {
+      const canvas = getOrCreateSymbolImage('sym-sel', { width: 88, height: 88 })
+      const map = createFakeMap([drawLayer([['f1', symbolProperties('sym-sel')]])])
+      updateHighlightedFeatures(map, [selEntry('f1')], [], {})
+      const [hlFeature] = getHighlightLayer(map).getSource().getFeatures()
+      const [style] = hlFeature.getStyle()
+      expect(style.getImage()).toBeInstanceOf(Icon)
+      expect(style.getImage().getImage(1)).toBe(canvas)
+      expect(style.getImage().getScale()).toBe(0.5) // 1 / symbolPixelRatio (2)
+    })
+
+    test('renders the active-variant Icon for the keyboard-cursor item', () => {
+      const canvas = getOrCreateSymbolImage('sym-act', { width: 44, height: 44 })
+      const map = createFakeMap([drawLayer([['f1', symbolProperties('sym-act')]])])
+      updateHighlightedFeatures(map, [], [selEntry('f1')], {})
+      const [hlFeature] = getHighlightLayer(map).getSource().getFeatures()
+      const [style] = hlFeature.getStyle()
+      expect(style.getImage().getImage(1)).toBe(canvas)
+    })
+
+    // The whole point of reading live properties instead of trusting selectedFeatures'
+    // captured-at-selection-time snapshot: a map style change re-resolves the point's
+    // variants (point/pointSymbolImages.js) and rewrites them onto the live feature — the
+    // highlight must pick up the NEW id, not whatever was true when the user first selected.
+    test('picks up a re-resolved symbolSelectedImageId after a map style change, not whatever was true at selection time', () => {
+      const canvasLight = getOrCreateSymbolImage('sym-sel-light', { width: 44, height: 44 })
+      const canvasDark = getOrCreateSymbolImage('sym-sel-dark', { width: 44, height: 44 })
+      const layer = drawLayer([['f1', symbolProperties('sym-sel-light')]])
+      const map = createFakeMap([layer])
+
+      updateHighlightedFeatures(map, [selEntry('f1')], [], {})
+      const before = getHighlightLayer(map).getSource().getFeatures()[0].getStyle()[0]
+      expect(before.getImage().getImage(1)).toBe(canvasLight)
+
+      // Simulate refreshAllPointSymbols re-resolving the point against a new map style.
+      layer.getSource().getFeatureById('f1').set('symbolSelectedImageId', 'sym-sel-dark')
+      updateHighlightedFeatures(map, [selEntry('f1')], [], {})
+      const after = getHighlightLayer(map).getSource().getFeatures()[0].getStyle()[0]
+      expect(after.getImage().getImage(1)).toBe(canvasDark)
+    })
+
+    test('falls back to no highlight (not a crash) when the variant has not been cached yet', () => {
+      const map = createFakeMap([drawLayer([['f1', symbolProperties('sym-not-cached')]])])
+      updateHighlightedFeatures(map, [selEntry('f1')], [], {})
+      expect(getHighlightLayer(map).getSource().getFeatures()).toHaveLength(0)
+    })
+
+    test('falls back to no highlight when the live feature cannot be found (e.g. deleted mid-flight)', () => {
+      const map = createFakeMap([drawLayer()]) // empty source — 'f1' doesn't exist
+      updateHighlightedFeatures(map, [selEntry('f1')], [], {})
+      expect(getHighlightLayer(map).getSource().getFeatures()).toHaveLength(0)
+    })
+
+    test('a plain Point with no symbol config falls through to Stroke/Fill (still no visible highlight)', () => {
+      const map = createFakeMap([drawLayer([['f1', {}]])])
+      updateHighlightedFeatures(map, [selEntry('f1')], [], {})
+      expect(getHighlightLayer(map).getSource().getFeatures()).toHaveLength(0)
+    })
+  })
+})
+
+describe('VectorTileLayer style-wrap (smoke test — pre-existing, undocumented path)', () => {
+  test('does not throw when a VT layer is present alongside a draw VectorLayer', () => {
+    const vt = new VectorTileLayer({})
+    const map = createFakeMap([vt, drawLayer()])
+    expect(() => updateHighlightedFeatures(map, [], [], {})).not.toThrow()
+  })
+})

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

@@ -0,0 +1,40 @@
+/**
+ * The OL "last mile" for symbolRegistry's rasterised symbol images: turns the ImageData
+ * rasteriseSymbolImage() produces into something ol/style/Icon can render (a canvas),
+ * and caches it by the same content-hash imageId symbolRegistry already computes — so
+ * repeated resolves of the same style/theme/pixel-ratio combination are free after the
+ * first. Unlike MapLibre (map.addImage), OL has no map-level image registry of its own,
+ * so this cache lives at the module level here instead.
+ */
+
+const imageCache = new Map() // imageId → HTMLCanvasElement
+
+/** Synchronous lookup for style functions (which must be synchronous) — undefined until
+ * getOrCreateSymbolImage() has resolved it at least once. */
+export const getCachedSymbolImage = (imageId) => imageCache.get(imageId)
+
+/**
+ * Rasterise-once-cache-forever: draws the given ImageData onto a canvas the first time
+ * imageId is seen, and returns the cached canvas on every subsequent call.
+ *
+ * @param {string} imageId
+ * @param {ImageData} imageData
+ * @returns {HTMLCanvasElement}
+ */
+export const getOrCreateSymbolImage = (imageId, imageData) => {
+  const cached = imageCache.get(imageId)
+  if (cached) {
+    return cached
+  }
+  const canvas = document.createElement('canvas')
+  canvas.width = imageData.width
+  canvas.height = imageData.height
+  canvas.getContext('2d').putImageData(imageData, 0, 0)
+  imageCache.set(imageId, canvas)
+  return canvas
+}
+
+/** Mainly for testing — clears every cached image. */
+export const clearSymbolImageCache = () => {
+  imageCache.clear()
+}

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

@@ -0,0 +1,58 @@
+import { getCachedSymbolImage, getOrCreateSymbolImage, clearSymbolImageCache } from './symbolImages.js'
+
+const imageData = (width, height) => ({ width, height })
+
+beforeEach(() => {
+  clearSymbolImageCache()
+  // Memoized per-canvas so `canvas.getContext()` returns the same mock object on repeat
+  // calls (real canvases do the same) — needed so assertions and the code under test see
+  // the same putImageData spy, not two different ones from two different mock calls.
+  HTMLCanvasElement.prototype.getContext = jest.fn(function () {
+    this._ctx ??= { putImageData: jest.fn() }
+    return this._ctx
+  })
+})
+
+describe('getCachedSymbolImage', () => {
+  it('returns undefined for an id that has never been registered', () => {
+    expect(getCachedSymbolImage('symbol-unseen')).toBeUndefined()
+  })
+
+  it('returns the cached canvas after getOrCreateSymbolImage has resolved it', () => {
+    const canvas = getOrCreateSymbolImage('symbol-a', imageData(20, 30))
+    expect(getCachedSymbolImage('symbol-a')).toBe(canvas)
+  })
+})
+
+describe('getOrCreateSymbolImage', () => {
+  it('draws the ImageData onto a canvas sized to match it', () => {
+    const canvas = getOrCreateSymbolImage('symbol-b', imageData(44, 60))
+    expect(canvas).toBeInstanceOf(HTMLCanvasElement)
+    expect(canvas.width).toBe(44)
+    expect(canvas.height).toBe(60)
+    expect(canvas.getContext().putImageData).toHaveBeenCalledWith(imageData(44, 60), 0, 0)
+  })
+
+  it('rasterises only once — a second call with the same id returns the same canvas without redrawing', () => {
+    const first = getOrCreateSymbolImage('symbol-c', imageData(10, 10))
+    const contextCallsAfterFirst = HTMLCanvasElement.prototype.getContext.mock.calls.length
+    const second = getOrCreateSymbolImage('symbol-c', imageData(10, 10))
+    expect(second).toBe(first)
+    expect(HTMLCanvasElement.prototype.getContext.mock.calls).toHaveLength(contextCallsAfterFirst)
+  })
+
+  it('different ids get independent canvases', () => {
+    const a = getOrCreateSymbolImage('symbol-d', imageData(10, 10))
+    const b = getOrCreateSymbolImage('symbol-e', imageData(20, 20))
+    expect(a).not.toBe(b)
+  })
+})
+
+describe('clearSymbolImageCache', () => {
+  it('forces the next getOrCreateSymbolImage call to rasterise again', () => {
+    const first = getOrCreateSymbolImage('symbol-f', imageData(10, 10))
+    clearSymbolImageCache()
+    const second = getOrCreateSymbolImage('symbol-f', imageData(10, 10))
+    expect(second).not.toBe(first)
+  })
+})