Feature/DF-680 location maps latlong

src/client/javascripts/maps.js

@@ -0,0 +1,3 @@
+import { initMaps } from '@defra/forms-engine-plugin/shared.js'
+
+initMaps()

src/config/index.ts

@@ -301,12 +301,19 @@ export const config = convict({
   },
 
   ordnanceSurveyApiKey: {
-    doc: 'The ordnance survey api key used by the postcode lookup plugin',
+    doc: 'The ordnance survey api key used by the postcode lookup and maps plugin',
     format: String,
     nullable: true,
     default: undefined,
     env: 'ORDNANCE_SURVEY_API_KEY'
-  } as SchemaObj<string | undefined>
+  } as SchemaObj<string | undefined>,
+
+  useMapsFeature: {
+    doc: 'Feature flag to control maps',
+    format: Boolean,
+    default: false,
+    env: 'USE_MAPS_FEATURE'
+  }
 })
 
 config.validate({ allowed: 'strict' })

src/server/plugins/blankie.ts

@@ -29,6 +29,7 @@ export const configureBlankiePlugin = (): ServerRegisterPluginObject<
       fontSrc: ['self', 'data:'],
       connectSrc: [
         ['self'],
+        ['https://api.os.uk'],
         gaTrackingId ? googleAnalyticsOptions.connectSrc : [],
         uploaderUrl ? [uploaderUrl] : []
       ].flat(),
@@ -38,10 +39,11 @@ export const configureBlankiePlugin = (): ServerRegisterPluginObject<
       ].flat(),
       styleSrc: ['self', 'unsafe-inline'],
       imgSrc: [
-        ['self'],
+        ['self', 'data:'],
         gaTrackingId ? googleAnalyticsOptions.imgSrc : []
       ].flat(),
       frameSrc: ['self', 'data:'],
+      workerSrc: ['self', 'blob:'],
       generateNonces: true
     }
   }

src/server/plugins/nunjucks/context.js

@@ -52,7 +52,8 @@ export function context(request) {
       phaseTag: config.get('phaseTag'),
       serviceBannerText: config.get('serviceBannerText'),
       serviceName: config.get('serviceName'),
-      serviceVersion: config.get('serviceVersion')
+      serviceVersion: config.get('serviceVersion'),
+      useMapsFeature: config.get('useMapsFeature')
     },
     cspNonce: request?.plugins.blankie?.nonces?.script,
     currentPath: request ? `${request.path}${request.url.search}` : undefined,

src/server/views/layout.html

@@ -32,6 +32,12 @@
   <link rel="preload" as="font" href="{{ assetPath }}/fonts/bold-b542beb274-v2.woff2" type="font/woff2" crossorigin="anonymous">
   <link rel="preload" as="font" href="{{ assetPath }}/fonts/light-94a07e06a1-v2.woff2" type="font/woff2" crossorigin="anonymous">
   <link rel="stylesheet" href="{{ getAssetPath("stylesheets/application.scss") }}">
+  <link href="{{assetPath}}/defra-map/css/index.css" rel="stylesheet" type="text/css">
+  <link href="{{assetPath}}/defra-map/plugins/map-styles/dist/css/index.css" rel="stylesheet" type="text/css">
+  <link href="{{assetPath}}/defra-map/plugins/search/dist/css/index.css" rel="stylesheet" type="text/css">
+  <link href="{{assetPath}}/defra-map/plugins/scale-bar/dist/css/index.css" rel="stylesheet" type="text/css">
+  <link href="{{assetPath}}/defra-map/plugins/data-layers-ml/dist/css/index.css" rel="stylesheet" type="text/css">
+  <link href="{{assetPath}}/defra-map/plugins/interact/dist/css/index.css" rel="stylesheet" type="text/css">
 {% endblock %}
 
 {% block pageTitle -%}
@@ -158,6 +164,19 @@ <h1 class="govuk-heading-l">Default page template</h1>
 {% block bodyEnd %}
   <script type="module" nonce="{{ cspNonce }}" src="{{ getAssetPath("application.js") }}"></script>
 
+  {% if config.useMapsFeature %}
+    <script nonce="{{ cspNonce }}" src="{{assetPath}}/defra-map/umd/index.js"></script>
+    <script nonce="{{ cspNonce }}" src="{{assetPath}}/defra-map/providers/maplibre/dist/umd/index.js"></script>
+    <script nonce="{{ cspNonce }}" src="{{assetPath}}/defra-map/providers/open-names/dist/umd/index.js"></script>
+    <script nonce="{{ cspNonce }}" src="{{assetPath}}/defra-map/plugins/map-styles/dist/umd/index.js"></script>
+    <script nonce="{{ cspNonce }}" src="{{assetPath}}/defra-map/plugins/search/dist/umd/index.js"></script>
+    <script nonce="{{ cspNonce }}" src="{{assetPath}}/defra-map/plugins/zoom-controls/dist/umd/index.js"></script>
+    <script nonce="{{ cspNonce }}" src="{{assetPath}}/defra-map/plugins/scale-bar/dist/umd/index.js"></script>
+    <script nonce="{{ cspNonce }}" src="{{assetPath}}/defra-map/plugins/data-layers-ml/dist/umd/index.js"></script>
+    <script nonce="{{ cspNonce }}" src="{{assetPath}}/defra-map/plugins/interact/dist/umd/index.js"></script>
+    <script type="module" nonce="{{ cspNonce }}" src="{{ getAssetPath("maps.js") }}"></script>
+  {% endif %}
+
   {% if config.googleAnalyticsTrackingId and cookieConsent.analytics === true %}
     <script id="ga-tag-js-main" nonce="{{ cspNonce }}" src="https://www.googletagmanager.com/gtag/js?id={{ config.googleAnalyticsTrackingId }}" defer></script>
     <script id="ga-tag-js-init" nonce="{{ cspNonce }}">

webpack.config.js

@@ -14,6 +14,10 @@ const govukFrontendPath = dirname(
   require.resolve('govuk-frontend/package.json')
 )
 
+const pluginPath = dirname(
+  require.resolve('@defra/forms-engine-plugin/package.json')
+)
+
 /**
  * @type {Configuration}
  */
@@ -22,6 +26,9 @@ export default {
   entry: {
     application: {
       import: ['./javascripts/application.js', './stylesheets/application.scss']
+    },
+    maps: {
+      import: ['./javascripts/maps.js']
     }
   },
   experiments: { outputModule: true },
@@ -172,7 +179,23 @@ export default {
     new WebpackAssetsManifest(),
     new CopyPlugin({
       patterns: [
-        { from: join(govukFrontendPath, 'dist/govuk/assets'), to: 'assets' }
+        { from: join(govukFrontendPath, 'dist/govuk/assets'), to: 'assets' },
+        {
+          from: join(pluginPath, 'node_modules/@defra/defra-map/dist'),
+          to: 'assets/defra-map'
+        },
+        {
+          from: join(pluginPath, 'node_modules/@defra/defra-map/providers'),
+          to: 'assets/defra-map/providers'
+        },
+        {
+          from: join(pluginPath, 'node_modules/@defra/defra-map/plugins'),
+          to: 'assets/defra-map/plugins'
+        },
+        {
+          from: join(pluginPath, 'node_modules/@defra/defra-map/assets'),
+          to: 'assets/defra-map/assets'
+        }
       ]
     })
   ],
@@ -185,5 +208,5 @@ export default {
 }
 
 /**
- * @import { Configuration, NormalModule } from 'webpack'
+ * @import { Configuration } from 'webpack'
  */