mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-04 19:48:26 -04:00
969e7a6dbd
Broadcasting is not a precise technology, because: - cell towers are directional - their range varies depending on whether they are 2, 3, 4, or 5G (the higher the bandwidth the shorter the range) - in urban areas the towers are more densely packed, so a phone is likely to have a greater choice of tower to connect to, and will favour a closer one (which has a stronger signal) - topography and even weather can affect the range of a tower So it’s good for us to visually indicate that the broadcast is not as precise as the boundaries of the area, because it gives the person sending the message an indication of how the technology works. At the same time we have a restriction on the number of polygons we think and area can have, so we’ve done some work to make versions of polygons which are simplified and buffered (see https://github.com/alphagov/notifications-utils/pull/769 for context). Serendipitously, the simplified and buffered polygons are larger and smoother than the detailed polygons we’ve got from the GeoJSON files. So they naturally give the impression of covering an area which is wider and less precise. So this commit takes those simple polygons and uses them to render the blue fill. This makes the blue fill extend outside the black stroke, which is still using the detailed polygons direct from the GeoJSON.
112 lines
3.3 KiB
HTML
112 lines
3.3 KiB
HTML
{% from "components/button/macro.njk" import govukButton %}
|
|
{% from "components/page-header.html" import page_header %}
|
|
{% from "components/page-footer.html" import sticky_page_footer %}
|
|
|
|
{% extends "withnav_template.html" %}
|
|
|
|
{% block service_page_title %}
|
|
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;
|
|
border: 1px solid #b1b4b6;
|
|
}
|
|
</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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(mymap);
|
|
|
|
{% for polygon in broadcast_message.simple_polygons %}
|
|
polygons.push(
|
|
L.polygon({{polygon}}, {
|
|
color: '#2B8CC4', // $light-blue
|
|
opacity: 0.4,
|
|
fillColor: '#2B8CC4', // $light-blue
|
|
fillOpacity: 0.3,
|
|
weight: 1
|
|
})
|
|
);
|
|
{% endfor %}
|
|
|
|
{% for polygon in broadcast_message.polygons %}
|
|
polygons.push(
|
|
L.polygon({{polygon}}, {
|
|
color: '#0b0b0c', // $black
|
|
fillOpacity: 0,
|
|
weight: 2
|
|
})
|
|
);
|
|
{% endfor %}
|
|
|
|
var polygonGroup = L.featureGroup(polygons).addTo(mymap);
|
|
mymap.fitBounds(
|
|
polygonGroup.getBounds(),
|
|
{padding: [5, 5]}
|
|
);
|
|
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block maincolumn_content %}
|
|
|
|
{{ page_header(
|
|
"Choose where to broadcast to",
|
|
back_link=url_for('.view_template', service_id=current_service.id, template_id=broadcast_message.template_id)
|
|
) }}
|
|
|
|
{% for area in broadcast_message.areas %}
|
|
{% if loop.first %}
|
|
<ul class="area-list">
|
|
{% endif %}
|
|
<li class="area-list-item">
|
|
{{ area.name }} <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">remove</a>
|
|
</li>
|
|
{% if loop.last %}
|
|
{{ govukButton({
|
|
"element": "a",
|
|
"text": "Add another area",
|
|
"href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
|
|
"classes": "govuk-button--secondary govuk-!-margin-bottom-5"
|
|
}) }}
|
|
</ul>
|
|
{% endif %}
|
|
{% else %}
|
|
<p class="govuk-body">
|
|
{{ govukButton({
|
|
"element": "a",
|
|
"text": "Add broadcast areas",
|
|
"href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
|
|
"classes": "govuk-button--secondary"
|
|
}) }}
|
|
</p>
|
|
{% endfor %}
|
|
|
|
{% if broadcast_message.areas %}
|
|
<div id="map"></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') }}
|
|
</form>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|