Update to latest code

- updates the JS for the map to the latest code, including a few adjustments
- corresponds to v5 of the map
- removes cluster feature plugin in favour of a manual solution
- update bindpopup function significantly

Author: andysellick

app/assets/config/manifest.js

@@ -6,6 +6,7 @@
 //= link views/travel-advice.js
 //= link views/landing_page/map/main.js
 //= link views/landing_page/map/os-api-branding.js
+//= link views/landing_page/map/data/lookup.js
 //= link views/landing_page/map/data/cdc.geojson.js
 //= link views/landing_page/map/data/hub.geojson.js
 //= link views/landing_page/map/data/icb.geojson.js

app/assets/javascripts/views/landing_page/map/main.js

@@ -1,6 +1,6 @@
 /* global L */
 //= require leaflet
-//= require leaflet.markercluster
+//= require views/landing_page/map/data/lookup.js
 //= require views/landing_page/map/data/cdc.geojson.js
 //= require views/landing_page/map/data/hub.geojson.js
 //= require views/landing_page/map/data/icb.geojson.js
@@ -26,7 +26,6 @@ window.addEventListener('DOMContentLoaded', function () {
   const mapOptions = {
     minZoom: 7,
     maxZoom: 16,
-    center: [52.562, -1.465],
     zoom: 7,
     maxBounds: [
       [49.5, -10.5],
@@ -63,14 +62,15 @@ window.addEventListener('DOMContentLoaded', function () {
   const basemap = L.tileLayer(`https://api.os.uk/maps/raster/v1/zxy/Light_3857/{z}/{x}/{y}.png?key=${apiKey}`)
   basemap.addTo(map)
 
+  const iconSize = [24, 24]
   const icons = {
     cdc: {
-      default: L.icon({ iconUrl: mapElement.getAttribute('data-icon-cdc-default'), iconSize: [24, 24] }),
-      active: L.icon({ iconUrl: mapElement.getAttribute('data-icon-cdc-active'), iconSize: [24, 24] })
+      default: L.icon({ iconUrl: mapElement.getAttribute('data-icon-cdc-default'), iconSize: iconSize, iconAnchor: [24, 12], popupAnchor: [-12, 0] }),
+      active: L.icon({ iconUrl: mapElement.getAttribute('data-icon-cdc-active'), iconSize: iconSize, iconAnchor: [24, 12], popupAnchor: [-12, 0] })
     },
     hub: {
-      default: L.icon({ iconUrl: mapElement.getAttribute('data-icon-sh-default'), iconSize: [24, 24] }),
-      active: L.icon({ iconUrl: mapElement.getAttribute('data-icon-sh-default'), iconSize: [24, 24] })
+      default: L.icon({ iconUrl: mapElement.getAttribute('data-icon-sh-default'), iconSize: iconSize, iconAnchor: [0, 12], popupAnchor: [12, 0] }),
+      active: L.icon({ iconUrl: mapElement.getAttribute('data-icon-sh-default'), iconSize: iconSize, iconAnchor: [0, 12], popupAnchor: [12, 0] })
     }
   }
 
@@ -88,8 +88,7 @@ window.addEventListener('DOMContentLoaded', function () {
         pane: 'cdc'
       })
     }
-  })
-
+  }).addTo(map)
   const cdcOverlay = customOverlays.cdc
 
   // Add the Surgical Hub locations.
@@ -104,8 +103,7 @@ window.addEventListener('DOMContentLoaded', function () {
         pane: 'hub'
       })
     }
-  })
-
+  }).addTo(map)
   const hubOverlay = customOverlays.hub
 
   // Generate CDC and Surgical Hub counts per ICS boundary.
@@ -142,14 +140,8 @@ window.addEventListener('DOMContentLoaded', function () {
   })
   icsOverlay.addTo(map)
 
-  // Add marker cluster group to the map.
-  const MarkerClusterGroup = new L.MarkerClusterGroup({
-    showCoverageOnHover: false,
-    maxClusterRadius: 0
-  }).addTo(map)
-
-  MarkerClusterGroup.addLayer(customOverlays.cdc)
-  MarkerClusterGroup.addLayer(customOverlays.hub)
+  // Fit the map bounds to the extent of the Integrated Care System (ICS) boundaries
+  map.fitBounds(icsOverlay.getBounds())
 
   const layers = [cdcOverlay, hubOverlay]
   for (let i = 0; i < layers.length; i++) {
@@ -158,7 +150,7 @@ window.addEventListener('DOMContentLoaded', function () {
 
     checkbox.addEventListener('click', function () {
       map.closePopup()
-      checkbox.checked ? MarkerClusterGroup.addLayer(mapLayer) : MarkerClusterGroup.removeLayer(mapLayer)
+      checkbox.checked ? map.addLayer(mapLayer) : map.removeLayer(mapLayer)
 
       // track the filter click
       mapElement.setAttribute('data-ga4-auto', JSON.stringify({
@@ -183,20 +175,27 @@ window.addEventListener('DOMContentLoaded', function () {
     let propLookup
 
     const popupContainer = document.createElement('div')
-    const popupHeading = document.createElement('h1')
+
+    const popupHeading = document.createElement('h3')
     popupHeading.classList.add('govuk-heading-m')
     const popupBody = document.createElement('div')
 
     if (ftGeomType === 'Point') {
       popupHeading.innerText = ftProps.name
 
-      propLookup = {
-        services: 'Services offered',
-        isOpen12_7: 'Open 12 hours a day, 7 days a week?',
-        address: 'Address'
+      if (lyrPane === 'cdc') {
+        propLookup = {
+          services: 'Services offered',
+          isOpen12_7: 'Open 12 hours a day, 7 days a week?',
+          address: 'Address'
+        }
+      } else if (lyrPane === 'hub') {
+        propLookup = {
+          address: 'Address'
+        }
       }
     } else {
-      popupHeading.innerText = ftProps.ICB23NM
+      popupHeading.innerText = window.GOVUK.lookup.ics[ftProps.ICB23CD]
 
       propLookup = {
         cdcCount: 'Community Diagnostic Centres',
@@ -206,21 +205,23 @@ window.addEventListener('DOMContentLoaded', function () {
 
     for (const [key, value] of Object.entries(propLookup)) {
       if (Object.prototype.hasOwnProperty.call(ftProps, key)) {
-        const popupBodyHeading = document.createElement('h2')
+        const popupBodyHeading = document.createElement('h4')
         popupBodyHeading.classList.add('govuk-heading-s')
+        popupBodyHeading.classList.add('govuk-!-margin-0')
         popupBodyHeading.innerText = value
         popupBody.appendChild(popupBodyHeading)
 
-        const popupBodyDiv = document.createElement('div')
-        popupBodyDiv.innerText = key === 'address' ? `${ftProps.address}, ${ftProps.postcode}` : ftProps[key]
-        popupBody.appendChild(popupBodyDiv)
+        const popupBodyContent = document.createElement('p')
+        popupBodyContent.classList.add('govuk-body')
+        popupBodyContent.innerText = ftProps[key]
+        popupBody.appendChild(popupBodyContent)
       }
     }
 
     popupContainer.appendChild(popupHeading)
     popupContainer.appendChild(popupBody)
-    const popup = layer.bindPopup(popupContainer)
 
+    const popup = layer.bindPopup(popupContainer)
     popup.on('popupopen', (e) => {
       if (ftGeomType === 'Point') e.target.setIcon(icons[lyrPane].active)
       else e.target.setStyle({ fillOpacity: 0.3 })
@@ -236,7 +237,6 @@ window.addEventListener('DOMContentLoaded', function () {
       tracker.sendEvent()
       mapElement.removeAttribute('data-ga4-auto')
     })
-
     popup.on('popupclose', (e) => {
       if (ftGeomType === 'Point') e.target.setIcon(icons[lyrPane].default)
       else e.target.setStyle({ fillOpacity: 0.0 })

app/assets/stylesheets/views/_landing_page/map.scss

@@ -11,8 +11,9 @@
 }
 
 .map__canvas {
-  height: 500px;
+  height: 800px;
   margin-bottom: govuk-spacing(1);
+  border: solid 1px $govuk-border-colour;
 }
 
 .map__key {

app/assets/stylesheets/views/_landing_page/map/leaflet.scss

@@ -563,11 +563,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	min-height: 1px;
 	}
 
-.leaflet-popup-content p {
-	margin: 17px 0;
-	margin: 1.3em 0;
-	}
-
 .leaflet-popup-tip-container {
 	width: 40px;
 	height: 20px;

package.json

@@ -53,7 +53,6 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "leaflet": "^1.9.4",
-    "leaflet.markercluster": "^1.5.3"
+    "leaflet": "^1.9.4"
   }
 }

yarn.lock

@@ -1853,7 +1853,6 @@ __metadata:
     jasmine-browser-runner: ^3.0.0
     jasmine-core: ^5.7.1
     leaflet: ^1.9.4
-    leaflet.markercluster: ^1.5.3
     nyc: ^17.1.0
     standardx: ^7.0.0
     stylelint: ^16.19.1
@@ -2892,15 +2891,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"leaflet.markercluster@npm:^1.5.3":
-  version: 1.5.3
-  resolution: "leaflet.markercluster@npm:1.5.3"
-  peerDependencies:
-    leaflet: ^1.3.1
-  checksum: abf0d0befbc78b7f178a330791554f0e4fd7170dbe2e6d59f387b627d914f4633b0541a9028fe5d11cf842c09c8dbb56ae6bd9d1d08c5ce35e32541c8f1eacd1
-  languageName: node
-  linkType: hard
-
 "leaflet@npm:^1.9.4":
   version: 1.9.4
   resolution: "leaflet@npm:1.9.4"