Merge pull request #3595 from alphagov/map-key

Add a key to the map
This commit is contained in:
Chris Hill-Scott
2020-09-09 16:03:27 +01:00
committed by GitHub
8 changed files with 111 additions and 21 deletions

View File

@@ -1,7 +1,7 @@
.area-list {
display: inline-block;
&-item {
display: inline-block;
@@ -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);
}
}
}

View File

@@ -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):

View File

@@ -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 %}

View File

@@ -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
})
);

View File

@@ -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>

View File

@@ -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 %}

View File

@@ -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 }}

View File

@@ -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,