Merge pull request #3608 from alphagov/more-maps

Add map of broadcast areas to view-broadcast page

app/templates/views/broadcast/partials/area-map-javascripts.html

@@ -0,0 +1,74 @@
+<script src="{{ asset_url('javascripts/leaflet.js') }}"></script>
+<script>
+  var polygons = []
+
+  {% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %}
+    polygons.push(
+      L.polygon({{polygon}}, {
+        opacity: 0.5,
+        color: '#2B8CC4', // $light-blue
+        fillColor: '#2B8CC4', // $light-blue
+        fillOpacity: 0.2,
+        weight: 2
+      })
+    );
+  {% endfor %}
+
+  {% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %}
+    polygons.push(
+      L.polygon({{polygon}}, {
+        opacity: 0.1,
+        color: '#2B8CC4', // $black
+        fillColor: '#2B8CC4', // $light-blue
+        fillOpacity: 0.4,
+        weight: 1
+      })
+    );
+  {% endfor %}
+
+  {% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %}
+    polygons.push(
+      L.polygon({{polygon}}, {
+        color: '#0b0b0c', // $black
+        fillOpacity: 0,
+        weight: 2
+      })
+    );
+  {% endfor %}
+
+
+  var mapElement = document.getElementById('map');
+
+  // if element is inside a details element then to make the map render correctly we open the details element
+  // and set up the map before closing the details map after
+  grandparent = mapElement.parentElement.parentElement;
+  if (grandparent.className.split(/\s+/).indexOf('govuk-details') > -1) {
+    details = grandparent;
+    details.open = true;
+  }
+
+  mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
+
+  var mymap = L.map(
+    'map',
+    {
+      scrollWheelZoom: false
+    }
+  )
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(mymap);
+
+  var polygonGroup = L.featureGroup(polygons).addTo(mymap);
+  mymap.fitBounds(
+    polygonGroup.getBounds(),
+    {padding: [1, 1]}
+  );
+
+  // if element is inside a details element then close the details element
+  if (details) {
+    details.open = false;
+  }
+
+</script>

app/templates/views/broadcast/partials/area-map-stylesheets.html

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="{{ asset_url('stylesheets/leaflet.css') }}" />
+<style>
+  #map {
+    z-index: 50;
+    margin-bottom: 30px;
+    border: 1px solid #b1b4b6;
+  }
+</style>

app/templates/views/broadcast/preview-areas.html

@@ -9,74 +9,11 @@
 {% endblock %}
 
 {% block extra_stylesheets %}
-  <link rel="stylesheet" href="{{ asset_url('stylesheets/leaflet.css') }}" />
+  {% include "views/broadcast/partials/area-map-stylesheets.html" %}
-  <style>
-    #map {
-      z-index: 50;
-      margin-bottom: 30px;
-      border: 1px solid #b1b4b6;
-    }
-  </style>
 {% endblock %}
 
 {% block extra_javascripts %}
-  <script src="{{ asset_url('javascripts/leaflet.js') }}"></script>
+  {% include "views/broadcast/partials/area-map-javascripts.html" %}
-  <script>
-    var mapElement = document.getElementById('map');
-    mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
-    var mymap = L.map(
-      'map',
-      {
-        scrollWheelZoom: false
-      }
-    )
-    var polygons = []
-
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    }).addTo(mymap);
-
-    {% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %}
-      polygons.push(
-        L.polygon({{polygon}}, {
-          opacity: 0.5,
-          color: '#2B8CC4', // $light-blue
-          fillColor: '#2B8CC4', // $light-blue
-          fillOpacity: 0.2,
-          weight: 2
-        })
-      );
-    {% endfor %}
-
-    {% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %}
-      polygons.push(
-        L.polygon({{polygon}}, {
-          opacity: 0.1,
-          color: '#2B8CC4', // $black
-          fillColor: '#2B8CC4', // $light-blue
-          fillOpacity: 0.4,
-          weight: 1
-        })
-      );
-    {% endfor %}
-
-    {% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %}
-      polygons.push(
-        L.polygon({{polygon}}, {
-          color: '#0b0b0c', // $black
-          fillOpacity: 0,
-          weight: 2
-        })
-      );
-    {% endfor %}
-
-    var polygonGroup = L.featureGroup(polygons).addTo(mymap);
-    mymap.fitBounds(
-      polygonGroup.getBounds(),
-      {padding: [1, 1]}
-    );
-
-  </script>
 {% endblock %}
 
 {% block maincolumn_content %}

app/templates/views/broadcast/view-message.html

@@ -1,5 +1,6 @@
 {% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/button/macro.njk" import govukButton %}
+{% from "components/details/macro.njk" import govukDetails %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/banner.html" import banner %}
 {% from "components/page-header.html" import page_header %}
@@ -7,6 +8,14 @@
 
 {% extends "withnav_template.html" %}
 
+{% block extra_stylesheets %}
+  {% include "views/broadcast/partials/area-map-stylesheets.html" %}
+{% endblock %}
+
+{% block extra_javascripts %}
+  {% include "views/broadcast/partials/area-map-javascripts.html" %}
+{% endblock %}
+
 {% block service_page_title %}
   {% if broadcast_message.status == 'pending-approval' %}
     {% if broadcast_message.created_by == current_user and current_user.has_permissions('send_messages') %}
@@ -118,7 +127,7 @@
 
   {% for area in broadcast_message.areas %}
     {% if loop.first %}
-      <ul class="area-list">
+      <ul class="area-list govuk-!-margin-bottom-4">
     {% endif %}
         <li class="area-list-item area-list-item--unremoveable">
           {{ area.name }}
@@ -128,6 +137,11 @@
     {% endif %}
   {% endfor %}
 
+  {{ govukDetails({
+    "summaryText": "Show map",
+    "html": '<div id="map"></div>'
+  }) }}
+
   {{ broadcast_message.template|string }}
 
 {% endblock %}