FCRM-6965 map page now uses datasets plugin

client/js/map/colours.js

@@ -25,10 +25,10 @@ export const COLOURS = {
 
   floodZone3: { default: '#003078', dark: '#e5f5e0' },
   floodZone2: { default: '#1d70b8', dark: '#41ab5d' },
-  floodZoneClimateChange: { default: '#F4A582', dark: '#BF3D4A' },
+  floodZoneClimateChange: { default: floodZoneCCLight, dark: floodZoneCCDark },
   floodZoneClimateChangeNoData: { default: darkTeal, dark: white },
 
-  floodDefences: { default: '#f47738', dark: '#f47738' },
+  floodDefences: { default: floodDefences, dark: floodDefences },
   waterStorageAreas: { default: darkTeal, dark: white },
   mainRivers: { default: darkTeal, dark: white }
 }
@@ -39,7 +39,16 @@ const nonFloodZoneDepthBandsLight = [COLOURS.depthOver2300.default, COLOURS.dept
 const nonFloodZoneDepthBandsDark = [COLOURS.depthOver2300.dark, COLOURS.depth2300.dark, COLOURS.depth1200.dark, COLOURS.depth900.dark, COLOURS.depth600.dark, COLOURS.depth300.dark, COLOURS.depth150.dark]
 
 export const colours = { // [default, dark]
+  nonFloodZoneLight,
+  nonFloodZoneDark,
   nonFloodZone: [nonFloodZoneLight, nonFloodZoneDark],
+  depthOver2300: { default: '#7f2704', dark: '#238b45' },
+  depth2300: { default: '#a63603', dark: '#41ab5d' },
+  depth1200: { default: '#d94801', dark: '#74c476' },
+  depth900: { default: '#f16913', dark: '#a1d99b' },
+  depth600: { default: '#fd8d3c', dark: '#c7e9c0' },
+  depth300: { default: '#fdae6b', dark: '#e5f5e0' },
+  depth150: { default: '#fdd0a2', dark: '#f7fcf5' },
   nonFloodZoneDepthBands: [
     [nonFloodZoneDepthBandsLight[0], nonFloodZoneDepthBandsDark[0]],
     [nonFloodZoneDepthBandsLight[1], nonFloodZoneDepthBandsDark[1]],
@@ -53,9 +62,9 @@ export const colours = { // [default, dark]
   floodZone3: [floodZone3Light, floodZone3Dark],
   floodZoneClimateChange: [floodZoneCCLight, floodZoneCCDark],
   floodZoneClimateChangeNoData: [black, white],
-  waterStorageAreas: [darkTeal, white],
-  mainRivers: [darkTeal, white],
-  floodDefences: [floodDefences, floodDefences],
+  waterStorageAreas: { default: darkTeal, dark: white },
+  mainRivers: { default: darkTeal, dark: white },
+  floodDefences: { default: floodDefences, dark: floodDefences },
   floodExtents: [nonFloodZoneLight, nonFloodZoneDark]
 }
 

client/js/map/datasets/datasetsMenu.js

@@ -0,0 +1,72 @@
+export const menu = [
+  {
+    id: 'dataset',
+    label: 'Datasets',
+    urlKey: 'dataset',
+    visibleWhen: true,
+    type: 'radio', // 'checkbox' or 'radio'
+    value: 'floodzones', // this is the default value for the menu, it should be one of the items' id
+    items: [
+      { id: 'floodzones', label: 'Flood zones' },
+      { id: 'surfacewater', label: 'Surface water' },
+      { id: 'none', label: 'None', },
+    ],
+  },
+  {
+    id: 'timeframe',
+    label: 'Timeframe',
+    urlKey: 'dataset',
+    urlIndex: 1, // eg: surfacewater-presentday-high-depth or floodzones-climatechange
+    type: 'radio',
+    visibleWhen: { menu: { dataset: ['floodzones', 'surfacewater'] } },
+    value: 'presentday',
+    items: [
+      { id: 'presentday', label: 'Present day' },
+      { id: 'climatechange', label: '2070 to 2125', visibleWhen: { menu: { dataset: ['floodzones'] } } },
+      { id: 'climatechange', label: '2061 to 2125', visibleWhen: { menu: { dataset: ['surfacewater'] } } },
+    ]
+  }, {
+    id: 'aep',
+    label: 'Annual likelihood of flooding',
+    urlKey: 'dataset',
+    urlIndex: 2,
+    type: 'radio',
+    visibleWhen: { menu: { dataset: ['surfacewater'] } },
+    value: 'medium',
+    items: [
+      { id: 'high', label: '1 in 30' },
+      { id: 'medium', label: '1 in 100' },
+      { id: 'low', label: '1 in 1000' },
+    ]
+  }, {
+    id: 'depth',
+    label: 'Depth',
+    urlKey: 'dataset',
+    urlIndex: 3,
+    type: 'radio',
+    visibleWhen: { menu: { dataset: ['surfacewater'] } },
+    subMenu: true,
+    value: 'depthAll',
+    items: [
+      { id: 'depthAll', label: 'All depths', },
+      { id: 'depth150', label: 'Full extent of flooding', },
+      { id: 'depth300', label: 'Extent over 150mm', },
+      { id: 'depth600', label: 'Extent over 300mm', },
+      { id: 'depth900', label: 'Extent over 600mm', },
+      { id: 'depth1200', label: 'Extent over 900mm', },
+      { id: 'depth2300', label: 'Extent over 1200mm', },
+      { id: 'depthOver2300', label: 'Extent over 2300mm', },
+    ]
+  }, {
+    id: 'features',
+    groupLabel: 'Map features',
+    urlKey: 'features',
+    type: 'checkbox',
+    visibleWhen: true,
+    items: [
+      { id: 'waterstorage', label: 'Water storage' },
+      { id: 'flooddefence', label: 'Flood defence' },
+      { id: 'mainrivers', label: 'Main rivers' },
+    ]
+  }
+]

client/js/map/datasets/datasetsPlugin.js

@@ -0,0 +1,37 @@
+import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
+import { surfaceWaterDatasets, surfaceWaterExtentsKey } from './surfaceWater.js'
+import { floodZonesDatasets } from './floodZones.js'
+import { featureLayers } from './featureLayers.js'
+import { menu } from './datasetsMenu.js'
+
+export const datasetsPlugin = ({ agolServiceUrl, agolVectorTileUrl, layerNameSuffix }) => {
+  const datasets = [
+    ...floodZonesDatasets({ agolVectorTileUrl, layerNameSuffix }),
+    surfaceWaterExtentsKey,
+    ...surfaceWaterDatasets({ agolVectorTileUrl, layerNameSuffix }),
+    ...featureLayers(agolServiceUrl, layerNameSuffix),
+  ]
+
+  return createDatasetsPlugin({
+    manifest: {
+      panels: [{
+        id: 'datasetsLayers',
+        desktop: { open: true, slot: 'side', width: '280px', dismissible: false },
+        tablet: { slot: 'side', width: '280px', modal: true }
+      }],
+      buttons: [
+        {
+          id: 'datasetsLayers',
+          excludeWhen: ({ appState }) => (appState?.breakpoint === 'desktop'),
+        }
+      ]
+    },
+    globals: {
+      opacityMode: 'global',
+      opacity: 0.75,
+      visible: true
+    },
+    datasets,
+    menu
+  })
+}

client/js/map/datasets/featureLayers.js

@@ -0,0 +1,82 @@
+import { terms } from '../terms.js'
+import { colours } from '../colours.js'
+
+export const featureLayers = (agolServiceUrl, layerNameSuffix) => {
+  const datasetMainRivers = {
+    id: 'mainrivers',
+    label: terms.labels.mainRivers,
+    groupLabel: terms.labels.mapFeatures,
+    type: 'FeatureService',
+    // NOTE: Main Rivers does not have the _NON_PRODUCTION ${layerNameSuffix}
+    tiles: `${agolServiceUrl}/Statutory_Main_River_Map/FeatureServer`,
+    showInKey: true,
+    sourceLayer: 'Statutory_Main_River_Map',
+    visible: false,
+    style: {
+      renderer: {
+        type: 'simple',
+        symbol: {
+          type: 'simple-line',
+          width: '3px',
+          color: { outdoor: colours.mainRivers.default, dark: colours.mainRivers.dark },
+        }
+      },
+      stroke: { outdoor: colours.mainRivers.default, dark: colours.mainRivers.dark },
+      strokeWidth: 3
+    }
+  }
+
+  const datasetWaterStorageAreas = {
+    id: 'waterstorage',
+    label: terms.labels.waterStorage,
+    groupLabel: terms.labels.mapFeatures,
+    type: 'FeatureService',
+    tiles: `${agolServiceUrl}/Flood_Storage_Areas${layerNameSuffix}/FeatureServer`,
+    showInKey: true,
+    sourceLayer: 'Flood_Storage_Areas',
+    visible: false,
+    style: {
+      renderer: {
+        type: 'simple',
+        symbol: {
+          type: 'simple-fill',
+          style: 'diagonal-cross',
+          color: { outdoor: colours.waterStorageAreas.default, dark: colours.waterStorageAreas.dark },
+          outline: {
+            color: { outdoor: colours.waterStorageAreas.default, dark: colours.waterStorageAreas.dark },
+            width: 1
+          }
+        }
+      },
+      stroke: { outdoor: colours.waterStorageAreas.default, dark: colours.waterStorageAreas.dark },
+      strokeWidth: 1,
+      fillPattern: 'diagonal-cross-hatch',
+      fillPatternForegroundColor: { outdoor: colours.waterStorageAreas.default, dark: colours.waterStorageAreas.dark },
+      fillPatternBackgroundColor: 'transparent'
+    }
+  }
+
+  const datasetFloodDefences = {
+    id: 'flooddefence',
+    label: terms.labels.floodDefence,
+    groupLabel: terms.labels.mapFeatures,
+    type: 'FeatureService',
+    tiles: `${agolServiceUrl}/Defences${layerNameSuffix}/FeatureServer`,
+    showInKey: true,
+    sourceLayer: 'Defences',
+    visible: false,
+    style: {
+      renderer: {
+        type: 'simple',
+        symbol: {
+          type: 'simple-line',
+          width: '3px',
+          color: { outdoor: colours.floodDefences.default, dark: colours.floodDefences.dark },
+        }
+      },
+      stroke: { outdoor: colours.floodDefences.default, dark: colours.floodDefences.dark },
+      strokeWidth: 3
+    }
+  }
+  return [datasetMainRivers, datasetWaterStorageAreas, datasetFloodDefences]
+}

client/js/map/datasets/floodZones.js

@@ -0,0 +1,110 @@
+export const floodZonesDatasets = ({ agolVectorTileUrl, layerNameSuffix }) => {
+  const datasetFloodZonesCC = {
+    id: 'floodzonescc',
+    label: 'Flood Zones Climate Change',
+    groupLabel: 'Datasets',
+    esriGroupId: 'floodzones-group',
+    tiles: `${agolVectorTileUrl}/Flood_Zones_2_and_3_Rivers_and_Sea_CCP1${layerNameSuffix}/VectorTileServer`,
+    showInKey: true,
+    visible: true,
+    sourceLayer: 'Flood Zones 2 and 3 Rivers and Sea CCP1',
+    visibleWhen: { menu: { dataset: ['floodzones'] } },
+    sublayers: [
+      {
+        id: 'climate-change',
+        label: 'Climate change (2070 to 2125)',
+        esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea CCP1/Flood Zones plus climate change/1',
+        showInKey: true,
+        visibleWhen: {
+          menu: {
+            dataset: ['floodzones'], timeframe: ['climatechange']
+          }
+        },
+        style: {
+          fill: { outdoor: '#F4A582', dark: '#BF3D4A' },
+          stroke: 'none'
+        },
+      },
+      {
+        id: 'data-unavailable',
+        label: 'Climate change data unavailable',
+        showInKey: true,
+        visibleWhen: {
+          menu: {
+            dataset: ['floodzones'], timeframe: ['climatechange']
+          }
+        },
+        style: { // This is used just for the key - so that it renders the pattern correctly.
+          fillPattern: 'dot',
+          fillPatternForegroundColor: { outdoor: '#000000', dark: '#ffffff' },
+          stroke: { outdoor: '#000000', dark: '#FFFFFF' },
+        }
+      },
+      {
+        id: 'data-unavailable-outline',
+        showInKey: false,
+        visibleWhen: {
+          menu: { dataset: ['floodzones'], timeframe: ['climatechange'] }
+        },
+        style: {
+          stroke: { outdoor: '#000000', dark: '#FFFFFF' },
+        },
+        esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea CCP1/Unavailable/0'
+      },
+      {
+        id: 'data-unavailable-light',
+        visibleWhen: {
+          mapStyleId: ['outdoor', 'black-and-white'],
+          menu: { dataset: ['floodzones'], timeframe: ['climatechange'] }
+        },
+        esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea CCP1/Unavailable/1',
+        esriUseServerStyle: true,
+        showInKey: false,
+      },
+      {
+        id: 'data-unavailable-dark',
+        visibleWhen: {
+          menu: { dataset: ['floodzones'], timeframe: ['climatechange'] },
+          mapStyleId: ['dark']
+        },
+        esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea CCP1/Unavailable/2',
+        esriUseServerStyle: true,
+        showInKey: false,
+      }
+    ]
+  }
+
+  const datasetFloodZones = {
+    id: 'floodzones',
+    label: 'Flood Zones',
+    groupLabel: 'Datasets',
+    esriGroupId: 'floodzones-group',
+    tiles: `${agolVectorTileUrl}/Flood_Zones_2_and_3_Rivers_and_Sea${layerNameSuffix}/VectorTileServer`,
+    showInKey: true,
+    sourceLayer: 'Flood Zones 2 and 3 Rivers and Sea',
+    visibleWhen: {
+      menu: { dataset: ['floodzones'] }
+    },
+    sublayers: [
+      {
+        id: 'flood-zone-2',
+        label: 'Flood Zone 2',
+        esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea/Flood Zone 2/1',
+        style: {
+          fill: { outdoor: '#1d70b8', dark: '#7fcdbb' },
+          stroke: 'none'
+        },
+      },
+      {
+        id: 'flood-zone-3',
+        label: 'Flood Zone 3',
+        esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea/Flood Zone 3/1',
+        style: {
+          fill: { outdoor: '#003078', dark: '#e5f5e0' },
+          stroke: 'none'
+        },
+      }
+    ]
+  }
+  return [datasetFloodZonesCC, datasetFloodZones]
+}