@defra/forms-engine-plugin 5.0.0-alpha.2 → 5.0.0-alpha.21

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

@@ -4,21 +4,47 @@ import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
 import createDrawPlugin from '@defra/interactive-map/plugins/draw-ml'
 import { bbox } from '@turf/bbox'
 
+import {
+  DEFAULT_LANG,
+  ENGLISH_LANG,
+  WELSH_LANG
+} from './map-constants.js'
 import {
   EVENTS,
   createMap,
   defaultConfig,
   getCentroidGridRef,
   getCoordinateGridRef,
+  getMapCountryLayers,
   getMapLayers
 } from './map.js'
 import sssiDataset from './sssi-dataset.js'
 import { formatDelimtedList } from './utils.js'
+import cy from '../../server/plugins/engine/i18n/translations/cy.json' with { type: 'json' }
+import enGB from '../../server/plugins/engine/i18n/translations/en-GB.json' with { type: 'json' }
+
+const englishTranslations = enGB.components.geospatialField.map
+const welshTranslations = cy.components.geospatialField.map
+
+/**
+ * @type {Record<LanguageCode, GeospatialLanguageTexts>}
+ */
+export const languageTexts = {
+  [ENGLISH_LANG]: englishTranslations,
+  [WELSH_LANG]: welshTranslations
+}
+
+/**
+ * Get the map texts for the given language code
+ * @param {LanguageCode} lang - the lanugae code
+ */
+export function getTexts(lang = DEFAULT_LANG) {
+  return languageTexts[lang]
+}
 
 const helpPanelConfig = {
   focus: false,
   showLabel: true,
-  label: 'How to use this map',
   mobile: {
     slot: 'drawer',
     open: true,
@@ -40,59 +66,79 @@ const helpPanelConfig = {
 }
 
 /**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-function getLineOrShapeText(allowLine, allowShape) {
+function getLineOrShapeText(texts, allowLine, allowShape) {
   if (allowLine && allowShape) {
-    return 'a line or shape'
+    return texts.lineOrShapeText
   }
   if (allowLine) {
-    return 'a line'
+    return texts.lineText
   }
   if (allowShape) {
-    return 'a shape'
+    return texts.shapeText
   }
   return ''
 }
 
 /**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowPoint
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-function getAllowedTypesPhrase(allowPoint, allowLine, allowShape) {
+function getAllowedTypesPhrase(texts, allowPoint, allowLine, allowShape) {
   const items = []
 
   if (allowPoint) {
-    items.push('points')
+    items.push(texts.typesPhrasePoint)
   }
   if (allowLine) {
-    items.push('lines')
+    items.push(texts.typesPhraseLine)
   }
   if (allowShape) {
-    items.push('shapes')
+    items.push(texts.typesPhraseShape)
   }
 
-  return formatDelimtedList(items, ',', 'or')
+  return formatDelimtedList(items, ',', texts.typesPhraseOr)
+}
+
+/**
+ * Gets the type description for a given feature
+ * @param {Feature} feature - the geojson feature
+ * @param {GeometryTexts} typeDescriptions
+ */
+function getTypeDescription(feature, typeDescriptions) {
+  switch (feature.geometry.type) {
+    case 'Point':
+      return typeDescriptions.point
+    case 'LineString':
+      return typeDescriptions.line
+    case 'Polygon':
+      return typeDescriptions.polygon
+  }
 }
 
 /**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowPoint
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-export 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>`
+export function getHelpPanelHtml(texts, allowPoint, allowLine, allowShape) {
+  const lineOrShapeText = getLineOrShapeText(texts, allowLine, allowShape)
+  const point3 = lineOrShapeText
+    ? `<li>${texts.point3} ${lineOrShapeText}</li>`
     : ''
   const allowedTypesText = getAllowedTypesPhrase(
+    texts,
     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>`
+  return `<p class="govuk-body-s govuk-!-margin-bottom-2">${texts.ledeIntro} ${allowedTypesText} ${texts.ledeOutro}</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>${texts.point1}</li><li>${texts.point2}</li>${point3}<li>${texts.point4}</li></ul>`
 }
 
 const lineFeatureProperties = {
@@ -107,15 +153,6 @@ const polygonFeatureProperties = {
   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 =
@@ -174,43 +211,15 @@ export function processGeospatial(config, geospatial, index) {
   const plugins = [drawPlugin]
   const country = geospatial.dataset.country
   const mapLayers = getMapLayers(geospatial.dataset.maplayers)
+  const datasets = getMapCountryLayers(config.apiPath, country)
 
-  if (country) {
-    // Add the country bounds as a dataset plugin to show the valid area on the map
-    // and provide feedback to the user when they add features outside of the bounds.
-    const countriesDatasetPlugin = createDatasetsPlugin({
-      datasets: [
-        {
-          id: 'invalid-area',
-          label: 'Invalid areas',
-          geojson: `${config.apiPath}/maps/countries.geojson?omit=${country}`,
-          showInKey: false,
-          showInMenu: false,
-          style: {
-            stroke: 'gray',
-            strokeWidth: 1,
-            fill: 'rgba(211,211,211,0.8)'
-          }
-        },
-        {
-          id: 'valid-area',
-          label: 'Valid areas',
-          geojson: `${config.apiPath}/maps/countries.geojson?only=${country}`,
-          showInKey: false,
-          showInMenu: false,
-          style: {
-            stroke: 'rgba(0,112,60,1)',
-            strokeWidth: 1
-          }
-        }
-      ]
-    })
-
-    plugins.push(countriesDatasetPlugin)
+  if (mapLayers.includes('sssi')) {
+    datasets.push(...sssiDataset)
   }
 
-  if (mapLayers.includes('sssi')) {
-    plugins.push(createDatasetsPlugin(sssiDataset))
+  // Create a map dataset plugin if there are any present
+  if (datasets.length) {
+    plugins.push(createDatasetsPlugin({ datasets }))
   }
 
   const initConfig = {
@@ -226,19 +235,30 @@ export function processGeospatial(config, geospatial, index) {
   const options = {
     geometryTypes
   }
+  const lang = /** @type {LanguageCode} */ (
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    geospatial.dataset.lang || DEFAULT_LANG
+  )
   const uiManager = getUIManager(
     geojson,
     map,
     mapId,
     listEl,
     geospatialInput,
-    options
+    options,
+    lang
   )
 
+  const languageManager = {
+    lang,
+    texts: getTexts(lang)
+  }
+
   /**
    * @type {Context}
    */
   const context = {
+    languageManager,
     map,
     featuresManager,
     activeFeatureManager,
@@ -278,15 +298,17 @@ export function addFeatureToMap(feature, drawPlugin, map) {
  * @param {string} mapId - the ID of the map
  * @param {boolean} [disabled] - render the list with disabled links
  * @param {boolean} [readonly] - render the list in readonly mode
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
 export function createFeaturesHTML(
   features,
   mapId,
   disabled = false,
-  readonly = false
+  readonly = false,
+  lang = DEFAULT_LANG
 ) {
   return `<dl class="govuk-summary-list">
-    ${features.map((feature, index) => createFeatureHTML(feature, index, mapId, disabled, readonly)).join('\n')}
+    ${features.map((feature, index) => createFeatureHTML(feature, index, mapId, disabled, readonly, lang)).join('\n')}
   </dl>`
 }
 
@@ -306,14 +328,17 @@ export function focusFeature(feature, mapProvider) {
  * @param {string} mapId - the ID of the map
  * @param {boolean} [disabled] - render the list with disabled links
  * @param {boolean} [readonly] - render the list item in readonly mode
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
 export function createFeatureHTML(
   feature,
   index,
   mapId,
   disabled = false,
-  readonly = false
+  readonly = false,
+  lang = DEFAULT_LANG
 ) {
+  const texts = getTexts(lang)
   const flattened = feature.geometry.coordinates.flat(2)
 
   const points = []
@@ -329,28 +354,28 @@ export function createFeatureHTML(
   // Change action link
   const changeAction = () => `<li class="govuk-summary-list__actions-list-item">
   <a class="govuk-link govuk-link--no-visited-state ${disabled ? 'govuk-link--disabled' : ''}" href="#${mapId}" data-action="edit" data-id="${feature.id}"
-    data-type="${feature.geometry.type}">Update<span class="govuk-visually-hidden"> location</span></a>
+    data-type="${feature.geometry.type}">${texts.itemUpdateLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</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 ${disabled ? 'govuk-link--disabled' : ''}" href="#" data-action="delete" data-id="${feature.id}"
-    data-type="${feature.geometry.type}">Delete<span class="govuk-visually-hidden"> location</span></a>
+    data-type="${feature.geometry.type}">${texts.itemDeleteLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</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>
+  <a class="govuk-link govuk-link--no-visited-state" href="#${mapId}" data-action="focus" data-id="${feature.id}">${texts.itemFocusLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</span></a>
 </li>`
 
   const links = readonly ? focusAction() : `${changeAction()}${deleteAction()}`
-
   const actions = `<ul class="govuk-summary-list__actions-list">${links}</ul>`
+  const typeDescription = getTypeDescription(feature, texts.typeDescriptions)
 
   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>
+      <label class="govuk-label govuk-label--s" ${readonly ? '' : `for="description_${index}"`}>${texts.itemLabel1} ${index + 1} ${texts.itemLabel2}</label>
       ${description}
     </div>
   </dt>
@@ -361,24 +386,24 @@ export function createFeatureHTML(
 <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>
+      <span class="govuk-details__summary-text">${texts.details.summary}</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>
+          <dt class="govuk-summary-list__key">${texts.details.type}</dt>
+          <dd class="govuk-summary-list__value">${typeDescription}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Centre grid reference</dt>
+          <dt class="govuk-summary-list__key">${texts.details.centroidGridReference}</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>
+          <dt class="govuk-summary-list__key">${texts.details.firstPointGridReference}</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>
+          <dt class="govuk-summary-list__key">${texts.details.detailedCoordinates}</dt>
           <dd class="govuk-summary-list__value">
             <ol class="govuk-list govuk-list--number">${coordinates}</ol>
           </dd>
@@ -537,11 +562,24 @@ function getFeaturesManager(geojson) {
  * @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
+ * @param {LanguageCode} [lang] - the language for the feature details
  * @returns {RenderList}
  */
-function getListRenderer(geojson, mapId, listEl, renderValue) {
+function getListRenderer(
+  geojson,
+  mapId,
+  listEl,
+  renderValue,
+  lang = DEFAULT_LANG
+) {
   return function renderList(disabled = false) {
-    const html = createFeaturesHTML(geojson.features, mapId, disabled)
+    const html = createFeaturesHTML(
+      geojson.features,
+      mapId,
+      disabled,
+      false,
+      lang
+    )
 
     listEl.innerHTML = html
 
@@ -569,6 +607,7 @@ function getValueRenderer(geojson, geospatialInput) {
  * @param {HTMLDivElement} listEl - where to render the feature list
  * @param {HTMLTextAreaElement} geospatialInput - the geospatial textarea
  * @param { UIManagerOptions | undefined } options - extra options such as allowable geometry types
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
 export function getUIManager(
   geojson,
@@ -576,7 +615,8 @@ export function getUIManager(
   mapId,
   listEl,
   geospatialInput,
-  options
+  options,
+  lang = DEFAULT_LANG
 ) {
   /**
    * Get a CSV list of geometry types the user can create
@@ -621,7 +661,7 @@ export function getUIManager(
   }
 
   const renderValue = getValueRenderer(geojson, geospatialInput)
-  const renderList = getListRenderer(geojson, mapId, listEl, renderValue)
+  const renderList = getListRenderer(geojson, mapId, listEl, renderValue, lang)
 
   /** @type {UIManager} */
   return {
@@ -688,17 +728,19 @@ function onMapReadyFactory(context) {
     const allowPoint = types.includes('point')
     const allowLine = types.includes('line')
     const allowShape = types.includes('shape')
+    const { texts } = context.languageManager
 
     // Add info panel
     map.addPanel('info', {
       ...helpPanelConfig,
-      html: getHelpPanelHtml(allowPoint, allowLine, allowShape)
+      label: texts.helpPanel.label,
+      html: getHelpPanelHtml(texts.helpPanel, allowPoint, allowLine, allowShape)
     })
 
     if (allowPoint) {
       map.addButton('btnAddPoint', {
         variant: 'tertiary',
-        label: 'Add point',
+        label: texts.buttons.point,
         iconSvgContent: POINT_SVG,
         onClick: () => {
           resetActiveFeature()
@@ -715,7 +757,7 @@ function onMapReadyFactory(context) {
     if (allowShape) {
       map.addButton('btnAddPolygon', {
         variant: 'tertiary',
-        label: 'Add shape',
+        label: texts.buttons.polygon,
         iconSvgContent: POLYGON_SVG,
         onClick: () => {
           resetActiveFeature()
@@ -732,7 +774,7 @@ function onMapReadyFactory(context) {
     if (allowLine) {
       map.addButton('btnAddLine', {
         variant: 'tertiary',
-        label: 'Add line',
+        label: texts.buttons.line,
         iconSvgContent: LINE_SVG,
         onClick: () => {
           resetActiveFeature()
@@ -1156,6 +1198,7 @@ function onListElKeydownFactory() {
  * Renders the features into the list
  * @callback RenderList
  * @param {boolean} [disabled] - whether to render the list with disabled links
+ * @param {LanguageCode} [lang] - the language for the feature details
  * @returns {void}
  */
 
@@ -1210,8 +1253,59 @@ function onListElKeydownFactory() {
  * @property {GetAllowableGeometryTypes} getAllowableGeometryTypes - function that returns the array of geometry types a user can create
  */
 
+/**
+ * @typedef {object} GeometryTexts
+ * @property {string} point - the label for a point feature in the list
+ * @property {string} line - the label for a line string feature in the list
+ * @property {string} polygon - the label for a polygon feature in the list
+ */
+
+/**
+ * @typedef {object} GeospatialPanelTexts
+ * @property {string} label - the label for the info panel
+ * @property {string} ledeIntro - the lede intro text for the info panel
+ * @property {string} ledeOutro - the lede outro text for the info panel
+ * @property {string} lineText - the label for the info panel line text
+ * @property {string} shapeText - the label for the info panel shape text
+ * @property {string} point1 - the text for bullet point 1 in the info panel
+ * @property {string} point2 - the text for bullet point 2 in the info panel
+ * @property {string} point3 - the text for bullet point 3 in the info panel
+ * @property {string} point4 - the text for bullet point 4 in the info panel
+ * @property {string} lineOrShapeText - the label for the info panel line or shape text
+ * @property {string} typesPhrasePoint - the label for the info panel types phrase point
+ * @property {string} typesPhraseLine - the label for the info panel types phrase line
+ * @property {string} typesPhraseShape - the label for the info panel types phrase shape
+ * @property {string} typesPhraseOr - the label for the info panel types phrase "or"
+ */
+
+/**
+ * @typedef {object} GeospatialLanguageTexts
+ * @property {GeometryTexts} typeDescriptions - the descriptions of the geometry types
+ * @property {GeospatialPanelTexts} helpPanel - texts for the info panel
+ * @property {GeometryTexts} buttons - the labels for the action buttons
+ * @property {string} itemLabel1 - the first part of the label for a feature in the list
+ * @property {string} itemLabel2 - the second part of the label for a feature in the list
+ * @property {string} itemUpdateLink - the label for the "update" link for a feature in the list
+ * @property {string} itemDeleteLink - the label for the "delete" link for a feature in the list
+ * @property {string} itemFocusLink - the label for the "focus" link for a feature in the list
+ * @property {string} itemVisuallyHidden - visually hidden text to add context to action links
+ * @property {object} details - labels for the details section of a feature in the list
+ * @property {string} details.summary - label for the summary of a feature in the list
+ * @property {string} details.type - label for the type of a feature in the list
+ * @property {string} details.centroidGridReference - label for the centroid grid reference of a feature in the list
+ * @property {string} details.firstPointGridReference - label for the first point grid reference of a feature in the list
+ * @property {string} details.detailedCoordinates - label for the detailed coordinates of a feature in the list
+ */
+
+/**
+ * @typedef {object} LanguageManager
+ * @property {LanguageCode} lang - the language for the interactive map
+ * @property {GeospatialLanguageTexts} texts - the descriptions of the geometry types
+ */
+
 /**
  * @typedef {object} Context
+ * @property {LanguageManager} languageManager - the language manager for the interactive map
  * @property {InteractiveMap} map - the interactive map
  * @property {MapLibreMap} [mapProvider] - the interactive map provider
  * @property {FeaturesManager} featuresManager - the features manager
@@ -1222,5 +1316,6 @@ function onListElKeydownFactory() {
  */
 
 /**
+ * @import { LanguageCode } from './map.js'
  * @import { MapLibreMap, UIManagerOptions } from './map.js'
  */

package/src/client/javascripts/govuk.js

@@ -3,6 +3,7 @@ import {
   CharacterCount,
   Checkboxes,
   ErrorSummary,
+  FileUpload,
   Header,
   NotificationBanner,
   Radios,
@@ -16,6 +17,7 @@ export function initAllGovuk() {
   createAll(Checkboxes)
   createAll(ErrorSummary)
   createAll(Header)
+  createAll(FileUpload)
   createAll(NotificationBanner)
   createAll(Radios)
   createAll(SkipLink)

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

@@ -1,26 +1,53 @@
 // @ts-expect-error - no types
 import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
 
+import {
+  DEFAULT_LANG,
+  ENGLISH_LANG,
+  WELSH_LANG
+} from './map-constants.js'
 import {
   EVENTS,
   centerMap,
   createMap,
   defaultConfig,
   eastingNorthingToLatLong,
+  getMapCountryLayers,
   getMapLayers,
   latLongToEastingNorthing,
   latLongToOsGridRef,
   osGridRefToLatLong
 } from './map.js'
 import sssiDataset from './sssi-dataset.js'
+import cy from '../../server/plugins/engine/i18n/translations/cy.json' with { type: 'json' }
+import enGB from '../../server/plugins/engine/i18n/translations/en-GB.json' with { type: 'json' }
+
+const englishTranslations = enGB.components.locationFieldBase.map
+const welshTranslations = cy.components.locationFieldBase.map
 
 const LOCATION_FIELD_SELECTOR = 'input.govuk-input'
 
+/**
+ * @type {Record<LanguageCode, LocationLanguageTexts>}
+ */
+export const languageTexts = {
+  [ENGLISH_LANG]: englishTranslations,
+  [WELSH_LANG]: welshTranslations
+}
+
+/**
+ * Get the map texts for the given language code
+ * @param {LanguageCode} lang - the lanugae code
+ */
+export function getTexts(lang = DEFAULT_LANG) {
+  return languageTexts[lang]
+}
+
 /**
  * Gets initial map config for a location field
  * @param {HTMLDivElement} locationField - the location field element
  */
-function getInitMapConfig(locationField) {
+export function getInitMapConfig(locationField) {
   const locationType = locationField.dataset.locationtype
 
   switch (locationType) {
@@ -423,12 +450,24 @@ export function processLocation(config, location, index) {
 
   locationInputs.after(mapContainer)
 
+  const country = location.dataset.country
   const mapLayers = getMapLayers(location.dataset.maplayers)
+  const datasets = getMapCountryLayers(config.apiPath, country)
 
   if (mapLayers.includes('sssi')) {
-    initConfig.plugins = [createDatasetsPlugin(sssiDataset)]
+    datasets.push(...sssiDataset)
   }
 
+  // Create a map dataset plugin if there are any present
+  if (datasets.length) {
+    initConfig.plugins = [createDatasetsPlugin({ datasets })]
+  }
+
+  const lang = /** @type {LanguageCode} */ (
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    location.dataset.lang || DEFAULT_LANG
+  )
+
   const { map, interactPlugin } = createMap(mapId, initConfig, config)
 
   map.on(
@@ -453,11 +492,13 @@ export function processLocation(config, location, index) {
           throw new Error('Not implemented')
       }
 
+      const texts = getTexts(lang)
+
       // Add info panel
       map.addPanel('info', {
         focus: false,
         showLabel: true,
-        label: 'How to use the map',
+        label: texts.helpPanel.label,
         mobile: {
           slot: 'drawer',
           open: true,
@@ -476,7 +517,7 @@ export function processLocation(config, location, index) {
           dismissible: true,
           modal: false
         },
-        html: '<ul><li>Search for a place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Use a mouse or keyboard to centre the point at the location</li><li>Click to add the location to the map</li></ul>'
+        html: `<ul><li>${texts.helpPanel.point1}</li><li>${texts.helpPanel.point2}</li><li>${texts.helpPanel.point3}</li><li>${texts.helpPanel.point4}</li></ul>`
       })
 
       // Enable the interact plugin
@@ -486,5 +527,20 @@ export function processLocation(config, location, index) {
 }
 
 /**
+ * @typedef {object} LocationPanelTexts
+ * @property {string} label - the label for the info panel
+ * @property {string} point1 - the text for bullet point 1 in the info panel
+ * @property {string} point2 - the text for bullet point 2 in the info panel
+ * @property {string} point3 - the text for bullet point 3 in the info panel
+ * @property {string} point4 - the text for bullet point 4 in the info panel
+ */
+
+/**
+ * @typedef {object} LocationLanguageTexts
+ * @property {LocationPanelTexts} helpPanel - texts for the info panel
+ */
+
+/**
+ * @import { LanguageCode } from './map.js'
  * @import { InteractiveMap, InteractiveMapInitConfig, MapCenter, MapLibreMap, MapsEnvironmentConfig } from './map.js'
  */

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

@@ -0,0 +1,3 @@
+export const ENGLISH_LANG = 'en-GB'
+export const WELSH_LANG = 'cy'
+export const DEFAULT_LANG = ENGLISH_LANG