@defra/interactive-map 0.0.22-alpha → 0.0.24-alpha

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

@@ -0,0 +1,234 @@
+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 } from './appEvents.js'
+import { getAreaDimensions, getCardinalMove, getExtentFromGeoJSON, getPaddedExtent, isGeometryObscured } from './utils/spatial.js'
+
+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
+  }
+  const { top = 0, right = 0, bottom = 0, left = 0 } = padding
+  return [top, right, bottom, left]
+}
+
+// Register British National Grid with proj4 so OL can use it
+proj4.defs(CRS, '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs')
+register(proj4)
+
+export default class OpenLayersProvider {
+  constructor ({ mapProviderConfig = {}, events, eventBus }) {
+    this.events = events
+    this.eventBus = eventBus
+    this.capabilities = {
+      supportedShortcuts,
+      supportsMapSizes: false
+    }
+    Object.assign(this, mapProviderConfig)
+  }
+
+  async initMap (config) {
+    const { container, padding, mapStyle, mapSize, center, zoom, bounds, minZoom, maxZoom, transformRequest } = config
+    this.mapStyleId = mapStyle?.id
+    this.mapSize = mapSize
+    const { events, eventBus } = this
+
+    const source = createTileSource(mapStyle.url, transformRequest)
+    const tileLayer = new TileLayer({ source })
+
+    const viewResolutions = getViewResolutionConfig(this.zoomAlignment ?? ZOOM_ALIGNMENT.UK)
+
+    const view = new View({
+      projection: CRS,
+      center,
+      zoom: zoom ?? viewResolutions.defaultMinZoom,
+      minZoom: Math.max(minZoom ?? viewResolutions.defaultMinZoom, viewResolutions.defaultMinZoom),
+      maxZoom: maxZoom ?? viewResolutions.maxZoom,
+      resolutions: viewResolutions.resolutions,
+      constrainResolution: false,
+      padding: toPaddingArray(padding)
+    })
+
+    const map = new OlMap({
+      target: container,
+      layers: [tileLayer],
+      view,
+      controls: [],
+      interactions: defaultInteractions({ doubleClickZoom: false })
+    })
+
+    if (bounds) {
+      map.once('rendercomplete', () => {
+        view.fit(bounds, { size: map.getSize(), duration: 0 })
+      })
+    }
+
+    this.mapEventHandles = attachMapEvents({
+      map,
+      source,
+      events,
+      eventBus,
+      getZoom: this.getZoom.bind(this),
+      getCenter: this.getCenter.bind(this),
+      getBounds: this.getBounds.bind(this),
+      getResolution: this.getResolution.bind(this)
+    })
+
+    this.appEventHandles = attachAppEvents({
+      tileLayer,
+      transformRequest,
+      events,
+      eventBus
+    }) || []
+
+    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, {
+      map: this.map,
+      mapStyleId: this.mapStyleId,
+      mapSize: this.mapSize,
+      crs: this.crs
+    })
+  }
+
+  destroyMap () {
+    this.mapEventHandles?.remove()
+    this.appEventHandles?.remove()
+
+    this.mapEventHandles = null
+    this.appEventHandles = null
+
+    if (this.map) {
+      this.map.setTarget(null)
+      this.map = null
+    }
+
+    this.view = null
+    this.tileLayer = null
+    this.source = null
+  }
+
+  // ==========================
+  // Side-effects
+  // ==========================
+
+  setView ({ center, zoom }) {
+    this.view.animate({
+      center: center ?? this.view.getCenter(),
+      zoom: zoom ?? this.view.getZoom(),
+      duration: DEFAULTS.animationDuration
+    })
+  }
+
+  zoomIn (zoomDelta) {
+    this.view.animate({
+      zoom: this.view.getZoom() + zoomDelta,
+      duration: DEFAULTS.animationDuration
+    })
+  }
+
+  zoomOut (zoomDelta) {
+    this.view.animate({
+      zoom: this.view.getZoom() - zoomDelta,
+      duration: DEFAULTS.animationDuration
+    })
+  }
+
+  panBy (offset) {
+    const center = this.view.getCenter()
+    const resolution = this.view.getResolution()
+    // Pixel x/y → easting increases right, northing increases up (flip y)
+    this.view.animate({
+      center: [center[0] + offset[0] * resolution, center[1] - offset[1] * resolution],
+      duration: DEFAULTS.animationDuration
+    })
+  }
+
+  fitToBounds (bounds) {
+    const extent = Array.isArray(bounds) ? bounds : getExtentFromGeoJSON(bounds)
+    this.view.fit(extent, { duration: DEFAULTS.animationDuration })
+  }
+
+  setPadding (padding) {
+    this.view.padding = toPaddingArray(padding)
+  }
+
+  // ==========================
+  // Read-only getters
+  // ==========================
+
+  getCenter () {
+    const center = this.view.getCenter()
+    const p = DEFAULTS.coordinatePrecision
+    return [
+      Math.round(center[0] * Math.pow(10, p)) / Math.pow(10, p),
+      Math.round(center[1] * Math.pow(10, p)) / Math.pow(10, p)
+    ]
+  }
+
+  getZoom () {
+    return this.view.getZoom()
+  }
+
+  getBounds () {
+    const extent = this.view.calculateExtent(this.map.getSize())
+    return extent.map(n => Math.round(n * 100) / 100)
+  }
+
+  getFeaturesAtPoint (_point, _options) {
+    // Raster tiles have no queryable features
+    return []
+  }
+
+  getVisibleFeatures (_layerIds) {
+    return []
+  }
+
+  // ==========================
+  // Spatial helpers
+  // ==========================
+
+  getAreaDimensions () {
+    return getAreaDimensions(getPaddedExtent(this.map))
+  }
+
+  getCardinalMove (from, to) {
+    return getCardinalMove(from, to)
+  }
+
+  getResolution () {
+    return this.view.getResolution()
+  }
+
+  mapToScreen (coords) {
+    if (!this.map) {
+      return { x: 0, y: 0 }
+    }
+    const pixel = this.map.getPixelFromCoordinate(coords)
+    if (!pixel) {
+      return { x: 0, y: 0 }
+    }
+    return { x: pixel[0], y: pixel[1] }
+  }
+
+  screenToMap (point) {
+    return this.map.getCoordinateFromPixel([point.x, point.y])
+  }
+
+  isGeometryObscured (geojson, panelRect) {
+    return isGeometryObscured(geojson, panelRect, this.map)
+  }
+}

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

@@ -0,0 +1,331 @@
+// Mock-prefixed variables are allowed in jest.mock factories by babel-plugin-jest-hoist
+import OpenLayersProvider from './openlayersProvider.js'
+import { attachMapEvents } from './mapEvents.js'
+import { attachAppEvents, createTileSource } from './appEvents.js'
+import { getExtentFromGeoJSON, isGeometryObscured } from './utils/spatial.js'
+
+const mockAnimate = jest.fn()
+const mockGetCenter = jest.fn(() => [400000.126, 300000.455])
+const mockGetZoom = jest.fn(() => 7)
+const mockGetResolution = jest.fn(() => 56)
+const mockCalculateExtent = jest.fn(() => [1.005, 2.014, 3.994, 4.0])
+const mockViewFit = jest.fn()
+const mockViewInstance = {
+  animate: mockAnimate,
+  getCenter: mockGetCenter,
+  getZoom: mockGetZoom,
+  getResolution: mockGetResolution,
+  calculateExtent: mockCalculateExtent,
+  fit: mockViewFit,
+  padding: null
+}
+
+const mockMapOnce = jest.fn()
+const mockMapGetSize = jest.fn(() => [800, 600])
+const mockMapSetTarget = jest.fn()
+const mockMapGetPixel = jest.fn(() => [100, 200])
+const mockMapGetCoord = jest.fn(() => [400000, 300000])
+const mockMapInstance = {
+  once: mockMapOnce,
+  getSize: mockMapGetSize,
+  setTarget: mockMapSetTarget,
+  getPixelFromCoordinate: mockMapGetPixel,
+  getCoordinateFromPixel: mockMapGetCoord,
+  getView: jest.fn(() => mockViewInstance)
+}
+
+const mockSource = {}
+const mockTileLayer = { setSource: jest.fn() }
+const mockMapEventHandlesRemove = 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()
+  fn.defs = jest.fn()
+  return { __esModule: true, default: fn }
+})
+jest.mock('ol/proj/proj4.js', () => ({ __esModule: true, register: jest.fn() }))
+jest.mock('./mapEvents.js', () => ({
+  __esModule: true,
+  attachMapEvents: jest.fn(() => ({ remove: mockMapEventHandlesRemove }))
+}))
+jest.mock('./appEvents.js', () => ({
+  __esModule: true,
+  createTileSource: jest.fn(() => mockSource),
+  attachAppEvents: jest.fn(() => ({ remove: mockAppEventHandlesRemove }))
+}))
+jest.mock('./utils/spatial.js', () => ({
+  __esModule: true,
+  getAreaDimensions: jest.fn(() => '1 mile by 2 miles'),
+  getCardinalMove: jest.fn(() => 'north 100m'),
+  getExtentFromGeoJSON: jest.fn(() => [10, 20, 30, 40]),
+  getPaddedExtent: jest.fn(() => [0, 0, 800, 600]),
+  isGeometryObscured: jest.fn(() => false)
+}))
+
+const events = {
+  MAP_READY: 'map:ready',
+  MAP_SET_STYLE: 'map:setstyle',
+  MAP_STYLE_CHANGE: 'map:stylechange'
+}
+
+const defaultInitConfig = {
+  container: document.createElement('div'),
+  padding: null,
+  mapStyle: { id: 'myStyle', url: 'https://tiles.example.com/{z}/{x}/{y}' },
+  mapSize: null,
+  center: [400000, 300000],
+  zoom: 7,
+  bounds: null,
+  minZoom: null,
+  maxZoom: null,
+  transformRequest: null
+}
+
+function makeProvider (mapProviderConfig = {}) {
+  const eventBus = { emit: jest.fn(), on: jest.fn(), off: jest.fn() }
+  const provider = new OpenLayersProvider({ events, eventBus, mapProviderConfig })
+  return { provider, eventBus }
+}
+
+describe('OpenLayersProvider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockViewInstance.padding = null
+  })
+
+  describe('constructor', () => {
+    it('sets events and eventBus on the instance', () => {
+      const eventBus = { emit: jest.fn() }
+      const provider = new OpenLayersProvider({ events, eventBus, mapProviderConfig: {} })
+      expect(provider.events).toBe(events)
+      expect(provider.eventBus).toBe(eventBus)
+    })
+
+    it('sets capabilities with supportsMapSizes false and supportedShortcuts array', () => {
+      const { provider } = makeProvider()
+      expect(provider.capabilities.supportsMapSizes).toBe(false)
+      expect(Array.isArray(provider.capabilities.supportedShortcuts)).toBe(true)
+    })
+
+    it('spreads mapProviderConfig properties onto instance', () => {
+      const { provider } = makeProvider({ zoomAlignment: 'world', customProp: 'hello' })
+      expect(provider.zoomAlignment).toBe('world')
+      expect(provider.customProp).toBe('hello')
+    })
+  })
+
+  describe('initMap', () => {
+    it('creates tile source, OL objects, and emits MAP_READY', async () => {
+      const { provider, eventBus } = makeProvider()
+      await provider.initMap(defaultInitConfig)
+      expect(createTileSource).toHaveBeenCalledWith(defaultInitConfig.mapStyle.url, null)
+      expect(attachMapEvents).toHaveBeenCalled()
+      expect(attachAppEvents).toHaveBeenCalled()
+      expect(eventBus.emit).toHaveBeenCalledWith(events.MAP_READY, expect.objectContaining({
+        map: mockMapInstance,
+        mapStyleId: 'myStyle'
+      }))
+    })
+
+    it('calls map.once rendercomplete when bounds are provided', async () => {
+      const { provider } = makeProvider()
+      let renderCallback
+      mockMapOnce.mockImplementation((event, cb) => { renderCallback = cb })
+      const bounds = [100, 200, 300, 400]
+      await provider.initMap({ ...defaultInitConfig, bounds })
+      expect(mockMapOnce).toHaveBeenCalledWith('rendercomplete', expect.any(Function))
+      renderCallback()
+      expect(mockViewFit).toHaveBeenCalledWith(bounds, { size: [800, 600], duration: 0 })
+    })
+
+    it('does not call map.once when no bounds', async () => {
+      const { provider } = makeProvider()
+      await provider.initMap(defaultInitConfig)
+      expect(mockMapOnce).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('destroyMap', () => {
+    it('removes event handles, nulls map target and all references', async () => {
+      const { provider } = makeProvider()
+      await provider.initMap(defaultInitConfig)
+      jest.clearAllMocks()
+
+      provider.destroyMap()
+
+      expect(mockMapEventHandlesRemove).toHaveBeenCalled()
+      expect(mockAppEventHandlesRemove).toHaveBeenCalled()
+      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', () => {
+      const { provider } = makeProvider()
+      expect(() => provider.destroyMap()).not.toThrow()
+    })
+  })
+
+  describe('view control methods', () => {
+    let provider
+
+    beforeEach(async () => {
+      ;({ provider } = makeProvider())
+      await provider.initMap(defaultInitConfig)
+      jest.clearAllMocks()
+      mockViewInstance.padding = null
+    })
+
+    it('setView animates to given center and zoom', () => {
+      provider.setView({ center: [500000, 400000], zoom: 8 })
+      expect(mockAnimate).toHaveBeenCalledWith(expect.objectContaining({ center: [500000, 400000], zoom: 8 }))
+    })
+
+    it('setView falls back to current center and zoom when not supplied', () => {
+      mockGetCenter.mockReturnValue([400000, 300000])
+      mockGetZoom.mockReturnValue(7)
+      provider.setView({})
+      expect(mockAnimate).toHaveBeenCalledWith(expect.objectContaining({ center: [400000, 300000], zoom: 7 }))
+    })
+
+    it('zoomIn increments zoom by delta', () => {
+      mockGetZoom.mockReturnValue(5)
+      provider.zoomIn(2)
+      expect(mockAnimate).toHaveBeenCalledWith(expect.objectContaining({ zoom: 7 }))
+    })
+
+    it('zoomOut decrements zoom by delta', () => {
+      mockGetZoom.mockReturnValue(9)
+      provider.zoomOut(3)
+      expect(mockAnimate).toHaveBeenCalledWith(expect.objectContaining({ zoom: 6 }))
+    })
+
+    it('panBy animates center offset scaled by resolution', () => {
+      mockGetCenter.mockReturnValue([400000, 300000])
+      mockGetResolution.mockReturnValue(56)
+      provider.panBy([10, 20])
+      expect(mockAnimate).toHaveBeenCalledWith(expect.objectContaining({
+        center: [400000 + 10 * 56, 300000 - 20 * 56]
+      }))
+    })
+
+    it('fitToBounds passes an array extent directly to view.fit', () => {
+      provider.fitToBounds([1, 2, 3, 4])
+      expect(getExtentFromGeoJSON).not.toHaveBeenCalled()
+      expect(mockViewFit).toHaveBeenCalledWith([1, 2, 3, 4], expect.any(Object))
+    })
+
+    it('fitToBounds converts GeoJSON to extent via getExtentFromGeoJSON', () => {
+      const geojson = { type: 'Point', coordinates: [0, 51] }
+      provider.fitToBounds(geojson)
+      expect(getExtentFromGeoJSON).toHaveBeenCalledWith(geojson)
+      expect(mockViewFit).toHaveBeenCalledWith([10, 20, 30, 40], expect.any(Object))
+    })
+
+    it('setPadding converts object to OL [top, right, bottom, left] array', () => {
+      provider.setPadding({ top: 10, right: 20, bottom: 30, left: 40 })
+      expect(mockViewInstance.padding).toEqual([10, 20, 30, 40])
+    })
+
+    it('setPadding fills missing keys with zero', () => {
+      provider.setPadding({ top: 10 })
+      expect(mockViewInstance.padding).toEqual([10, 0, 0, 0])
+    })
+
+    it('setPadding with null sets padding to undefined', () => {
+      provider.setPadding(null)
+      expect(mockViewInstance.padding).toBeUndefined()
+    })
+  })
+
+  describe('getter methods', () => {
+    let provider
+
+    beforeEach(async () => {
+      ;({ provider } = makeProvider())
+      await provider.initMap(defaultInitConfig)
+      jest.clearAllMocks()
+    })
+
+    it('getCenter rounds coordinates to 2 decimal places', () => {
+      mockGetCenter.mockReturnValue([400000.126, 300000.455])
+      expect(provider.getCenter()).toEqual([400000.13, 300000.46])
+    })
+
+    it('getZoom delegates to view.getZoom', () => {
+      mockGetZoom.mockReturnValue(9)
+      expect(provider.getZoom()).toBe(9)
+    })
+
+    it('getBounds rounds extent values to 2 decimal places', () => {
+      mockCalculateExtent.mockReturnValue([1.126, 2.456, 3.994, 4.0])
+      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([])
+    })
+
+    it('getResolution delegates to view.getResolution', () => {
+      mockGetResolution.mockReturnValue(28)
+      expect(provider.getResolution()).toBe(28)
+    })
+  })
+
+  describe('spatial helper methods', () => {
+    let provider
+
+    beforeEach(async () => {
+      ;({ provider } = makeProvider())
+      await provider.initMap(defaultInitConfig)
+      jest.clearAllMocks()
+    })
+
+    it('getAreaDimensions delegates to spatial utils', () => {
+      expect(provider.getAreaDimensions()).toBe('1 mile by 2 miles')
+    })
+
+    it('getCardinalMove delegates to spatial utils', () => {
+      expect(provider.getCardinalMove([0, 0], [100, 100])).toBe('north 100m')
+    })
+
+    it('mapToScreen returns pixel as {x, y}', () => {
+      mockMapGetPixel.mockReturnValue([150, 250])
+      expect(provider.mapToScreen([400000, 300000])).toEqual({ x: 150, y: 250 })
+    })
+
+    it('mapToScreen returns {0, 0} when getPixelFromCoordinate returns null', () => {
+      mockMapGetPixel.mockReturnValue(null)
+      expect(provider.mapToScreen([400000, 300000])).toEqual({ x: 0, y: 0 })
+    })
+
+    it('mapToScreen returns {0, 0} when map is not set', () => {
+      provider.map = null
+      expect(provider.mapToScreen([400000, 300000])).toEqual({ x: 0, y: 0 })
+    })
+
+    it('screenToMap delegates to map.getCoordinateFromPixel', () => {
+      mockMapGetCoord.mockReturnValue([400000, 300000])
+      expect(provider.screenToMap({ x: 100, y: 200 })).toEqual([400000, 300000])
+      expect(mockMapGetCoord).toHaveBeenCalledWith([100, 200])
+    })
+
+    it('isGeometryObscured delegates to spatial utils with map instance', () => {
+      const geojson = { type: 'Point', coordinates: [0, 51] }
+      const panelRect = { left: 0, top: 0, right: 100, bottom: 100 }
+      provider.isGeometryObscured(geojson, panelRect)
+      expect(isGeometryObscured).toHaveBeenCalledWith(geojson, panelRect, mockMapInstance)
+    })
+  })
+})

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

@@ -0,0 +1,142 @@
+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.
+ * GeoJSON coords are expected in WGS84; they are transformed to EPSG:27700 for screen projection.
+ */
+const isGeometryObscured = (geojson, panelRect, map) => {
+  const containerRect = map.getTargetElement().getBoundingClientRect()
+  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 = Math.min(...corners.map(c => c[0]))
+  const screenMaxX = Math.max(...corners.map(c => c[0]))
+  const screenMinY = Math.min(...corners.map(c => c[1]))
+  const screenMaxY = Math.max(...corners.map(c => c[1]))
+
+  const panelLeft = panelRect.left - containerRect.left
+  const panelTop = panelRect.top - containerRect.top
+  const panelRight = panelRect.right - containerRect.left
+  const panelBottom = panelRect.bottom - containerRect.top
+
+  return (
+    screenMinX < panelRight &&
+    screenMaxX > panelLeft &&
+    screenMinY < panelBottom &&
+    screenMaxY > panelTop
+  )
+}
+
+export {
+  getAreaDimensions,
+  getCardinalMove,
+  getBboxFromGeoJSON,
+  getExtentFromGeoJSON,
+  getPaddedExtent,
+  isGeometryObscured,
+  formatDimension
+}