@defra/interactive-map 0.0.4-alpha → 0.0.5-alpha

package/plugins/beta/datasets/src/datasets.js

@@ -1,5 +1,6 @@
 import { handleSetMapStyle } from './handleSetMapStyle.js'
-import { addMapLayers, getSourceId, getLayersUsingSource } from './mapLayers.js'
+import { addMapLayers, getSourceId, getLayersUsingSource, isDynamicSource, updateSourceData } from './mapLayers.js'
+import { createDynamicSource } from './fetch/createDynamicSource.js'
 
 export const createDatasets = ({
   pluginConfig,
@@ -12,12 +13,27 @@ export const createDatasets = ({
   const { map } = mapProvider
   const { datasets } = pluginConfig
 
+  // Track dynamic sources for cleanup
+  const dynamicSources = new Map()
+
   const getDatasets = () => pluginStateRef.current.datasets || datasets
   const getHiddenFeatures = () => pluginStateRef.current.hiddenFeatures || {}
 
   // Initialize all datasets once
   datasets.forEach(dataset => {
     addMapLayers(map, mapStyleId, dataset)
+
+    // Initialize dynamic source if applicable
+    if (isDynamicSource(dataset)) {
+      const sourceId = getSourceId(dataset)
+      const dynamicSource = createDynamicSource({
+        dataset,
+        map,
+        sourceId,
+        onUpdate: (id, geojson) => updateSourceData(map, id, geojson)
+      })
+      dynamicSources.set(dataset.id, dynamicSource)
+    }
   })
 
   // Emit ready event once map has processed the layers
@@ -31,13 +47,18 @@ export const createDatasets = ({
     events,
     eventBus,
     getDatasets,
-    getHiddenFeatures
+    getHiddenFeatures,
+    getDynamicSources: () => dynamicSources
   })
 
   return {
     remove() {
       eventBus.off(events.MAP_SET_STYLE, styleHandler)
 
+      // Clean up dynamic sources
+      dynamicSources.forEach(source => source.destroy())
+      dynamicSources.clear()
+
       const allDatasets = getDatasets()
       const removedSourceIds = new Set()
 
@@ -55,6 +76,38 @@ export const createDatasets = ({
           removedSourceIds.add(sourceId)
         }
       })
+    },
+
+    /**
+     * Refresh a dynamic source - clears cache and re-fetches
+     * @param {string} datasetId - Dataset ID to refresh
+     */
+    refreshDataset(datasetId) {
+      const dynamicSource = dynamicSources.get(datasetId)
+      if (dynamicSource) {
+        dynamicSource.refresh()
+      }
+    },
+
+    /**
+     * Clear a dynamic source's cache
+     * @param {string} datasetId - Dataset ID to clear
+     */
+    clearDatasetCache(datasetId) {
+      const dynamicSource = dynamicSources.get(datasetId)
+      if (dynamicSource) {
+        dynamicSource.clear()
+      }
+    },
+
+    /**
+     * Get feature count for a dynamic source
+     * @param {string} datasetId - Dataset ID
+     * @returns {number|null} Feature count or null if not a dynamic source
+     */
+    getFeatureCount(datasetId) {
+      const dynamicSource = dynamicSources.get(datasetId)
+      return dynamicSource ? dynamicSource.getFeatureCount() : null
     }
   }
 }

package/plugins/beta/datasets/src/fetch/createDynamicSource.js

@@ -0,0 +1,206 @@
+import { fetchGeoJSON } from './fetchGeoJSON.js'
+import { getBboxArray, bboxContains, expandBbox, bboxIntersects, getGeometryBbox } from '../utils/bbox.js'
+import { debounce } from '../utils/debounce.js'
+
+const DEBOUNCE_DELAY = 200
+const EVICTION_THRESHOLD = 1.2 // Trigger eviction at 120% of maxFeatures
+
+/**
+ * Create a dynamic GeoJSON source that fetches data based on viewport
+ * @param {Object} options
+ * @param {Object} options.dataset - Dataset configuration
+ * @param {Object} options.map - Map instance
+ * @param {string} options.sourceId - Source ID for the map
+ * @param {Function} options.onUpdate - Callback when source data should be updated
+ * @returns {Object} { destroy, clear, refresh }
+ */
+export const createDynamicSource = ({ dataset, map, sourceId, onUpdate }) => {
+  const { geojson: baseUrl, idProperty, transformRequest, maxFeatures, minZoom = 0 } = dataset
+
+  // Feature cache: id → { feature, bbox, addedAt }
+  const features = new Map()
+
+  // Track the bbox we've fetched data for
+  let fetchedBbox = null
+
+  // Loading state
+  let isLoading = false
+
+  /**
+   * Convert features Map to FeatureCollection
+   */
+  const toFeatureCollection = () => ({
+    type: 'FeatureCollection',
+    features: Array.from(features.values()).map(entry => entry.feature)
+  })
+
+  /**
+   * Get feature ID from a feature
+   */
+  const getFeatureId = (feature) => {
+    if (idProperty) {
+      return feature.properties?.[idProperty] ?? feature.id
+    }
+    return feature.id
+  }
+
+  /**
+   * Evict features that are outside the current viewport
+   * Uses "least recently visible" strategy - evicts features furthest from viewport first
+   */
+  const evictIfNeeded = (currentBbox) => {
+    if (!maxFeatures || features.size <= maxFeatures * EVICTION_THRESHOLD) {
+      return
+    }
+
+    const targetSize = maxFeatures
+
+    // Partition features: in-viewport vs out-of-viewport
+    const inView = []
+    const outOfView = []
+
+    for (const [id, data] of features) {
+      if (bboxIntersects(data.bbox, currentBbox)) {
+        inView.push(id)
+      } else {
+        outOfView.push({ id, addedAt: data.addedAt })
+      }
+    }
+
+    // Sort out-of-view by insertion time (oldest first)
+    outOfView.sort((a, b) => a.addedAt - b.addedAt)
+
+    // Evict oldest out-of-view features until under target
+    const toEvict = features.size - targetSize
+    for (let i = 0; i < toEvict && i < outOfView.length; i++) {
+      features.delete(outOfView[i].id)
+    }
+
+    // If still over target (viewport has too many), evict oldest in-view
+    if (features.size > targetSize) {
+      const remaining = features.size - targetSize
+      const inViewSorted = inView
+        .map(id => ({ id, addedAt: features.get(id).addedAt }))
+        .sort((a, b) => a.addedAt - b.addedAt)
+
+      for (let i = 0; i < remaining && i < inViewSorted.length; i++) {
+        features.delete(inViewSorted[i].id)
+      }
+    }
+  }
+
+  /**
+   * Fetch data for the current viewport
+   */
+  const fetchData = async () => {
+    const zoom = map.getZoom()
+    if (zoom < minZoom) {
+      return
+    }
+
+    const currentBbox = getBboxArray(map)
+
+    // Skip if current viewport is already covered
+    if (fetchedBbox && bboxContains(fetchedBbox, currentBbox)) {
+      return
+    }
+
+    if (isLoading) {
+      return
+    }
+
+    isLoading = true
+
+    try {
+      const context = { bbox: currentBbox, zoom, dataset }
+      const data = await fetchGeoJSON(baseUrl, context, transformRequest)
+
+      const now = Date.now()
+
+      // Add/update features with deduplication
+      data.features.forEach(feature => {
+        const id = getFeatureId(feature)
+        if (id == null) {
+          console.warn('Feature missing ID, skipping:', feature)
+          return
+        }
+
+        features.set(id, {
+          feature,
+          bbox: getGeometryBbox(feature.geometry),
+          addedAt: features.has(id) ? features.get(id).addedAt : now
+        })
+      })
+
+      // Expand tracked bbox
+      fetchedBbox = expandBbox(fetchedBbox, currentBbox)
+
+      // Evict if over limit
+      evictIfNeeded(currentBbox)
+
+      // Update map source
+      onUpdate(sourceId, toFeatureCollection())
+    } catch (error) {
+      console.error(`Failed to fetch dynamic GeoJSON for ${dataset.id}:`, error)
+    } finally {
+      isLoading = false
+    }
+  }
+
+  // Debounced fetch handler
+  const debouncedFetch = debounce(fetchData, DEBOUNCE_DELAY)
+
+  // Listen for map movements
+  const handleMoveEnd = () => {
+    debouncedFetch()
+  }
+
+  map.on('moveend', handleMoveEnd)
+
+  // Initial fetch
+  fetchData()
+
+  return {
+    /**
+     * Clean up event listeners
+     */
+    destroy() {
+      map.off('moveend', handleMoveEnd)
+      debouncedFetch.cancel()
+    },
+
+    /**
+     * Clear all cached features and reset fetch tracking
+     */
+    clear() {
+      features.clear()
+      fetchedBbox = null
+      onUpdate(sourceId, { type: 'FeatureCollection', features: [] })
+    },
+
+    /**
+     * Force refresh - clear cache and fetch current viewport
+     */
+    refresh() {
+      features.clear()
+      fetchedBbox = null
+      fetchData()
+    },
+
+    /**
+     * Get current feature count
+     */
+    getFeatureCount() {
+      return features.size
+    },
+
+    /**
+     * Re-push cached features to the source (e.g., after style change)
+     */
+    reapply() {
+      if (features.size > 0) {
+        onUpdate(sourceId, toFeatureCollection())
+      }
+    }
+  }
+}

package/plugins/beta/datasets/src/fetch/fetchGeoJSON.js

@@ -0,0 +1,38 @@
+/**
+ * Fetch GeoJSON from URL with transformRequest
+ * @param {string} baseUrl - Base URL for the GeoJSON endpoint
+ * @param {Object} context - { bbox, zoom, dataset }
+ * @param {Function} transformRequest - Function to transform the request (builds URL with bbox, adds headers)
+ * @returns {Promise<Object>} GeoJSON FeatureCollection
+ */
+export const fetchGeoJSON = async (baseUrl, context, transformRequest) => {
+  const result = transformRequest(baseUrl, context)
+
+  // Handle both string and object return values
+  const config = typeof result === 'string' ? { url: result } : result
+  const { url, headers = {} } = config
+
+  const response = await fetch(url, { headers })
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch GeoJSON: ${response.status} ${response.statusText}`)
+  }
+
+  const data = await response.json()
+
+  // Ensure we have a FeatureCollection
+  if (data.type === 'FeatureCollection') {
+    return data
+  }
+
+  // Wrap single feature or array of features
+  if (data.type === 'Feature') {
+    return { type: 'FeatureCollection', features: [data] }
+  }
+
+  if (Array.isArray(data)) {
+    return { type: 'FeatureCollection', features: data }
+  }
+
+  throw new Error('Invalid GeoJSON response')
+}

package/plugins/beta/datasets/src/handleSetMapStyle.js

@@ -6,19 +6,26 @@ export const handleSetMapStyle = ({
   events,
   eventBus,
   getDatasets,
-  getHiddenFeatures
+  getHiddenFeatures,
+  getDynamicSources
 }) => {
   const onSetStyle = (e) => {
     map.once('idle', () => {
       const newStyleId = e.id
       const datasets = getDatasets()
       const hiddenFeatures = getHiddenFeatures()
+      const dynamicSources = getDynamicSources ? getDynamicSources() : new Map()
 
       // Re-add all layers with correct colors for new style
       datasets.forEach(dataset => {
         addMapLayers(map, newStyleId, dataset)
       })
 
+      // Reapply cached data for dynamic sources
+      dynamicSources.forEach(source => {
+        source.reapply()
+      })
+
       // Reapply hidden features filters
       Object.entries(hiddenFeatures).forEach(([datasetId, { idProperty, ids }]) => {
         const dataset = datasets.find(d => d.id === datasetId)

package/plugins/beta/datasets/src/mapLayers.js

@@ -18,6 +18,10 @@ const getSourceId = (dataset) => {
     return `tiles-${hashString(tilesKey)}`
   }
   if (dataset.geojson) {
+    // Dynamic sources get unique IDs per dataset (no sharing)
+    if (isDynamicSource(dataset)) {
+      return `geojson-dynamic-${dataset.id}`
+    }
     // URL strings can be shared, inline GeoJSON objects get unique IDs per dataset
     if (typeof dataset.geojson === 'string') {
       return `geojson-${hashString(dataset.geojson)}`
@@ -29,6 +33,33 @@ const getSourceId = (dataset) => {
   return `source-${dataset.id}`
 }
 
+/**
+ * Check if a dataset uses dynamic fetching (bbox-based)
+ * Dynamic sources require: URL geojson, idProperty for deduplication, and transformRequest for URL building
+ * @param {Object} dataset
+ * @returns {boolean}
+ */
+const isDynamicSource = (dataset) => {
+  return (
+    typeof dataset.geojson === 'string' &&
+    !!dataset.idProperty &&
+    typeof dataset.transformRequest === 'function'
+  )
+}
+
+/**
+ * Update the data for a GeoJSON source
+ * @param {Object} map - Map instance
+ * @param {string} sourceId - Source ID
+ * @param {Object} geojson - GeoJSON FeatureCollection
+ */
+const updateSourceData = (map, sourceId, geojson) => {
+  const source = map.getSource(sourceId)
+  if (source && typeof source.setData === 'function') {
+    source.setData(geojson)
+  }
+}
+
 /**
  * Get all layer IDs that use a given source
  * @param {string} sourceId
@@ -60,10 +91,15 @@ const addMapLayers = (map, mapStyleId, dataset) => {
         maxzoom: dataset.maxZoom || 22
       })
     } else if (dataset.geojson) {
-      // GeoJSON URL
+      // Dynamic source - start with empty FeatureCollection, will be populated by createDynamicSource
+      // Static source - use URL or inline GeoJSON directly
+      const initialData = isDynamicSource(dataset)
+        ? { type: 'FeatureCollection', features: [] }
+        : dataset.geojson
+
       map.addSource(sourceId, {
         type: 'geojson',
-        data: dataset.geojson
+        data: initialData
       })
     } else {
       // No action
@@ -123,5 +159,7 @@ const addMapLayers = (map, mapStyleId, dataset) => {
 export {
   getSourceId,
   getLayersUsingSource,
-  addMapLayers
+  addMapLayers,
+  isDynamicSource,
+  updateSourceData
 }

package/plugins/beta/datasets/src/utils/bbox.js

@@ -1,4 +1,115 @@
-export const getBbox = (map) => {
+/**
+ * Get bbox from map as array [west, south, east, north]
+ * @param {Object} map - Map instance
+ * @returns {number[]} bbox as [west, south, east, north]
+ */
+export const getBboxArray = (map) => {
   const bounds = map.getBounds()
-  return `${bounds.getWest()},${bounds.getSouth()},${bounds.getEast()},${bounds.getNorth()}`
+  return [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()]
+}
+
+/**
+ * Check if inner bbox is fully contained within outer bbox
+ * @param {number[]} outer - [west, south, east, north]
+ * @param {number[]} inner - [west, south, east, north]
+ * @returns {boolean}
+ */
+export const bboxContains = (outer, inner) => {
+  if (!outer || !inner) {
+    return false
+  }
+  return (
+    inner[0] >= outer[0] && // west
+    inner[1] >= outer[1] && // south
+    inner[2] <= outer[2] && // east
+    inner[3] <= outer[3]    // north
+  )
+}
+
+/**
+ * Expand bbox to include another bbox
+ * @param {number[]|null} existing - Current bbox or null
+ * @param {number[]} addition - Bbox to include
+ * @returns {number[]} Expanded bbox
+ */
+export const expandBbox = (existing, addition) => {
+  if (!existing) {
+    return [...addition]
+  }
+  return [
+    Math.min(existing[0], addition[0]), // west
+    Math.min(existing[1], addition[1]), // south
+    Math.max(existing[2], addition[2]), // east
+    Math.max(existing[3], addition[3])  // north
+  ]
+}
+
+/**
+ * Check if two bboxes intersect
+ * @param {number[]} a - [west, south, east, north]
+ * @param {number[]} b - [west, south, east, north]
+ * @returns {boolean}
+ */
+export const bboxIntersects = (a, b) => {
+  if (!a || !b) {
+    return false
+  }
+  return !(
+    a[2] < b[0] || // a is left of b
+    a[0] > b[2] || // a is right of b
+    a[3] < b[1] || // a is below b
+    a[1] > b[3]    // a is above b
+  )
+}
+
+/**
+ * Get bbox from a GeoJSON geometry
+ * @param {Object} geometry - GeoJSON geometry
+ * @returns {number[]} bbox as [west, south, east, north]
+ */
+export const getGeometryBbox = (geometry) => {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
+
+  const processCoord = (coord) => {
+    minX = Math.min(minX, coord[0])
+    minY = Math.min(minY, coord[1])
+    maxX = Math.max(maxX, coord[0])
+    maxY = Math.max(maxY, coord[1])
+  }
+
+  const processCoords = (coords, depth) => {
+    if (depth === 0) {
+      processCoord(coords)
+    } else {
+      coords.forEach(c => processCoords(c, depth - 1))
+    }
+  }
+
+  switch (geometry.type) {
+    case 'Point':
+      processCoords(geometry.coordinates, 0)
+      break
+    case 'LineString':
+    case 'MultiPoint':
+      processCoords(geometry.coordinates, 1)
+      break
+    case 'Polygon':
+    case 'MultiLineString':
+      processCoords(geometry.coordinates, 2)
+      break
+    case 'MultiPolygon':
+      processCoords(geometry.coordinates, 3)
+      break
+    case 'GeometryCollection':
+      geometry.geometries.forEach(g => {
+        const b = getGeometryBbox(g)
+        minX = Math.min(minX, b[0])
+        minY = Math.min(minY, b[1])
+        maxX = Math.max(maxX, b[2])
+        maxY = Math.max(maxY, b[3])
+      })
+      break
+  }
+
+  return [minX, minY, maxX, maxY]
 }

package/plugins/beta/draw-ml/dist/css/index.css

@@ -1 +1 @@
-.touch-vertex-target circle{fill:var(--map-overlay-foreground-color)}.touch-vertex-target path{fill:var(--map-overlay-halo-color)}
+.touch-vertex-target circle{fill:var(--map-overlay-foreground-color)}.touch-vertex-target path{fill:var(--map-overlay-halo-color)}.im-c-actions .im-c-button-wrapper--draw-done,.im-c-actions .im-c-button-wrapper--draw-menu,.im-c-actions .im-c-button-wrapper--draw-cancel{width:33.33%}.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-done,.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-menu,.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-cancel,.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-done,.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-menu,.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-cancel{width:100px}.im-c-button-wrapper--draw-add-point{position:absolute;bottom:calc(100% + var(--primary-gap))}