Add a key to the map

To help people understand that broadcasting is not a precise technology,
we have shown the estimate bleed area on the map.

Because people aren’t familiar with the technology a visual only clue is
not enough. So this commit adds a key to the map, which explains what
the different outlines mean.

It also removes the sticky footer from this page to:
- make the key visible on the page
- make people scroll and review the map before they get to the big green
  button
- not reduce the size of the map any further

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,6 @@
 {% 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 %}
 
 {% extends "withnav_template.html" %}
 
@@ -52,8 +52,16 @@
 
   {% if broadcast_message.areas %}
     <div id="map"></div>
+    <div>
+      <div class="area-key area-key--certain">
+        Will get alert
+      </div>
+      <div class="area-key area-key--likely">
+        Likely to get alert
+      </div>
+    </div>
     <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 %}