@defra/forms-engine-plugin 4.2.0 → 4.4.0

package/src/client/javascripts/geospatial-map.js

@@ -0,0 +1,1023 @@
+import { bbox } from '@turf/bbox'
+
+import {
+  EVENTS,
+  createMap,
+  defaultConfig,
+  getCentroidGridRef,
+  getCoordinateGridRef
+} from '~/src/client/javascripts/map.js'
+
+const helpPanelConfig = {
+  showLabel: true,
+  label: 'How to use this map',
+  mobile: {
+    slot: 'bottom',
+    open: true,
+    dismissible: true,
+    modal: false
+  },
+  tablet: {
+    slot: 'bottom',
+    open: true,
+    dismissible: true,
+    modal: false
+  },
+  desktop: {
+    slot: 'bottom',
+    open: true,
+    dismissible: true,
+    modal: false
+  },
+  html: '<p class="govuk-body-s govuk-!-margin-bottom-2">You can add points, shapes or lines to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Add a point or click \'Done\' when you have finished drawing a line or shape</li><li>Give the location a name</li></ul>'
+}
+
+const lineFeatureProperties = {
+  stroke: 'rgba(0, 11, 112, 1)',
+  fill: 'rgba(0, 11, 112, 0.2)',
+  strokeWidth: 2
+}
+
+const polygonFeatureProperties = {
+  stroke: 'rgba(0,112,60,1)',
+  fill: 'rgba(0,112,60,0.2)',
+  strokeWidth: 2
+}
+
+/**
+ * @type {Record<'Point' | 'LineString' | 'Polygon', string>}
+ */
+const typeDescriptions = {
+  Point: 'Point',
+  LineString: 'Line',
+  Polygon: 'Shape'
+}
+
+const POINT_SVG =
+  '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" />'
+const POLYGON_SVG =
+  '<path d="M19.5 7v10M4.5 7v10M7 19.5h10M7 4.5h10"/><path d="M22 18v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zm0-15v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 18v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1zM7 3v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1z"/>'
+const LINE_SVG =
+  '<path d="M5.706 16.294L16.294 5.706"/><path d="M21 2v3c0 .549-.451 1-1 1h-3c-.549 0-1-.451-1-1V2c0-.549.451-1 1-1h3c.549 0 1 .451 1 1zM6 17v3c0 .549-.451 1-1 1H2c-.549 0-1-.451-1-1v-3c0-.549.451-1 1-1h3c.549 0 1 .451 1 1z"/>'
+
+/**
+ * Extract and parses the GeoJSON from the textarea
+ * @param {HTMLTextAreaElement} geospatialInput - the textarea containing the geojson
+ */
+export function getGeoJSON(geospatialInput) {
+  const value = geospatialInput.value.trim()
+  const hasValue = !!value
+
+  /** @type {FeatureCollection} */
+  const features = hasValue ? JSON.parse(value) : []
+
+  /** @type {GeoJSON} */
+  const geojson = {
+    type: 'FeatureCollection',
+    features
+  }
+
+  return geojson
+}
+
+/**
+ * Gets the bounding box covering a feature collection
+ * @param {GeoJSON} geojson - the geojson
+ */
+export function getBoundingBox(geojson) {
+  return bbox(geojson)
+}
+
+/**
+ * Processes a geospatial field to add map capability
+ * @param {MapsEnvironmentConfig} config - the geospatial field element
+ * @param {Element} geospatial - the geospatial field element
+ * @param {number} index - the 0-based index
+ */
+export function processGeospatial(config, geospatial, index) {
+  // @ts-expect-error - Defra namespace currently comes from UMD support files
+  const defra = window.defra
+
+  if (!(geospatial instanceof HTMLDivElement)) {
+    return
+  }
+
+  const geospatialInput = geospatial.querySelector('.govuk-textarea')
+  if (!(geospatialInput instanceof HTMLTextAreaElement)) {
+    return
+  }
+
+  const { listEl, mapId } = createContainers(geospatialInput, index)
+  const geojson = getGeoJSON(geospatialInput)
+  const bounds = geojson.features.length ? getBoundingBox(geojson) : undefined
+  const drawPlugin = defra.drawMLPlugin()
+
+  const initConfig = {
+    ...defaultConfig,
+    bounds,
+    plugins: [drawPlugin]
+  }
+
+  const { map, interactPlugin } = createMap(mapId, initConfig, config)
+  const featuresManager = getFeaturesManager(geojson)
+  const activeFeatureManager = getActiveFeatureManager()
+  const uiManager = getUIManager(geojson, map, mapId, listEl, geospatialInput)
+
+  /**
+   * @type {Context}
+   */
+  const context = {
+    map,
+    featuresManager,
+    activeFeatureManager,
+    uiManager,
+    interactPlugin,
+    drawPlugin
+  }
+
+  addEventListeners(context)
+}
+
+/**
+ * Adds a feature to the map
+ * @param {Feature} feature - the geojson feature
+ * @param {any} drawPlugin - the map draw plugin
+ * @param {InteractiveMap} map - the interactive map
+ */
+export function addFeatureToMap(feature, drawPlugin, map) {
+  switch (feature.geometry.type) {
+    case 'Polygon':
+      drawPlugin.addFeature({ ...feature, ...polygonFeatureProperties })
+      break
+    case 'LineString':
+      drawPlugin.addFeature({ ...feature, ...lineFeatureProperties })
+      break
+    case 'Point':
+      map.addMarker(feature.id, feature.geometry.coordinates)
+      break
+    default:
+      break
+  }
+}
+
+/**
+ * Returns HTML summary list for the features
+ * @param {FeatureCollection} features - the features
+ * @param {string} mapId - the ID of the map
+ * @param {boolean} [readonly] - render the list in readonly mode
+ */
+export function createFeaturesHTML(features, mapId, readonly = false) {
+  return `<dl class="govuk-summary-list">
+    ${features.map((feature, index) => createFeatureHTML(feature, index, mapId, readonly)).join('\n')}
+  </dl>`
+}
+
+/**
+ * Focus feature
+ * @param {Feature} feature - the feature
+ * @param {MapLibreMap} mapProvider - the feature id
+ */
+export function focusFeature(feature, mapProvider) {
+  mapProvider.fitBounds(bbox(feature))
+}
+
+/**
+ * Returns HTML summary row for an single feature
+ * @param {Feature} feature - the geo feature
+ * @param {number} index - the feature index
+ * @param {string} mapId - the ID of the map
+ * @param {boolean} readonly - render the list item in readonly mode
+ */
+function createFeatureHTML(feature, index, mapId, readonly) {
+  const flattened = feature.geometry.coordinates.flat(2)
+
+  const points = []
+  for (let i = 0; i < flattened.length; i += 2) {
+    points.push(flattened.slice(i, i + 2).join(', '))
+  }
+  const coordinates = points.map((p) => `<li>${p}</li>`).join('')
+
+  const description = readonly
+    ? `<p class="govuk-body govuk-!-margin-bottom-0">${feature.properties.description}</p>`
+    : `<input class="govuk-input govuk-!-width-two-thirds" type="text" id="description_${index}" value="${feature.properties.description}" data-id="${feature.id}">`
+
+  // Change action link
+  const changeAction = () => `<li class="govuk-summary-list__actions-list-item">
+  <a class="govuk-link govuk-link--no-visited-state" href="#${mapId}" data-action="edit" data-id="${feature.id}"
+    data-type="${feature.geometry.type}">Update<span class="govuk-visually-hidden"> location</span></a>
+</li>`
+
+  // Delete action link
+  const deleteAction = () => `<li class="govuk-summary-list__actions-list-item">
+  <a class="govuk-link govuk-link--no-visited-state" href="#" data-action="delete" data-id="${feature.id}"
+    data-type="${feature.geometry.type}">Delete<span class="govuk-visually-hidden"> location</span></a>
+</li>`
+
+  // Focus action link
+  const focusAction = () => `<li class="govuk-summary-list__actions-list-item">
+  <a class="govuk-link govuk-link--no-visited-state" href="#${mapId}" data-action="focus" data-id="${feature.id}">Show<span class="govuk-visually-hidden"> location</span></a>
+</li>`
+
+  const links = readonly ? focusAction() : `${changeAction()}${deleteAction()}`
+
+  const actions = `<ul class="govuk-summary-list__actions-list">${links}</ul>`
+
+  return `<div class="govuk-summary-list__row govuk-summary-list__row--no-border">
+  <dt class="govuk-summary-list__key">
+    <div class="govuk-form-group">
+      <label class="govuk-label govuk-label--s" ${readonly ? '' : `for="description_${index}"`}>Location ${index + 1} description</label>
+      ${description}
+    </div>
+  </dt>
+  <dd class="govuk-summary-list__actions">
+    ${actions}
+  </dd>
+</div>
+<div class="govuk-summary-list__row">
+  <details class="govuk-details govuk-!-margin-bottom-2">
+    <summary class="govuk-details__summary">
+      <span class="govuk-details__summary-text">Coordinates</span>
+    </summary>
+    <div class="govuk-details__text">
+      <dl class="govuk-summary-list">
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">Type</dt>
+          <dd class="govuk-summary-list__value">${typeDescriptions[feature.geometry.type]}</dd>
+        </div>
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">Center grid reference</dt>
+          <dd class="govuk-summary-list__value">${feature.properties.centroidGridReference}</dd>
+        </div>
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">First point grid reference</dt>
+          <dd class="govuk-summary-list__value">${feature.properties.coordinateGridReference}</dd>
+        </div>
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">Detailed coordinates</dt>
+          <dd class="govuk-summary-list__value">
+            <ol class="govuk-list govuk-list--number">${coordinates}</ol>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </details>
+</div>`
+}
+
+/**
+ * Generate a random id
+ */
+function generateID() {
+  return window.crypto.randomUUID()
+}
+
+/**
+ * Factory closure to track the active feature id
+ * @returns {ActiveFeatureManager}
+ */
+function getActiveFeatureManager() {
+  /** @type {string | undefined} */
+  let activeFeature
+
+  /**
+   * Returns the active feature id
+   * @type {GetActiveFeature}
+   */
+  function getActiveFeature() {
+    return activeFeature
+  }
+
+  /**
+   * Sets the active feature id
+   * @type {SetActiveFeature}
+   */
+  function setActiveFeature(id) {
+    activeFeature = id
+  }
+
+  /**
+   * Resets the active feature id
+   * @type {ResetActiveFeature}
+   */
+  function resetActiveFeature() {
+    activeFeature = undefined
+  }
+
+  return {
+    getActiveFeature,
+    setActiveFeature,
+    resetActiveFeature
+  }
+}
+
+/**
+ * Reduce coordinate precision to 7 dps
+ * @param {Feature} feature
+ */
+function prepareGeometry(feature) {
+  const { geometry } = feature
+  const maxPrecision = 7
+
+  /**
+   * @param {Coordinates} coordinates
+   */
+  function formatPrecision(coordinates) {
+    coordinates[0] = +coordinates[0].toFixed(maxPrecision)
+    coordinates[1] = +coordinates[1].toFixed(maxPrecision)
+  }
+
+  if (geometry.type === 'Point') {
+    formatPrecision(geometry.coordinates)
+  } else if (geometry.type === 'LineString') {
+    geometry.coordinates.forEach(formatPrecision)
+  } else {
+    geometry.coordinates.flat().forEach(formatPrecision)
+  }
+}
+
+/**
+ * Factory closure to return a features manager
+ * @param {GeoJSON} geojson
+ * @returns {FeaturesManager}
+ */
+function getFeaturesManager(geojson) {
+  /**
+   * Get a feature from the geojson by id
+   * @type {GetFeatures}
+   */
+  function getFeatures() {
+    return geojson.features
+  }
+
+  /**
+   * Get a feature from the geojson by id
+   * @type {GetFeature}
+   */
+  function getFeature(id) {
+    return geojson.features.find((f) => f.id === id)
+  }
+
+  /**
+   * Add a feature to the geojson
+   * @type {AddFeature}
+   */
+  function addFeature(feature) {
+    feature.properties.coordinateGridReference = getCoordinateGridRef(feature)
+    feature.properties.centroidGridReference = getCentroidGridRef(feature)
+    prepareGeometry(feature)
+
+    geojson.features.push(feature)
+  }
+
+  /**
+   * Updates a feature in the geojson
+   * @type {UpdateFeature}
+   */
+  function updateFeature(id, geometry) {
+    const feature = getFeature(id)
+
+    // Ensure the feature exists in the geojson
+    if (feature) {
+      feature.properties.coordinateGridReference = getCoordinateGridRef(feature)
+      feature.properties.centroidGridReference = getCentroidGridRef(feature)
+      feature.geometry = geometry
+      prepareGeometry(feature)
+    }
+
+    return feature
+  }
+
+  /**
+   * Removes a feature from the geojson
+   * @type {RemoveFeature}
+   */
+  function removeFeature(id) {
+    const idx = geojson.features.findIndex((f) => f.id === id)
+
+    return idx > -1 ? geojson.features.splice(idx, 1) : undefined
+  }
+
+  return {
+    getFeatures,
+    getFeature,
+    addFeature,
+    updateFeature,
+    removeFeature
+  }
+}
+
+/**
+ * Factory to render features into the list and hidden textarea
+ * @param {GeoJSON} geojson - the geojson of features
+ * @param {string} mapId - the ID of the map
+ * @param {HTMLDivElement} listEl - where to render the feature list
+ * @param {Function} renderValue - function that renders the features JSON into the hidden textarea
+ * @returns {RenderList}
+ */
+function getListRenderer(geojson, mapId, listEl, renderValue) {
+  return function renderList() {
+    const html = createFeaturesHTML(geojson.features, mapId)
+
+    listEl.innerHTML = html
+
+    renderValue()
+  }
+}
+
+/**
+ * Factory to render features JSON into the hidden textarea
+ * @param {GeoJSON} geojson - the features
+ * @param {HTMLTextAreaElement} geospatialInput - the geospatial textarea
+ * @returns {RenderValue}
+ */
+function getValueRenderer(geojson, geospatialInput) {
+  return function renderValue() {
+    geospatialInput.value = JSON.stringify(geojson.features, null, 2)
+  }
+}
+
+/**
+ * Factory closure to manage the UI
+ * @param {GeoJSON} geojson - the features
+ * @param {InteractiveMap} map - the map
+ * @param {string} mapId - the ID of the map
+ * @param {HTMLDivElement} listEl - where to render the feature list
+ * @param {HTMLTextAreaElement} geospatialInput - the geospatial textarea
+ */
+function getUIManager(geojson, map, mapId, listEl, geospatialInput) {
+  /**
+   * Toggle the hidden state of the action buttons
+   * @type {ToggleActionButtons}
+   */
+  function toggleActionButtons(hidden) {
+    map.toggleButtonState('btnAddPoint', 'hidden', hidden)
+    map.toggleButtonState('btnAddPolygon', 'hidden', hidden)
+    map.toggleButtonState('btnAddLine', 'hidden', hidden)
+  }
+
+  /**
+   * Set focus to the last description input
+   * @type {FocusDescriptionInput}
+   */
+  function focusDescriptionInput() {
+    const inputs = listEl.querySelectorAll('input')
+    if (inputs.length) {
+      const lastInput = /** @type {HTMLInputElement} */ inputs.item(
+        inputs.length - 1
+      )
+      lastInput.focus()
+      lastInput.select()
+    }
+  }
+
+  const renderValue = getValueRenderer(geojson, geospatialInput)
+  const renderList = getListRenderer(geojson, mapId, listEl, renderValue)
+
+  /** @type {UIManager} */
+  return {
+    renderList,
+    renderValue,
+    listEl,
+    toggleActionButtons,
+    focusDescriptionInput
+  }
+}
+
+/**
+ * Setup the UI event listeners
+ * @param {Context} context - the context
+ */
+function addEventListeners(context) {
+  const { map } = context
+
+  map.on(EVENTS.mapReady, onMapReadyFactory(context))
+}
+
+/**
+ * Create the map and list containers and adds them to the DOM
+ * @param {HTMLTextAreaElement} geospatialInput - the textarea containing the geojson
+ * @param {number} index - the 0 based index
+ */
+function createContainers(geospatialInput, index) {
+  const mapEl = document.createElement('div')
+  const mapId = `geospatialmap_${index}`
+
+  mapEl.setAttribute('id', mapId)
+  mapEl.setAttribute('class', 'map-container')
+
+  const listEl = document.createElement('div')
+  const listId = `${mapId}_list`
+  listEl.setAttribute('id', listId)
+
+  geospatialInput.after(mapEl)
+  mapEl.after(listEl)
+  geospatialInput.classList.add('js-hidden')
+
+  return { mapEl, listEl, mapId }
+}
+
+/**
+ * Callback factory function which fires when the map is ready
+ * @param {Context} context - the UI context
+ */
+function onMapReadyFactory(context) {
+  const { map, activeFeatureManager, uiManager, interactPlugin, drawPlugin } =
+    context
+  const { toggleActionButtons } = uiManager
+  const { resetActiveFeature } = activeFeatureManager
+
+  /**
+   * Callback function which fires when the map is ready
+   * @param {object} e - the event
+   * @param {MapLibreMap} e.map - the map provider instance
+   */
+  return function onMapReady(e) {
+    // Add info panel
+    map.addPanel('info', helpPanelConfig)
+
+    map.addButton('btnAddPoint', {
+      variant: 'tertiary',
+      label: 'Add point',
+      iconSvgContent: POINT_SVG,
+      onClick: () => {
+        resetActiveFeature()
+        toggleActionButtons(true)
+        interactPlugin.enable()
+      },
+      mobile: { slot: 'actions' },
+      tablet: { slot: 'actions' },
+      desktop: { slot: 'actions' }
+    })
+
+    map.addButton('btnAddPolygon', {
+      variant: 'tertiary',
+      label: 'Add shape',
+      iconSvgContent: POLYGON_SVG,
+      onClick: () => {
+        resetActiveFeature()
+        toggleActionButtons(true)
+        drawPlugin.newPolygon(generateID(), polygonFeatureProperties)
+      },
+      mobile: { slot: 'actions' },
+      tablet: { slot: 'actions' },
+      desktop: { slot: 'actions' }
+    })
+
+    map.addButton('btnAddLine', {
+      variant: 'tertiary',
+      label: 'Add line',
+      iconSvgContent: LINE_SVG,
+      onClick: () => {
+        resetActiveFeature()
+        toggleActionButtons(true)
+        drawPlugin.newLine(generateID(), lineFeatureProperties)
+      },
+      mobile: { slot: 'actions' },
+      tablet: { slot: 'actions' },
+      desktop: { slot: 'actions' }
+    })
+
+    // Set the map provider on the context
+    context.mapProvider = e.map
+
+    map.on(EVENTS.drawReady, onDrawReadyFactory(context))
+    map.on(EVENTS.drawCreated, onDrawCreatedFactory(context))
+    map.on(EVENTS.drawEdited, onDrawEditedFactory(context))
+    map.on(EVENTS.drawCancelled, onDrawCancelledFactory(context))
+    map.on(EVENTS.interactMarkerChange, onInteractMarkerChangedFactory(context))
+
+    const { listEl } = uiManager
+    listEl.addEventListener('click', onListElClickFactory(context), false)
+    listEl.addEventListener('change', onListElChangeFactory(context), false)
+  }
+}
+
+/**
+ * Callback factory function which fires when the map draw plugin is ready
+ * @param {Context} context - the UI context
+ */
+function onDrawReadyFactory(context) {
+  const { featuresManager, uiManager, drawPlugin, map } = context
+  const { renderList } = uiManager
+  const { getFeatures } = featuresManager
+
+  /**
+   * Callback when the draw plugin is ready
+   */
+  return function onDrawReady() {
+    getFeatures().forEach((feature) =>
+      addFeatureToMap(feature, drawPlugin, map)
+    )
+
+    // Update the features
+    renderList()
+  }
+}
+
+/**
+ * Callback factory function which fires when the map draw plugin creates a new feature
+ * @param {Context} context - the UI context
+ */
+function onDrawCreatedFactory(context) {
+  const { featuresManager, uiManager } = context
+  const { addFeature } = featuresManager
+  const { renderList, toggleActionButtons, focusDescriptionInput } = uiManager
+
+  /**
+   * Callback when a draw feature has been created
+   * @param {Feature} e
+   */
+  return function onDrawCreated(e) {
+    // New feature
+    addFeature({
+      ...e,
+      properties: {
+        description: ''
+      }
+    })
+
+    // Update the features
+    renderList()
+    toggleActionButtons(false)
+    focusDescriptionInput()
+  }
+}
+
+/**
+ * Callback factory function which fires when the map draw plugin edits a feature
+ * @param {Context} context - the UI context
+ */
+function onDrawEditedFactory(context) {
+  const { featuresManager, activeFeatureManager, uiManager } = context
+  const { updateFeature } = featuresManager
+  const { getActiveFeature, resetActiveFeature } = activeFeatureManager
+  const { renderList, toggleActionButtons } = uiManager
+
+  /**
+   * Callback when a draw feature has been edited
+   * @param {{ id: string, geometry: Geometry }} e
+   */
+  return function onDrawEdited(e) {
+    const changedFeature = e
+    const featureId = changedFeature.id
+
+    if (getActiveFeature() === featureId) {
+      updateFeature(featureId, changedFeature.geometry)
+
+      // Update the features
+      renderList()
+    }
+
+    resetActiveFeature()
+    toggleActionButtons(false)
+  }
+}
+
+/**
+ * Callback factory function which fires when the map draw plugin cancels the editing of a feature
+ * @param {Context} context - the UI context
+ */
+function onDrawCancelledFactory(context) {
+  const { uiManager, activeFeatureManager } = context
+  const { toggleActionButtons } = uiManager
+  const { resetActiveFeature } = activeFeatureManager
+
+  /**
+   * Callback when a draw feature has been cancelled
+   */
+  return function onDrawCancelled() {
+    toggleActionButtons(false)
+    resetActiveFeature()
+  }
+}
+
+/**
+ * Callback factory function that fires when an interact marker has been changed
+ * @param {Context} context - the UI context
+ */
+function onInteractMarkerChangedFactory(context) {
+  const {
+    featuresManager,
+    activeFeatureManager,
+    map,
+    interactPlugin,
+    uiManager
+  } = context
+  const { addFeature, updateFeature } = featuresManager
+  const { getActiveFeature, resetActiveFeature } = activeFeatureManager
+  const { renderList, focusDescriptionInput, toggleActionButtons } = uiManager
+
+  /**
+   * Callback when an interact marker has been changed
+   * @param {{ coords: Coordinates }} e
+   */
+  return function onInteractMarkerChange(e) {
+    const activeFeatureId = getActiveFeature()
+
+    if (activeFeatureId) {
+      // Editing an existing point
+      const feature = updateFeature(activeFeatureId, {
+        type: 'Point',
+        coordinates: e.coords
+      })
+
+      map.addMarker(activeFeatureId, e.coords)
+
+      if (feature) {
+        // Update the features
+        renderList()
+      }
+
+      resetActiveFeature()
+    } else {
+      // Adding a new point
+      const id = generateID()
+      addFeature({
+        type: 'Feature',
+        properties: {
+          description: ''
+        },
+        geometry: {
+          type: 'Point',
+          coordinates: e.coords
+        },
+        id
+      })
+
+      map.addMarker(id, e.coords)
+
+      // Update the features
+      renderList()
+
+      focusDescriptionInput()
+    }
+    map.removeMarker('location')
+
+    interactPlugin.disable()
+    toggleActionButtons(false)
+  }
+}
+
+/**
+ * Callback factory function that fires a 'click' event is fired on the list container
+ * @param {Context} context - the UI context
+ */
+function onListElClickFactory(context) {
+  const {
+    map,
+    mapProvider,
+    featuresManager,
+    activeFeatureManager,
+    interactPlugin,
+    uiManager,
+    drawPlugin
+  } = context
+  const { getFeature, removeFeature } = featuresManager
+  const { getActiveFeature, setActiveFeature } = activeFeatureManager
+  const { renderList, toggleActionButtons } = uiManager
+
+  /**
+   * Delete a feature
+   * @param {string} id - the feature id
+   * @param {string} type - the feature type
+   */
+  function deleteFeature(id, type) {
+    if (type === 'Point') {
+      map.removeMarker(id)
+      removeFeature(id)
+    } else {
+      drawPlugin.deleteFeature(id)
+      removeFeature(id)
+    }
+
+    renderList()
+  }
+
+  /**
+   * Start editing feature
+   * @param {string} id - the feature id
+   * @param {string} type - the feature type
+   */
+  function editFeature(id, type) {
+    setActiveFeature(id)
+
+    // "Change" feature link was clicked
+    if (type === 'Point') {
+      interactPlugin.selectFeature({ featureId: id })
+      interactPlugin.enable()
+    } else {
+      drawPlugin.editFeature(id)
+    }
+
+    const feature = getFeature(id)
+    if (feature && mapProvider) {
+      focusFeature(feature, mapProvider)
+    }
+
+    toggleActionButtons(true)
+  }
+
+  /**
+   * List container delegated 'click' events handler
+   * @param {MouseEvent} e
+   */
+  return function (e) {
+    const target = e.target
+
+    if (!(target instanceof HTMLElement)) {
+      return
+    }
+
+    if (getActiveFeature()) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+
+    if (
+      target.tagName === 'A' &&
+      target.dataset.action &&
+      target.dataset.id &&
+      target.dataset.type
+    ) {
+      const { action, id, type } = target.dataset
+
+      if (action === 'edit') {
+        // "Update" feature link was clicked
+        editFeature(id, type)
+      } else {
+        e.preventDefault()
+        e.stopPropagation()
+
+        if (action === 'delete') {
+          // "Remove" feature link was clicked
+          deleteFeature(id, type)
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Callback factory function that fires a 'change' event is fired on the list container
+ * @param {Context} context - the UI context
+ */
+function onListElChangeFactory(context) {
+  const { featuresManager, uiManager } = context
+  const { getFeature } = featuresManager
+  const { renderValue } = uiManager
+
+  /**
+   * List container delegated 'change' events handler
+   * Used to update the description of features
+   * @param {Event} e
+   */
+  return function (e) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const target = e.target
+    if (!(target instanceof HTMLInputElement) || !target.dataset.id) {
+      return
+    }
+
+    const { id } = target.dataset
+    const feature = getFeature(id)
+
+    if (feature) {
+      feature.properties.description = target.value.trim()
+      renderValue()
+    }
+  }
+}
+
+/**
+ * @import { MapsEnvironmentConfig, InteractiveMap } from '~/src/client/javascripts/map.js'
+ */
+
+/**
+ * @import { Geometry, FeatureCollection, Feature, Coordinates } from '~/src/server/plugins/engine/types.js'
+ */
+
+/**
+ * @typedef {object} GeoJSON
+ * @property {'FeatureCollection'} type - the GeoJSON type string
+ * @property {FeatureCollection} features - the features
+ */
+
+/**
+ * Gets all the features
+ * @callback GetFeatures
+ * @returns {FeatureCollection}
+ */
+
+/**
+ * Gets a feature from the geojson by id
+ * @callback GetFeature
+ * @param {string} id - the feature id
+ * @returns {Feature | undefined}
+ */
+
+/**
+ * Add a feature to the geojson
+ * @callback AddFeature
+ * @param {Feature} feature - the feature to add
+ */
+
+/**
+ * Update a feature in the geojson
+ * @callback UpdateFeature
+ * @param {string} id - the feature id
+ * @param {Geometry} geometry - the feature geometry
+ * @returns {Feature | undefined}
+ */
+
+/**
+ * Removes a feature from the geojson
+ * @callback RemoveFeature
+ * @param {string} id - the feature id
+ */
+
+/**
+ * Gets the active feature id
+ * @callback GetActiveFeature
+ * @returns {string | undefined}
+ */
+
+/**
+ * Set the active feature id
+ * @callback SetActiveFeature
+ * @param {string} id - the feature id
+ * @returns {void}
+ */
+
+/**
+ * Resets the active feature id
+ * @callback ResetActiveFeature
+ * @returns {void}
+ */
+
+/**
+ * Renders the features into the list
+ * @callback RenderList
+ * @returns {void}
+ */
+
+/**
+ * Renders the features JSON into the hidden textarea
+ * @callback RenderValue
+ * @returns {void}
+ */
+
+/**
+ * Toggles the action button hidden state
+ * @callback ToggleActionButtons
+ * @param {boolean} hidden - whether to hide the action buttons
+ * @returns {void}
+ */
+
+/**
+ * Set focus to the last description input
+ * @callback FocusDescriptionInput
+ * @returns {void}
+ */
+
+/**
+ * @typedef {object} FeaturesManager
+ * @property {GetFeatures} getFeatures - function that gets all the features
+ * @property {GetFeature} getFeature - function that gets a feature from the geojson
+ * @property {AddFeature} addFeature - function that adds feature to the geojson
+ * @property {UpdateFeature} updateFeature - function that updates a feature in the geojson
+ * @property {RemoveFeature} removeFeature - function that removes a feature from the geojson
+ */
+
+/**
+ * @typedef {object} ActiveFeatureManager
+ * @property {GetActiveFeature} getActiveFeature - function that returns the current active feature id
+ * @property {SetActiveFeature} setActiveFeature - function that sets the current active feature id
+ * @property {ResetActiveFeature} resetActiveFeature - function that resets the current active feature id
+ */
+
+/**
+ * @typedef {object} UIManager
+ * @property {RenderValue} renderValue - function that renders the features JSON into the hidden textarea
+ * @property {RenderList} renderList - function that renders the features into the list
+ * @property {HTMLDivElement} listEl - the summary list of features
+ * @property {ToggleActionButtons} toggleActionButtons - function that toggles the action buttons
+ * @property {FocusDescriptionInput} focusDescriptionInput - function that sets focus to a description input element
+ */
+
+/**
+ * @typedef {object} Context
+ * @property {InteractiveMap} map - the interactive map
+ * @property {MapLibreMap} [mapProvider] - the interactive map provider
+ * @property {FeaturesManager} featuresManager - the features manager
+ * @property {ActiveFeatureManager} activeFeatureManager - the active feature manager
+ * @property {UIManager} uiManager - the UI manager
+ * @property {any} interactPlugin - the map interact plugin
+ * @property {any} drawPlugin - the map draw plugin
+ */
+
+/**
+ * @import { MapLibreMap } from '~/src/client/javascripts/map.js'
+ */