notifications-admin/app/templates/views/broadcast/partials/area-map-javascripts.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('area-list-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(
    'area-list-map',
    {
      scrollWheelZoom: false
    }
  )

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <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>