Merge pull request #3595 from alphagov/map-key

Add a key to the map

app/assets/stylesheets/components/area-list.scss

@@ -74,3 +74,48 @@
   }
 
 }
+
+#map {
+  z-index: 50;
+  margin-bottom: govuk-spacing(4);
+}
+
+.area-key {
+
+  display: inline-block;
+  position: relative;
+  margin-right: govuk-spacing(3);
+  margin-bottom: govuk-spacing(5);
+  height: govuk-spacing(7);
+  padding-left: govuk-spacing(8);
+  line-height: govuk-spacing(7);
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: govuk-spacing(7);
+    height: govuk-spacing(7);
+    box-sizing: border-box;
+    margin-right: govuk-spacing(1);
+  }
+
+  &--certain {
+    &:before {
+      border: 4px solid rgba($white, 0.1);
+      background: rgba($govuk-blue, 0.6);
+      box-shadow: inset 0 0 0 2px $black;
+    }
+  }
+
+  &--likely {
+    &:before {
+      padding: 1px;
+      border: 2px solid $govuk-blue;
+      background: rgba($govuk-blue, 0.2);
+    }
+  }
+
+}

app/broadcast_areas/polygons.py

@@ -14,6 +14,9 @@ class Polygons():
 
     approx_metres_to_degree = 111_320
     approx_square_metres_to_square_degree = approx_metres_to_degree ** 2
+    square_degrees_to_square_miles = (
+        approx_square_metres_to_square_degree / (1000 * 1000) * 0.386102
+    )
 
     # Estimated amount of bleed into neigbouring areas based on typical
     # range/separation of cell towers.
@@ -161,6 +164,12 @@ class Polygons():
     def point_count(self):
         return len(list(itertools.chain(*self.as_coordinate_pairs_long_lat)))
 
+    @property
+    def estimated_area(self):
+        return sum(
+            polygon.area for polygon in self
+        ) * self.square_degrees_to_square_miles
+
 
 def flatten_polygons(polygons):
     if isinstance(polygons, GeometryCollection):

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,
+        opacity: 0.8,
-        color: '#2B8CC4', // $light-blue
+        color: '#005ea5', // $light-blue
-        fillColor: '#2B8CC4', // $light-blue
+        fillColor: '#005ea5', // $light-blue
-        fillOpacity: 0.2,
+        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,
+        opacity: 0.3,
-        color: '#2B8CC4', // $black
+        color: '#005ea5', // $black
-        fillColor: '#2B8CC4', // $light-blue
+        fillColor: '#005ea5', // $light-blue
-        fillOpacity: 0.4,
+        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 }}

tests/app/main/views/test_broadcast.py

@@ -331,12 +331,30 @@ def test_preview_broadcast_areas_page(
     mock_get_draft_broadcast_message,
 ):
     service_one['permissions'] += ['broadcast']
-    client_request.get(
+    page = client_request.get(
         '.preview_broadcast_areas',
         service_id=SERVICE_ONE_ID,
         broadcast_message_id=fake_uuid,
     )
 
+    assert [
+        normalize_spaces(item.text)
+        for item in page.select('ul.area-list li.area-list-item')
+    ] == [
+        'England remove',
+        'Scotland remove',
+    ]
+
+    assert len(page.select('#map')) == 1
+
+    assert [
+        normalize_spaces(item.text)
+        for item in page.select('ul li.area-key')
+    ] == [
+        'An area of 176,714.9 square miles Will get the alert',
+        'An extra area of 3,052.8 square miles is Likely to get the alert',
+    ]
+
 
 def test_choose_broadcast_library_page(
     client_request,