mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-19 05:53:51 -04:00
be563e73c6
Avoided using `closest` as not supported by IE8-11 https://caniuse.com/#search=closest Used `parentElement` supported by IE9+ https://caniuse.com/#search=parentElement Used `className` as supported by IE9+ https://caniuse.com/#search=className Also rearranged the javascript for maps such that figuring out the polygon array is done first and then the time when we need to have the details component open before closing it again is kept to minimum
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.5,
|
|
color: '#2B8CC4', // $light-blue
|
|
fillColor: '#2B8CC4', // $light-blue
|
|
fillOpacity: 0.2,
|
|
weight: 2
|
|
})
|
|
);
|
|
{% endfor %}
|
|
|
|
{% 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,
|
|
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>
|