FCRM-4472 flood-map page created for Nafra2 preview, with link from fzr

DEFRA · Sep 29, 2023 · db2d8b4 · db2d8b4
1 parent 6cd00f3
commit db2d8b4
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 29 deletions.
diff --git a/client/sass/_map.scss b/client/sass/_map.scss
@@ -95,44 +95,44 @@
         height: auto;
       }
 
-    .map-legend-item {
-      margin-top: 10px;
-      margin-left: 5px;
-      margin-right: 5px;
-      width: auto;
-      @include media(mobile) {
-        max-width: 70px;
-      }
-    }
-
-    .map-legend-image {
-      display: block;
-      margin-bottom: 3px;
-      width: 60px;
-
-      &--tall {
-        max-height: 30px;
+      .map-legend-item {
+        margin-top: 10px;
+        margin-left: 5px;
+        margin-right: 5px;
         width: auto;
+        @include media(mobile) {
+          max-width: 70px;
+        }
       }
-      @include media(mobile) {
-        // centres the images
-        margin-left: auto;
-        margin-right: auto;
-
+
+      .map-legend-image {
+        display: block;
+        margin-bottom: 3px;
+        width: 60px;
+
         &--tall {
+          max-height: 30px;
+          width: auto;
+        }
+        @include media(mobile) {
+          // centres the images
           margin-left: auto;
           margin-right: auto;
+
+          &--tall {
+            margin-left: auto;
+            margin-right: auto;
+          }
         }
       }
-    }
-    .map-legend-image-with-border {
-      border: 2px solid black;
-      // The box shadow is there to mask a gap between the image and the border
-      box-shadow: inset 0px 0px 0px 1px black;
+      .map-legend-image-with-border {
+        border: 2px solid black;
+        // The box shadow is there to mask a gap between the image and the border
+        box-shadow: inset 0px 0px 0px 1px black;
+      }
     }
   }
 }
-}
 
 #map--result:fullscreen {
   .map {
@@ -155,3 +155,74 @@
 .ol-scale-line {
   left: 115px;
 }
+
+.full-page-map-html {
+  height: 100vh;
+}
+
+.full-page-map-body {
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.full-page-map,
+.full-page-map .map-container,
+.full-page-map .map-container .map--result,
+.full-page-map .map-container .map {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+}
+
+.full-page-map {
+  z-index: 999;
+  padding-right: 290px;
+  background-color: #b1c7ee;
+
+  .map-container {
+    .ol-viewport {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .map-legend {
+    position: absolute;
+    right: 0;
+    top: 0; 
+    width: 290px;
+  }
+
+  .defra-map__back {
+    position: fixed;
+    text-indent: 2em;
+    width: 120px;
+    top: 0.5em;
+    left: 0.5em;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    background-color: white;
+    font-size: 16px;
+    line-height: 40px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4.828,11L12.314,18.485L10.899,19.899L1,10L10.899,0.101L12.314,1.515L4.828,9L19,9L19,11L4.828,11Z' style='fill:%230b0c0c;stroke:%230b0c0c;stroke-width:0.1px'/%3E%3C/svg%3E");
+    background-size: 20px;
+    background-position: 10px 10px;
+    background-repeat: no-repeat;
+  }
+
+  .ol-zoom {
+    top: auto;
+    left: auto;
+    bottom: 100px;
+    right: calc(290px + 2em);
+  }  
+}
diff --git a/server/plugins/router.js b/server/plugins/router.js
@@ -1,6 +1,7 @@
 const routes = [].concat(
   require('../routes/home'),
   require('../routes/flood-zone-results'),
+  require('../routes/flood-map'),
   require('../routes/flood-zone-results-explained'),
   require('../routes/location'),
   require('../routes/confirm-location'),

diff --git a/server/routes/flood-map.js b/server/routes/flood-map.js
@@ -0,0 +1,28 @@
+const Joi = require('joi')
+const { polygonToArray } = require('../services/shape-utils')
+module.exports = [{
+  method: 'GET',
+  path: '/flood-map',
+  options: {
+    description: 'Displays a full page map with the Nafra 2 layers',
+    handler: async (request, h) => {
+      const location = request.query.location
+      const polygon = polygonToArray(request.query.polygon)
+      const center = request.query.center ? JSON.parse(request.query.center) : []
+      return h.view('flood-map', {
+        location,
+        easting: center[0],
+        northing: center[1],
+        polygon: JSON.stringify(polygon),
+        center: JSON.stringify(center)
+      })
+    },
+    validate: {
+      query: Joi.object().keys({
+        polygon: Joi.string().required(),
+        center: Joi.string().required(),
+        location: Joi.string().required()
+      })
+    }
+  }
+}]
diff --git a/server/views/flood-map.html b/server/views/flood-map.html
@@ -0,0 +1,57 @@
+{% extends 'layout.html' %}
+{% set htmlClasses = "full-page-map-html" %}
+{% set bodyClasses = "full-page-map-body" %}
+{% block pageTitle %}
+Flood risk information for this location - Flood map for planning - GOV.UK
+{% endblock %}
+{% block content %}
+{{ super() }}
+
+<link rel="stylesheet" type="text/css" href="{{assetPath}}/fonts/style.css">
+<link rel="stylesheet" type="text/css" href="{{assetPath}}/stylesheets/ol.css">
+<link rel="stylesheet" type="text/css" href="{{assetPath}}/stylesheets/summary/index.css">
+
+{% from "button/macro.njk" import govukButton %}
+
+<script src="{{assetPath}}/javascripts/jquery.min.js"></script>
+<script src="{{assetPath}}/javascripts/summary.js"></script>
+
+{% if polygon %}
+<script>
+  $(function () {
+    var page = new FMP.SummaryPage({
+      polygon: {{ polygon }}
+        })
+      })
+</script>
+{% else %}
+<script>
+  $(function () {
+    var page = new FMP.SummaryPage({ easting: '{{easting}}', northing: '{{northing}}' })
+  })
+</script>
+{% endif %}
+
+{% endblock %}
+{% block footer %}
+{{ super() }}
+<div id="flood-map" class="govuk-grid-row full-page-map">
+  <!-- The Map -->
+    <figure class="map-container flood-zone-results-map govuk-!-margin-bottom-6" role="application">
+      <figcaption class="govuk-visually-hidden" aria-hidden="false">
+        A map showing the flood risk for the location you have provided
+      </figcaption>
+      <div class="mobile-heading">
+        <h2 class="heading-medium">Map</h2>
+        <a href="#legend">View map key</a>
+      </div>
+      <div id="map--result" class="map--result">
+        <div id="map" class="map">
+          {% include "./partials/map/no-js.html" %}
+        </div>
+        {% include "./partials/map/summary-legend.html" %}
+        <button onclick="history.back()" class="defra-map__back">Exit map</button>
+      </div>
+    </figure>
+</div>
+{% endblock %}
diff --git a/server/views/flood-zone-results.html b/server/views/flood-zone-results.html
@@ -70,8 +70,11 @@ <h2 class="govuk-heading-m">
       Flood map showing the flood zone your site is in
     </h2>
 
-    <p class="govuk-body">
+    <p class="govuk-body govuk-!-margin-bottom-1">
       The map shows the flood risk to your site and the surrounding area.
+      <div>
+        <a href="/flood-map?location={{location}}&polygon={{polygon}}&center={{center}}">Preview the map with Nafra2 layers</a>
+      </div>
     </p>
 
     {% if floodZone.isAreaBenefiting %}