Add a map

So you can check you’ve chosen the right areas, and to give you a clear
idea of where the boundaries of an area are.

The Javascript and CSS for the map is only loaded on this page because
it adds quite a few kb, and we don’t want to be sending assets to the
majority of our users who will never see them.

app/__init__.py

@@ -612,7 +612,8 @@ def useful_headers_after_request(response):
         "connect-src 'self' *.google-analytics.com;"
         "object-src 'self';"
         "font-src 'self' {asset_domain} data:;"
-        "img-src 'self' {asset_domain} *.google-analytics.com *.notifications.service.gov.uk {logo_domain} data:;"
+        "img-src 'self' {asset_domain} *.tile.openstreetmap.org *.google-analytics.com"
+        " *.notifications.service.gov.uk {logo_domain} data:;"
         "frame-src 'self' www.youtube-nocookie.com;".format(
             asset_domain=current_app.config['ASSET_DOMAIN'],
             logo_domain=get_logo_cdn_domain(),

app/templates/admin_template.html

@@ -14,6 +14,8 @@
 {% block head %}
   <link rel="stylesheet" media="screen" href="{{ asset_url('stylesheets/main.css') }}" />
   <link rel="stylesheet" media="print" href="{{ asset_url('stylesheets/print.css') }}" />
+  {% block extra_stylesheets %}
+  {% endblock %}
   <style>
       .govuk-header__container { border-color: {{header_colour}} }
   </style>
@@ -251,6 +253,8 @@
 {% endblock %}
 
 {% block bodyEnd %}
+  {% block extra_javascripts %}
+  {% endblock %}
   <!--[if gt IE 8]><!-->
   <script type="text/javascript" src="{{ asset_url('javascripts/all.js') }}"></script>
   <!--<![endif]-->

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

@@ -8,9 +8,48 @@
   Choose where to broadcast to
 {% endblock %}
 
+{% block extra_stylesheets %}
+  <link rel="stylesheet" href="{{ asset_url('stylesheets/leaflet.css') }}" />
+  <style>
+    #map {
+      z-index: 50;
+      margin-bottom: 30px;
+    }
+  </style>
+{% endblock %}
+
+{% block extra_javascripts %}
+  <script src="{{ asset_url('javascripts/leaflet.js') }}"></script>
+  <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 area in area_polygons %}
+      polygons.push(
+        L.polygon({{area}})
+      );
+    {% endfor %}
+
+    var polygonGroup = L.featureGroup(polygons).addTo(mymap);
+    mymap.fitBounds(polygonGroup.getBounds());
+
+  </script>
+{% endblock %}
+
 {% block maincolumn_content %}
 
-  {{ page_header("Choose where to broadcast to", back_link="#") }}
+  {{ page_header("Choose where to broadcast to", back_link="{{ url_for('.broadcast', service_id=current_service.id) }}") }}
 
   {% for area in selected %}
     {{ area.name }} (<a href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, area_slug=area.id) }}">remove</a>)&ensp;
@@ -36,9 +75,7 @@
   {% endfor %}
 
   {% if selected %}
-    {% for area in area_polygons %}
-      {{ area }}<br><br>
-    {% endfor %}
+    <div id="map"></div>
     <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id) }}" method="get">
       {{ sticky_page_footer('Continue to preview') }}
     </form>

tests/app/main/views/test_headers.py

@@ -20,7 +20,8 @@ def test_owasp_useful_headers_set(
         "object-src 'self';"
         "font-src 'self' static.example.com data:;"
         "img-src "
-        "'self' static.example.com *.google-analytics.com *.notifications.service.gov.uk static-logos.test.com data:;"
+        "'self' static.example.com *.tile.openstreetmap.org *.google-analytics.com"
+        " *.notifications.service.gov.uk static-logos.test.com data:;"
         "frame-src 'self' www.youtube-nocookie.com;"
     )
 
@@ -41,7 +42,8 @@ def test_headers_non_ascii_characters_are_replaced(
         "connect-src 'self' *.google-analytics.com;"
         "object-src 'self';"
         "font-src 'self' static.example.com data:;"
-        "img-src "
-        "'self' static.example.com *.google-analytics.com *.notifications.service.gov.uk static-logos??.test.com data:;"
+        "img-src"
+        " 'self' static.example.com *.tile.openstreetmap.org *.google-analytics.com"
+        " *.notifications.service.gov.uk static-logos??.test.com data:;"
         "frame-src 'self' www.youtube-nocookie.com;"
     )