mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-08 15:31:21 -04:00
0369472a76
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
75 lines
2.0 KiB
HTML
75 lines
2.0 KiB
HTML
<script src="{{ asset_url('javascripts/leaflet.js') }}"></script>
|
|
<script>
|
|
var polygons = []
|
|
|
|
{% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %}
|
|
polygons.push(
|
|
L.polygon({{polygon}}, {
|
|
opacity: 0.8,
|
|
color: '#005ea5', // $light-blue
|
|
fillColor: '#005ea5', // $light-blue
|
|
fillOpacity: 0.15,
|
|
weight: 2
|
|
})
|
|
);
|
|
{% endfor %}
|
|
|
|
{% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %}
|
|
polygons.push(
|
|
L.polygon({{polygon}}, {
|
|
opacity: 0.3,
|
|
color: '#005ea5', // $black
|
|
fillColor: '#005ea5', // $light-blue
|
|
fillOpacity: 0.3,
|
|
weight: 1
|
|
})
|
|
);
|
|
{% endfor %}
|
|
|
|
{% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %}
|
|
polygons.push(
|
|
L.polygon({{polygon}}, {
|
|
color: '#0b0b0c', // $black
|
|
fillOpacity: 0,
|
|
weight: 2
|
|
})
|
|
);
|
|
{% endfor %}
|
|
|
|
|
|
var mapElement = document.getElementById('map');
|
|
|
|
// if element is inside a details element then to make the map render correctly we open the details element
|
|
// and set up the map before closing the details map after
|
|
grandparent = mapElement.parentElement.parentElement;
|
|
if (grandparent.className.split(/\s+/).indexOf('govuk-details') > -1) {
|
|
details = grandparent;
|
|
details.open = true;
|
|
}
|
|
|
|
mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
|
|
|
|
var mymap = L.map(
|
|
'map',
|
|
{
|
|
scrollWheelZoom: false
|
|
}
|
|
)
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(mymap);
|
|
|
|
var polygonGroup = L.featureGroup(polygons).addTo(mymap);
|
|
mymap.fitBounds(
|
|
polygonGroup.getBounds(),
|
|
{padding: [1, 1]}
|
|
);
|
|
|
|
// if element is inside a details element then close the details element
|
|
if (details) {
|
|
details.open = false;
|
|
}
|
|
|
|
</script>
|