Allows allowable geometry types to be specified

Author: jbarnsley10

package-lock.json

@@ -87,7 +87,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
-    "@defra/forms-model": "^3.0.667",
+    "@defra/forms-model": "^3.0.668",
     "@defra/hapi-tracing": "^1.29.0",
     "@defra/interactive-map": "^0.0.22-alpha",
     "@elastic/ecs-pino-format": "^1.5.0",

package.json

@@ -28,8 +28,67 @@ const helpPanelConfig = {
     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>Double‑click, or select \'Done\', when you have finished drawing a line or shape</li><li>Give the location a name</li></ul>'
+  }
+}
+
+/**
+ * @param {boolean} allowLine
+ * @param {boolean} allowShape
+ */
+function getLineOrShapeText(allowLine, allowShape) {
+  if (allowLine && allowShape) {
+    return 'a line or shape'
+  }
+  if (allowLine) {
+    return 'a line'
+  }
+  if (allowShape) {
+    return 'a shape'
+  }
+  return ''
+}
+
+/**
+ * @param {boolean} allowPoint
+ * @param {boolean} allowLine
+ * @param {boolean} allowShape
+ */
+function getAllowedTypesPhrase(allowPoint, allowLine, allowShape) {
+  const items = []
+
+  if (allowPoint) items.push('points')
+  if (allowLine) items.push('lines')
+  if (allowShape) items.push('shapes')
+
+  if (items.length === 0) return ''
+
+  if (items.length === 1) {
+    return items[0]
+  }
+
+  if (items.length === 2) {
+    return `${items[0]} or ${items[1]}`
+  }
+
+  return `${items[0]}, ${items[1]} or ${items[2]}`
+}
+
+/**
+ * @param {boolean} allowPoint
+ * @param {boolean} allowLine
+ * @param {boolean} allowShape
+ */
+function getHelpPanelHtml(allowPoint, allowLine, allowShape) {
+  const lineOrShapeText = getLineOrShapeText(allowLine, allowShape)
+  const doneExtra = lineOrShapeText
+    ? `<li>Double‑click, or select 'Done', when you have finished drawing ${lineOrShapeText}</li>`
+    : ''
+  const allowedTypesText = getAllowedTypesPhrase(
+    allowPoint,
+    allowLine,
+    allowShape
+  )
+  return `<p class="govuk-body-s govuk-!-margin-bottom-2">You can add ${allowedTypesText} 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>${doneExtra}<li>Give the location a name</li></ul>`
 }
 
 const lineFeatureProperties = {
@@ -157,11 +216,18 @@ export function processGeospatial(config, geospatial, index) {
   const { map, interactPlugin } = createMap(mapId, initConfig, config)
   const featuresManager = getFeaturesManager(geojson)
   const activeFeatureManager = getActiveFeatureManager()
-  const geometryTypes = geospatial.dataset.geometryTypes ?? 'point,line,shape'
+  const geometryTypes = geospatial.dataset.geometrytypes ?? 'point,line,shape'
   const options = {
     geometryTypes
   }
-  const uiManager = getUIManager(geojson, map, mapId, listEl, geospatialInput, options)
+  const uiManager = getUIManager(
+    geojson,
+    map,
+    mapId,
+    listEl,
+    geospatialInput,
+    options
+  )
 
   /**
    * @type {Context}
@@ -593,7 +659,8 @@ function createContainers(geospatialInput, index) {
 function onMapReadyFactory(context) {
   const { map, activeFeatureManager, uiManager, interactPlugin, drawPlugin } =
     context
-  const { toggleActionButtons, renderList, getAllowableGeometryTypes } = uiManager
+  const { toggleActionButtons, renderList, getAllowableGeometryTypes } =
+    uiManager
   const { resetActiveFeature } = activeFeatureManager
 
   /**
@@ -602,73 +669,66 @@ function onMapReadyFactory(context) {
    * @param {MapLibreMap} e.map - the map provider instance
    */
   return function onMapReady(e) {
-    // Add info panel
-    map.addPanel('info', helpPanelConfig)
-
     const types = getAllowableGeometryTypes()
     const allowPoint = types.includes('point')
     const allowLine = types.includes('line')
     const allowShape = types.includes('shape')
 
-    // If only a single geometry type, don't show any buttons as will default to that geometry operation
-    if (types.split(',').length === 1) {
-      resetActiveFeature()
-      toggleActionButtons(true)
-      renderList(true)
-      if (allowPoint) interactPlugin.enable()
-      if (allowLine) drawPlugin.newLine(generateID(), lineFeatureProperties)
-      if (allowShape) drawPlugin.newPolygon(generateID(), polygonFeatureProperties)
-    } else {
-      if (allowPoint) {
-        map.addButton('btnAddPoint', {
-          variant: 'tertiary',
-          label: 'Add point',
-          iconSvgContent: POINT_SVG,
-          onClick: () => {
-            resetActiveFeature()
-            toggleActionButtons(true)
-            renderList(true)
-            interactPlugin.enable()
-          },
-          mobile: { slot: 'actions' },
-          tablet: { slot: 'actions' },
-          desktop: { slot: 'actions' }
-        })
-      }
+    // Add info panel
+    map.addPanel('info', {
+      ...helpPanelConfig,
+      html: getHelpPanelHtml(allowPoint, allowLine, allowShape)
+    })
 
-      if (allowShape) {
-        map.addButton('btnAddPolygon', {
-          variant: 'tertiary',
-          label: 'Add shape',
-          iconSvgContent: POLYGON_SVG,
-          onClick: () => {
-            resetActiveFeature()
-            toggleActionButtons(true)
-            renderList(true)
-            drawPlugin.newPolygon(generateID(), polygonFeatureProperties)
-          },
-          mobile: { slot: 'actions' },
-          tablet: { slot: 'actions' },
-          desktop: { slot: 'actions' }
-        })
-      }
+    if (allowPoint) {
+      map.addButton('btnAddPoint', {
+        variant: 'tertiary',
+        label: 'Add point',
+        iconSvgContent: POINT_SVG,
+        onClick: () => {
+          resetActiveFeature()
+          toggleActionButtons(true)
+          renderList(true)
+          interactPlugin.enable()
+        },
+        mobile: { slot: 'actions' },
+        tablet: { slot: 'actions' },
+        desktop: { slot: 'actions' }
+      })
+    }
 
-      if (allowLine) {
-        map.addButton('btnAddLine', {
-          variant: 'tertiary',
-          label: 'Add line',
-          iconSvgContent: LINE_SVG,
-          onClick: () => {
-            resetActiveFeature()
-            toggleActionButtons(true)
-            renderList(true)
-            drawPlugin.newLine(generateID(), lineFeatureProperties)
-          },
-          mobile: { slot: 'actions' },
-          tablet: { slot: 'actions' },
-          desktop: { slot: 'actions' }
-        })
-      }
+    if (allowShape) {
+      map.addButton('btnAddPolygon', {
+        variant: 'tertiary',
+        label: 'Add shape',
+        iconSvgContent: POLYGON_SVG,
+        onClick: () => {
+          resetActiveFeature()
+          toggleActionButtons(true)
+          renderList(true)
+          drawPlugin.newPolygon(generateID(), polygonFeatureProperties)
+        },
+        mobile: { slot: 'actions' },
+        tablet: { slot: 'actions' },
+        desktop: { slot: 'actions' }
+      })
+    }
+
+    if (allowLine) {
+      map.addButton('btnAddLine', {
+        variant: 'tertiary',
+        label: 'Add line',
+        iconSvgContent: LINE_SVG,
+        onClick: () => {
+          resetActiveFeature()
+          toggleActionButtons(true)
+          renderList(true)
+          drawPlugin.newLine(generateID(), lineFeatureProperties)
+        },
+        mobile: { slot: 'actions' },
+        tablet: { slot: 'actions' },
+        desktop: { slot: 'actions' }
+      })
     }
 
     // Set the map provider on the context

src/client/javascripts/geospatial-map.js

@@ -96,6 +96,7 @@ export class GeospatialField extends FormComponent {
     return {
       ...viewModel,
       country: this.options.countries?.at(0),
+      geometryTypes: this.options.geometryTypes,
       value
     }
   }