_map.html.erb

<%
  centre ||= nil
  zoom ||= nil
  heading_text ||= nil
  heading_level ||= 2
  description ||= nil
  height ||= nil
  copyright ||= nil
  markers = local_assigns[:markers] || nil
  geojson = local_assigns[:url]
  hide_markers_beneath ||= nil
  key_heading_text ||= "Map key"
  key ||= nil
  bounds ||= nil

  heading_obj = { text: heading_text, heading_level: heading_level, margin_bottom: 4, font_size: "m"}
  heading_obj[:font_size] = "s" if heading_level > 2
  key_heading_obj = nil
  key_heading_obj = { text: key_heading_text, margin_bottom: 2, heading_level: heading_level + 1, font_size: "s" } if key

  map_config = {}
  map_config[:center] = centre if centre.kind_of?(Array) && centre.length == 2
  map_config[:zoom] = zoom if zoom
  map_config[:mapLabel] = "Interactive map: #{heading_text}"
  map_config[:containerHeight] = "#{height}px" if height
  map_config[:bounds] = bounds if bounds.kind_of?(Array) && bounds.length == 4

  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
  component_helper.set_id("map-#{SecureRandom.hex(4)}")
  component_helper.add_data_attribute({ module: "map" })
  component_helper.add_data_attribute({ config: map_config })
  component_helper.add_data_attribute({ markers: markers.to_json }) if markers
  component_helper.add_data_attribute({ geojson: geojson }) if geojson
  component_helper.add_data_attribute({ heading_level: key_heading_obj.nil? ? heading_level + 1 : heading_level + 2 })
  component_helper.add_data_attribute({ csp_worker: ActionController::Base.helpers.asset_path("components/map/maplibre-gl-csp-worker.js") })
  skip_link_id = "skip-#{SecureRandom.hex(4)}"
  @include_script ||= OpenStruct.new(script_included: false)
%>
<% if heading_text && ((map_config[:center] && map_config[:zoom]) || (markers || !geojson.nil?)) %>
  <%= render "govuk_publishing_components/components/heading", heading_obj %>
  <% if description %>
    <%= render "govuk_publishing_components/components/govspeak", {} do %>
      <%= description %>
    <% end %>
  <% end %>

  <%= render "govuk_publishing_components/components/skip_link", {
    text: "Skip map",
    href: "##{skip_link_id}",
  } %>

  <% if key %>
    <%= render "govuk_publishing_components/components/heading", key_heading_obj %>
    <ul class="govuk-list">
      <% key.each do |k| %>
        <li>
          <% if %w[circle pin square].include?(k["symbol"]) && %w[blue green orange red].include?(k["colour"]) %>
            <span class="app-c-map__key app-c-map__key--<%= k["symbol"] %> app-c-map__key--<%= k["colour"] %>"></span>
          <% end %>
          <%= k["name"] %>
        </li>
      <% end %>
    </ul>
  <% end %>

  <% unless @include_script[:script_included] %>
    <%= javascript_importmap_tags %>
    <%= javascript_import_module_tag "components/map/map" %>
    <% @include_script[:script_included] = true %>
  <% end %>

  <%= tag.div(**component_helper.all_attributes) do %>
    <div class="app-c-map">
      <span class="app-c-map__js-on">Loading map...</span>
      <span class="app-c-map__no-js">This map uses JavaScript to work. To view the map, turn on JavaScript in your browser's settings.</span>
    </div>
    <% if copyright %>
      <div class="govuk-grid-row app-c-map__copyright">
        <div class="govuk-grid-column-two-thirds">
          <p class="govuk-body-s app-c-map__copyright-text">
            <%= copyright %>
          </p>
        </div>
      </div>
    <% end %>
    <div id="<%= skip_link_id %>"></div>
    <% if markers and !hide_markers_beneath %>
      <div class="app-c-map__markers-list">
        <%= render "govuk_publishing_components/components/details", {
          title: "Locations on this map",
          classes: "js-list-markers",
        } do %>
          <%# this list will be populated by the JavaScript %>
          <ol class="govuk-list govuk-list--number govuk-list--spaced">
          </ol>
        <% end %>
      </div>
    <% end %>
  <% end %>
<% end %>