Merge pull request #3595 from alphagov/map-key

Add a key to the map

app/templates/views/broadcast/macros/area-map.html

@@ -0,0 +1,23 @@
+{% macro map(broadcast_message) %}
+  <div id="map"></div>
+  <ul>
+    <li class="area-key area-key--certain">
+      <span class="visually-hidden">
+        An area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.estimated_area) }} square miles
+      </span>
+      Will get
+      <span class="visually-hidden">the</span>
+      alert
+    </li>
+    <li class="area-key area-key--likely">
+      <span class="visually-hidden">
+        An extra area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.bleed.estimated_area - broadcast_message.simple_polygons.estimated_area) }} square miles is
+      </span>
+      Likely to get
+      <span class="visually-hidden">
+        the
+      </span>
+      alert
+    </li>
+  </ul>
+{% endmacro %}

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

@@ -5,10 +5,10 @@
   {% 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,
+        opacity: 0.8,
+        color: '#005ea5', // $light-blue
+        fillColor: '#005ea5', // $light-blue
+        fillOpacity: 0.15,
         weight: 2
       })
     );
@@ -17,10 +17,10 @@
   {% 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,
+        opacity: 0.3,
+        color: '#005ea5', // $black
+        fillColor: '#005ea5', // $light-blue
+        fillOpacity: 0.3,
         weight: 1
       })
     );

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

@@ -1,8 +1 @@
 <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

@@ -1,6 +1,7 @@
 {% from "components/button/macro.njk" import govukButton %}
 {% from "components/page-header.html" import page_header %}
-{% from "components/page-footer.html" import sticky_page_footer %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "views/broadcast/macros/area-map.html" import map %}
 
 {% extends "withnav_template.html" %}
 
@@ -51,9 +52,9 @@
   {% endfor %}
 
   {% if broadcast_message.areas %}
-    <div id="map"></div>
+    {{ map(broadcast_message) }}
     <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get">
-      {{ sticky_page_footer('Continue to preview') }}
+      {{ page_footer('Continue to preview') }}
     </form>
   {% endif %}
 

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

@@ -5,6 +5,7 @@
 {% from "components/banner.html" import banner %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "views/broadcast/macros/area-map.html" import map %}
 
 {% extends "withnav_template.html" %}
 
@@ -139,7 +140,7 @@
 
   {{ govukDetails({
     "summaryText": "Show map",
-    "html": '<div id="map"></div>'
+    "html": map(broadcast_message)
   }) }}
 
   {{ broadcast_message.template|string }}