@defra/interactive-map 0.0.23-alpha → 0.0.25-alpha

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

@@ -0,0 +1,146 @@
+import turfBbox from '@turf/bbox'
+import { transformExtent } from 'ol/proj.js'
+
+// In EPSG:27700 coordinates are projected meters — distances are Pythagorean, no geodesy needed
+
+const formatDimension = (meters) => {
+  const WHOLE_MILE_THRESHOLD = 10
+  const MILE_THRESHOLD = 0.5
+  const METERS_PER_MILE = 1609.344
+
+  const miles = meters / METERS_PER_MILE
+
+  if (miles < MILE_THRESHOLD) {
+    return `${Math.round(meters)}m`
+  }
+
+  if (miles < WHOLE_MILE_THRESHOLD) {
+    const value = Number.parseFloat(miles.toFixed(1))
+    const units = value === 1 ? 'mile' : 'miles'
+    return `${value} ${units}`
+  }
+
+  const rounded = Math.round(miles)
+  return `${rounded} miles`
+}
+
+/**
+ * Returns "400m by 1.4 miles" for the visible (padded) map area.
+ * extent: [xmin, ymin, xmax, ymax] in EPSG:27700 meters
+ */
+const getAreaDimensions = (extent) => {
+  if (!extent) {
+    return ''
+  }
+  const [xmin, ymin, xmax, ymax] = extent
+  const widthMeters = xmax - xmin
+  const heightMeters = ymax - ymin
+  return `${formatDimension(heightMeters)} by ${formatDimension(widthMeters)}`
+}
+
+/**
+ * Returns "north 400m, east 750m" for moves between two EPSG:27700 [easting, northing] coords.
+ */
+const getCardinalMove = (from, to) => {
+  const THRESHOLD_METERS = 1
+
+  const dEasting = to[0] - from[0]
+  const dNorthing = to[1] - from[1]
+
+  const moves = []
+
+  if (Math.abs(dNorthing) > THRESHOLD_METERS) {
+    moves.push(`${dNorthing > 0 ? 'north' : 'south'} ${formatDimension(Math.abs(dNorthing))}`)
+  }
+
+  if (Math.abs(dEasting) > THRESHOLD_METERS) {
+    moves.push(`${dEasting > 0 ? 'east' : 'west'} ${formatDimension(Math.abs(dEasting))}`)
+  }
+
+  return moves.join(', ')
+}
+
+/**
+ * Get a flat bbox [west, south, east, north] in WGS84 from any GeoJSON object.
+ */
+const getBboxFromGeoJSON = (geojson) => turfBbox(geojson)
+
+/**
+ * Get a flat extent [xmin, ymin, xmax, ymax] in EPSG:27700 from any GeoJSON object.
+ * GeoJSON is always WGS84, so this transforms the bbox.
+ */
+const getExtentFromGeoJSON = (geojson) => {
+  const wgs84Bbox = turfBbox(geojson)
+  return transformExtent(wgs84Bbox, 'EPSG:4326', 'EPSG:27700')
+}
+
+/**
+ * Returns the visible (padded) extent [xmin, ymin, xmax, ymax] in EPSG:27700.
+ * Accounts for view padding by converting padded pixel corners to map coordinates.
+ */
+const getPaddedExtent = (map) => {
+  const size = map.getSize()
+  const view = map.getView()
+  const padding = view.padding || [0, 0, 0, 0] // [top, right, bottom, left]
+  const [top, right, bottom, left] = padding
+
+  const swPixel = [left, size[1] - bottom]
+  const nePixel = [size[0] - right, top]
+
+  const sw = map.getCoordinateFromPixel(swPixel)
+  const ne = map.getCoordinateFromPixel(nePixel)
+
+  if (!sw || !ne) {
+    return null
+  }
+
+  return [sw[0], sw[1], ne[0], ne[1]]
+}
+
+/**
+ * Returns true if the geometry's screen bounding box overlaps the given panel rectangle.
+ * 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 => {
+    return map.getPixelFromCoordinate(coord)
+  }).filter(Boolean)
+
+  if (!corners.length) {
+    return false
+  }
+
+  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 < panelRect.right &&
+    screenMaxX > panelRect.left &&
+    screenMinY < panelRect.bottom &&
+    screenMaxY > panelRect.top
+  )
+}
+
+export {
+  getAreaDimensions,
+  getCardinalMove,
+  getBboxFromGeoJSON,
+  getExtentFromGeoJSON,
+  getPaddedExtent,
+  isGeometryObscured,
+  formatDimension
+}

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

@@ -0,0 +1,119 @@
+import {
+  formatDimension,
+  getAreaDimensions,
+  getCardinalMove,
+  getExtentFromGeoJSON,
+  getPaddedExtent,
+  isGeometryObscured
+} from './spatial.js'
+
+jest.mock('ol/proj.js', () => ({
+  __esModule: true,
+  transform: (coord) => coord,
+  transformExtent: (extent) => extent
+}))
+
+describe('formatDimension', () => {
+  it('formats sub-mile distances in meters', () => {
+    expect(formatDimension(400)).toBe('400m')
+  })
+
+  it('formats exactly 1 mile', () => {
+    expect(formatDimension(1609.344)).toBe('1 mile')
+  })
+
+  it('formats decimal miles with plural', () => {
+    expect(formatDimension(2414.016)).toBe('1.5 miles')
+  })
+
+  it('formats 10+ miles as whole number', () => {
+    expect(formatDimension(20000)).toBe('12 miles')
+  })
+})
+
+describe('getAreaDimensions', () => {
+  it('returns empty string for null extent', () => {
+    expect(getAreaDimensions(null)).toBe('')
+  })
+
+  it('returns height by width as formatted strings', () => {
+    // 1609m height (~1 mile), 804m width (sub-mile)
+    expect(getAreaDimensions([0, 0, 804, 1609])).toBe('1 mile by 804m')
+  })
+})
+
+describe('getCardinalMove', () => {
+  it('returns empty string for sub-threshold move', () => {
+    expect(getCardinalMove([0, 0], [0.5, 0.5])).toBe('')
+  })
+
+  it('describes north and east movement', () => {
+    expect(getCardinalMove([0, 0], [100, 100])).toBe('north 100m, east 100m')
+  })
+
+  it('describes south and west movement', () => {
+    expect(getCardinalMove([100, 100], [0, 0])).toBe('south 100m, west 100m')
+  })
+
+  it('describes single-axis movement', () => {
+    expect(getCardinalMove([0, 0], [0, 100])).toBe('north 100m')
+  })
+})
+
+describe('getExtentFromGeoJSON', () => {
+  it('returns a 4-element extent from a GeoJSON point', () => {
+    const point = { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 51] } }
+    expect(getExtentFromGeoJSON(point)).toEqual([0, 51, 0, 51])
+  })
+})
+
+describe('getPaddedExtent', () => {
+  const makeMap = (padding) => ({
+    getSize: () => [800, 600],
+    getView: () => ({ padding }),
+    getCoordinateFromPixel: (pixel) => pixel
+  })
+
+  it('applies padding to sw and ne corner pixels', () => {
+    // padding [top=10, right=20, bottom=30, left=40]
+    // sw pixel: [left=40, height-bottom=570] → ne pixel: [width-right=780, top=10]
+    expect(getPaddedExtent(makeMap([10, 20, 30, 40]))).toEqual([40, 570, 780, 10])
+  })
+
+  it('uses zero padding when view.padding is null', () => {
+    expect(getPaddedExtent(makeMap(null))).toEqual([0, 600, 800, 0])
+  })
+
+  it('returns null when coordinate projection fails', () => {
+    const map = {
+      getSize: () => [800, 600],
+      getView: () => ({ padding: null }),
+      getCoordinateFromPixel: () => null
+    }
+    expect(getPaddedExtent(map)).toBeNull()
+  })
+})
+
+describe('isGeometryObscured', () => {
+  const point = { type: 'Feature', geometry: { type: 'Point', coordinates: [-1, 51] } }
+  const panel = { left: 0, top: 0, right: 100, bottom: 100 }
+
+  const containerRect = { left: 0, top: 0, width: 1000, height: 1000 }
+  const makeMap = (pixelFn, viewportRect = containerRect) => ({
+    getTargetElement: () => ({ getBoundingClientRect: () => containerRect }),
+    getViewport: () => ({ getBoundingClientRect: () => viewportRect }),
+    getPixelFromCoordinate: pixelFn
+  })
+
+  it('returns false when no corners project to screen pixels', () => {
+    expect(isGeometryObscured(point, panel, makeMap(() => null))).toBe(false)
+  })
+
+  it('returns true when geometry overlaps panel', () => {
+    expect(isGeometryObscured(point, panel, makeMap(() => [50, 50]))).toBe(true)
+  })
+
+  it('returns false when geometry is outside panel', () => {
+    expect(isGeometryObscured(point, panel, makeMap(() => [200, 200]))).toBe(false)
+  })
+})

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

@@ -0,0 +1,133 @@
+import XYZ from 'ol/source/XYZ.js'
+import VectorTileSource from 'ol/source/VectorTile.js'
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import OGCVectorTile from 'ol/source/OGCVectorTile.js'
+import MVT from 'ol/format/MVT.js'
+import TileGrid from 'ol/tilegrid/TileGrid.js'
+import TileState from 'ol/TileState.js'
+import { stylefunction } from 'ol-mapbox-style'
+import { TILE_GRID_RESOLUTIONS, TILE_GRID_ORIGIN, TILE_SIZE } from '../defaults.js'
+
+const CRS = 'EPSG:27700'
+
+export function fetchWithTransform (url, resourceType, transformRequest) {
+  const result = transformRequest ? (transformRequest(url, resourceType) || {}) : {}
+  return fetch(result.url || url, { headers: result.headers || {} })
+}
+
+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
+  })
+
+  const tileUrlFunction = ([z, x, y]) => url
+    .replace('{z}', z)
+    .replace('{x}', x)
+    .replace('{y}', y)
+
+  return new XYZ({
+    projection: CRS,
+    tileGrid,
+    tileUrlFunction,
+    tileLoadFunction: transformRequest ? createTileLoadFunction(transformRequest) : undefined
+  })
+}
+
+// Insert extension before any query string to match Mapbox GL sprite convention
+function resolveSprite (spriteBase, transformRequest) {
+  const queryIdx = spriteBase.indexOf('?')
+  const [spritePath, spriteQuery] = queryIdx >= 0 ? [spriteBase.slice(0, queryIdx), spriteBase.slice(queryIdx)] : [spriteBase, '']
+  const jsonUrl = `${spritePath}.json${spriteQuery}`
+  const pngUrl = `${spritePath}.png${spriteQuery}`
+  return { jsonUrl, pngUrl, fetch: () => fetchWithTransform(jsonUrl, 'SpriteJSON', transformRequest).then(r => r.json()) }
+}
+
+// The OS VTS styles are designed to work with the limited ArcGIS/ESRI SDK, which does not support
+// icon-color for sprite tinting. OS works around this by setting icon-color alpha to 0 (a no-op
+// in the ESRI renderer) so the sprite renders as-is. ol-mapbox-style interprets the colour
+// literally though, making icons invisible. Fix by setting alpha to 1 (opaque tint).
+function fixIconOpacity (styleJson) {
+  styleJson.layers.forEach(styleLayer => {
+    if (styleLayer.paint?.['icon-color']) {
+      styleLayer.paint['icon-color'] = styleLayer.paint['icon-color'].replace(',0)', ',1)')
+    }
+  })
+}
+
+export async function createVectorTileLayer (url, transformRequest) {
+  const styleJson = await fetchWithTransform(url, 'Style', transformRequest).then(r => r.json())
+
+  const sourceId = Object.keys(styleJson.sources)[0]
+  const capabilitiesUrl = styleJson.sources[sourceId].url
+  const serviceJson = await fetchWithTransform(capabilitiesUrl, 'Source', transformRequest).then(r => r.json())
+
+  const extent = [serviceJson.fullExtent.xmin, serviceJson.fullExtent.ymin, serviceJson.fullExtent.xmax, serviceJson.fullExtent.ymax]
+  const origin = [serviceJson.tileInfo.origin.x, serviceJson.tileInfo.origin.y]
+  const resolutions = serviceJson.tileInfo.lods.map(l => l.resolution).slice(0, 16)
+  const tileSize = serviceJson.tileInfo.rows
+  const tileUrl = serviceJson.tiles[0]
+
+  const sprite = resolveSprite(styleJson.sprite, transformRequest)
+  const spritesJson = await sprite.fetch()
+
+  fixIconOpacity(styleJson)
+
+  const tileGrid = new TileGrid({ extent, origin, resolutions, tileSize })
+
+  // Tile URL from capabilities already includes the API key — no custom tileLoadFunction needed
+  const source = new VectorTileSource({
+    format: new MVT(),
+    url: tileUrl,
+    projection: CRS,
+    tileGrid
+  })
+  const layer = new VectorTileLayer({ source, declutter: true, renderMode: 'vector' })
+
+  stylefunction(layer, styleJson, sourceId, resolutions, spritesJson, sprite.pngUrl)
+
+  return { layer, source }
+}
+
+export async function createOGCVectorTileLayer (url, transformRequest) {
+  const styleJson = await fetchWithTransform(url, 'Style', transformRequest).then(r => r.json())
+
+  const sourceId = Object.keys(styleJson.sources)[0]
+  const tilesUrl = styleJson.sources[sourceId].url
+
+  // Fetch tileset descriptor to get the tile matrix set URL (includes API key), in parallel with sprites
+  const sprite = resolveSprite(styleJson.sprite, transformRequest)
+  const tilesetJson = await fetchWithTransform(tilesUrl, 'Source', transformRequest).then(r => r.json())
+  const tmsLink = tilesetJson.links?.find(l => l.rel === 'http://www.opengis.net/def/rel/ogc/1.0/tiling-scheme')
+  const [tmsJson, spritesJson] = await Promise.all([
+    fetchWithTransform(tmsLink.href, 'Source', transformRequest).then(r => r.json()),
+    sprite.fetch()
+  ])
+
+  const resolutions = tmsJson.tileMatrices.map(m => m.cellSize)
+  const origin = tmsJson.tileMatrices[0].pointOfOrigin
+  const tileSize = [tmsJson.tileMatrices[0].tileHeight, tmsJson.tileMatrices[0].tileWidth]
+
+  // OS NGD returns tiles as 'application/octet-stream' rather than the standard MVT media type
+  const format = new MVT()
+  format.supportedMediaTypes.push('application/octet-stream')
+
+  const tileGrid = new TileGrid({ resolutions, origin, tileSize })
+  const source = new OGCVectorTile({ url: tilesUrl, format, tileGrid, projection: CRS })
+  const layer = new VectorTileLayer({ source, declutter: true, renderMode: 'vector' })
+
+  stylefunction(layer, styleJson, sourceId, resolutions, spritesJson, sprite.pngUrl)
+
+  return { layer, source }
+}

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

@@ -0,0 +1,251 @@
+import XYZ from 'ol/source/XYZ.js'
+import TileGrid from 'ol/tilegrid/TileGrid.js'
+import VectorTileSource from 'ol/source/VectorTile.js'
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import { stylefunction } from 'ol-mapbox-style'
+import { createTileSource, createVectorTileLayer } from './tileLayers.js'
+import { TILE_GRID_RESOLUTIONS, TILE_GRID_ORIGIN, TILE_SIZE } from '../defaults.js'
+
+const mockTileGridInstance = {}
+const mockSourceInstance = {}
+const mockVectorTileSourceInstance = {}
+const mockVectorTileLayerInstance = {}
+const mockMVTInstance = {}
+
+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' } }))
+jest.mock('ol/source/VectorTile.js', () => ({ __esModule: true, default: jest.fn(() => mockVectorTileSourceInstance) }))
+jest.mock('ol/layer/VectorTile.js', () => ({ __esModule: true, default: jest.fn(() => mockVectorTileLayerInstance) }))
+jest.mock('ol/format/MVT.js', () => ({ __esModule: true, default: jest.fn(() => mockMVTInstance) }))
+jest.mock('ol-mapbox-style', () => ({ __esModule: true, stylefunction: jest.fn() }))
+
+const flushPromises = () => new Promise(resolve => setTimeout(resolve, 0))
+
+const mockStyleJson = {
+  sources: { esri: { url: 'https://example.com/caps.json' } },
+  sprite: 'https://example.com/sprites/sprite',
+  layers: []
+}
+
+const mockServiceJson = {
+  fullExtent: { xmin: -238375, ymin: 0, xmax: 700000, ymax: 1300000 },
+  tileInfo: {
+    origin: { x: -238375, y: 1376256 },
+    lods: Array.from({ length: 20 }, (_, i) => ({ resolution: 896 / Math.pow(2, i) })),
+    rows: 256,
+    spatialReference: { latestWkid: 27700 }
+  },
+  tiles: ['https://example.com/tiles/{z}/{x}/{y}.pbf']
+}
+
+const mockSpritesJson = { myIcon: { x: 0, y: 0, width: 16, height: 16, pixelRatio: 1 } }
+
+function makeVectorFetchMock (styleJson = mockStyleJson) {
+  return jest.fn().mockImplementation(url => {
+    if (url === styleJson.sources[Object.keys(styleJson.sources)[0]].url) {
+      return Promise.resolve({ json: () => Promise.resolve(mockServiceJson) })
+    }
+    if (url.endsWith('.json') || url.includes('.json?')) {
+      return Promise.resolve({ json: () => Promise.resolve(mockSpritesJson) })
+    }
+    return Promise.resolve({ json: () => Promise.resolve(styleJson) })
+  })
+}
+
+describe('createTileSource', () => {
+  beforeEach(() => jest.clearAllMocks())
+
+  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
+    })
+  })
+
+  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' }))
+  })
+
+  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')
+  })
+
+  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())
+    })
+  })
+
+  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('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('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('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('createVectorTileLayer', () => {
+  const styleUrl = 'https://example.com/styles'
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    global.fetch = makeVectorFetchMock()
+  })
+
+  it('fetches style JSON from url', async () => {
+    await createVectorTileLayer(styleUrl, null)
+    expect(fetch).toHaveBeenCalledWith(styleUrl, { headers: {} })
+  })
+
+  it('fetches capabilities from first source url in style JSON', async () => {
+    await createVectorTileLayer(styleUrl, null)
+    expect(fetch).toHaveBeenCalledWith('https://example.com/caps.json', { headers: {} })
+  })
+
+  it('fetches sprite JSON from sprite base + .json', async () => {
+    await createVectorTileLayer(styleUrl, null)
+    expect(fetch).toHaveBeenCalledWith('https://example.com/sprites/sprite.json', { headers: {} })
+  })
+
+  it('creates TileGrid from capabilities tileInfo', async () => {
+    await createVectorTileLayer(styleUrl, null)
+    expect(TileGrid).toHaveBeenCalledWith({
+      extent: [-238375, 0, 700000, 1300000],
+      origin: [-238375, 1376256],
+      resolutions: expect.any(Array),
+      tileSize: 256
+    })
+  })
+
+  it('slices capabilities lods to max 16 resolutions', async () => {
+    await createVectorTileLayer(styleUrl, null)
+    const { resolutions } = TileGrid.mock.calls[0][0]
+    expect(resolutions.length).toBe(16)
+  })
+
+  it('creates VectorTileSource with MVT format and 27700 projection', async () => {
+    await createVectorTileLayer(styleUrl, null)
+    expect(VectorTileSource).toHaveBeenCalledWith(expect.objectContaining({
+      format: mockMVTInstance,
+      url: 'https://example.com/tiles/{z}/{x}/{y}.pbf',
+      projection: 'EPSG:27700',
+      tileGrid: mockTileGridInstance
+    }))
+  })
+
+  it('does not set tileLoadFunction on VectorTileSource', async () => {
+    await createVectorTileLayer(styleUrl, null)
+    const { tileLoadFunction } = VectorTileSource.mock.calls[0][0]
+    expect(tileLoadFunction).toBeUndefined()
+  })
+
+  it('creates VectorTileLayer with source, declutter true, and vector renderMode', async () => {
+    await createVectorTileLayer(styleUrl, null)
+    expect(VectorTileLayer).toHaveBeenCalledWith({ source: mockVectorTileSourceInstance, declutter: true, renderMode: 'vector' })
+  })
+
+  it('applies stylefunction with layer, styleJson, sourceId, resolutions, spritesJson, spritesPngUrl', async () => {
+    await createVectorTileLayer(styleUrl, null)
+    expect(stylefunction).toHaveBeenCalledWith(
+      mockVectorTileLayerInstance,
+      mockStyleJson,
+      'esri',
+      expect.any(Array),
+      mockSpritesJson,
+      'https://example.com/sprites/sprite.png'
+    )
+  })
+
+  it('returns the constructed layer and source', async () => {
+    const result = await createVectorTileLayer(styleUrl, null)
+    expect(result.layer).toBe(mockVectorTileLayerInstance)
+    expect(result.source).toBe(mockVectorTileSourceInstance)
+  })
+
+  it('inserts sprite extension before query string when sprite URL has one', async () => {
+    const styleWithQuery = { ...mockStyleJson, sprite: 'https://example.com/sprites/sprite?key=abc123' }
+    global.fetch = makeVectorFetchMock(styleWithQuery)
+    await createVectorTileLayer(styleUrl, null)
+    expect(fetch).toHaveBeenCalledWith('https://example.com/sprites/sprite.json?key=abc123', { headers: {} })
+    expect(stylefunction).toHaveBeenCalledWith(
+      expect.anything(), expect.anything(), expect.anything(), expect.anything(), expect.anything(),
+      'https://example.com/sprites/sprite.png?key=abc123'
+    )
+  })
+
+  it('passes transformRequest result url and headers to each fetch', async () => {
+    const transformRequest = jest.fn((url) => ({
+      url: url + '&auth=1',
+      headers: { Authorization: 'Bearer token' }
+    }))
+    global.fetch = jest.fn().mockImplementation(url => {
+      if (url.includes('caps.json')) { return Promise.resolve({ json: () => Promise.resolve(mockServiceJson) }) }
+      if (url.includes('.json')) { return Promise.resolve({ json: () => Promise.resolve(mockSpritesJson) }) }
+      return Promise.resolve({ json: () => Promise.resolve(mockStyleJson) })
+    })
+    await createVectorTileLayer(styleUrl, transformRequest)
+    expect(fetch).toHaveBeenCalledWith(styleUrl + '&auth=1', { headers: { Authorization: 'Bearer token' } })
+  })
+})

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

@@ -0,0 +1,26 @@
+import { TILE_GRID_RESOLUTIONS, WORLD_LOD_RESOLUTIONS, WORLD_DEFAULT_MIN_ZOOM, WORLD_DEFAULT_MAX_ZOOM } from '../defaults.js'
+
+export const ZOOM_ALIGNMENT = {
+  UK: 'uk',
+  WORLD: 'world'
+}
+
+/**
+ * Returns OL View resolution config for the requested zoom alignment mode.
+ * 'uk'    — OS tile grid zoom levels (0–13); zoom 0 shows all of Great Britain (default)
+ * 'world' — ESRI LOD sequence; zoom levels match ESRI SDK, full UK visible around zoom 7
+ */
+export function getViewResolutionConfig (zoomAlignment) {
+  if (zoomAlignment === ZOOM_ALIGNMENT.WORLD) {
+    return {
+      resolutions: WORLD_LOD_RESOLUTIONS,
+      defaultMinZoom: WORLD_DEFAULT_MIN_ZOOM,
+      maxZoom: WORLD_DEFAULT_MAX_ZOOM
+    }
+  }
+  return {
+    resolutions: TILE_GRID_RESOLUTIONS,
+    defaultMinZoom: 0,
+    maxZoom: TILE_GRID_RESOLUTIONS.length - 1
+  }
+}