mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-05 21:08:24 -04:00
3c7364408b
I’ve never liked the style of the selected areas on the preview of a broadcast message. They were a compromise, taking what’s on the map page and giving it a shaded background so it looks less like a text box. The trouble is all these stroked elements jumbled together made the page look very busy. I think it can be a bit calmer if they look more like the ‘tag’ component[1] from the Design System, which only uses shading. Going for black text not blue, because it’s one less piece of visual differentiation – again, trying to keep the busyness level down. 1. https://design-system.service.gov.uk/components/tag/
66 lines
1.7 KiB
HTML
66 lines
1.7 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: 1,
|
|
color: '#005ea5',
|
|
fillColor: '#2B8CC4',
|
|
fillOpacity: 0.15,
|
|
weight: 2,
|
|
dashArray: [6, 7],
|
|
lineCap: 'butt'
|
|
})
|
|
);
|
|
{% endfor %}
|
|
|
|
{% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %}
|
|
polygons.push(
|
|
L.polygon({{polygon}}, {
|
|
color: '#0b0b0c',
|
|
fillColor: '#2B8CC4',
|
|
fillOpacity: 0.3,
|
|
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>
|