WIP

Author: andysellick

app/assets/config/manifest.js

@@ -13,5 +13,7 @@
 //= link static-error-pages.js
 
 //= link_tree ../builds
-//= link_tree ../../javascript .js
-//= link_tree ../../../vendor/javascript .js
+
+//= link @defra/interactive-map/dist/esm/index.js
+//= link @defra/interactive-map/providers/maplibre/dist/esm/index.js
+//= link @defra/interactive-map/plugins/interact/dist/esm/index.js

app/assets/javascripts/components/map.js

@@ -2,6 +2,9 @@
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
+import InteractiveMap from '@defra/interactive-map'
+import maplibreProvider from '@defra/interactive-map/providers/maplibre'
+
 (function (Modules) {
   class Map {
     constructor ($module) {
@@ -15,7 +18,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       })
 
       const config = {
-        mapProvider: defra.maplibreProvider({ workerUrl: cspWorker }),
+        mapProvider: maplibreProvider({ workerUrl: cspWorker }),
         behaviour: 'inline',
         mapStyle: {
           url: window.GOVUK.mapComponentStyles,
@@ -54,7 +57,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.map_element.setAttribute('id', id)
       this.map_element.classList.add('app-c-map--enabled')
 
-      this.map = new defra.InteractiveMap(this.map_id, this.config)
+      this.map = new InteractiveMap(this.map_id, this.config)
 
       /* istanbul ignore next */
       this.map.on('map:ready', () => {

app/views/components/_map.html.erb

@@ -37,6 +37,7 @@
   @include_script ||= OpenStruct.new(script_included: false)
 %>
 <% if heading_text && ((map_config[:center] && map_config[:zoom]) || (markers || !geojson.nil?)) %>
+  <%= javascript_importmap_tags %>
   <%= render "govuk_publishing_components/components/heading", heading_obj %>
   <% if description %>
     <%= render "govuk_publishing_components/components/govspeak", {} do %>
@@ -64,9 +65,7 @@
   <% end %>
 
   <% unless @include_script[:script_included] %>
-    <%= javascript_include_tag "components/map/defra-map.js", integrity: false %>
     <%= javascript_include_tag "components/map.js", integrity: false, type: "module" %>
-    <%= javascript_include_tag "components/map/map-style-liberty.js", integrity: false %>
     <% @include_script[:script_included] = true %>
   <% end %>
 

config/importmap.rb

@@ -1,3 +1,6 @@
 # Pin npm packages by running ./bin/importmap
 
-pin "application"
+pin "@defra/interactive-map", to: "@defra/interactive-map/dist/esm/index.js"
+pin "@defra/interactive-map/providers/maplibre", to: "@defra/interactive-map/providers/maplibre/dist/esm/index.js"
+pin "@defra/interactive-map/plugins/interact", to: "@defra/interactive-map/plugins/interact/dist/esm/index.js"
+pin "components/map", to: "components/map.js"