From d0d3fc6857df6097eae15f1fef2ad3b6be103615 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 6 Jul 2020 10:53:14 +0100
Subject: [PATCH] Add a map
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                               |  3 +-
 app/templates/admin_template.html             |  4 ++
 .../views/broadcast/preview-areas.html        | 45 +++++++++++++++++--
 tests/app/main/views/test_headers.py          |  8 ++--
 4 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/app/__init__.py b/app/__init__.py
index b596bdfdd..61237c7dc 100644
--- a/app/__init__.py
+++ b/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(),
diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index ec40d460b..318f116af 100644
--- a/app/templates/admin_template.html
+++ b/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]-->
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index 6b86fc3ba..2793bff16 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/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>
diff --git a/tests/app/main/views/test_headers.py b/tests/app/main/views/test_headers.py
index be940833d..003a208c1 100644
--- a/tests/app/main/views/test_headers.py
+++ b/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;"
     )