Map

Map

Maps are not covered within the GOVUK Design System. Our maps use leaflet.js which mostly has its own classes which we have specific styling for.

In order to use the map and map-popup styling you need to add the leaflet-map class to the root div.

Example implementation

<div id='root' class='leaflet-map'></div>
<script type='text/javascript' src='@Model.MainJSFile'></script>
<script type='text/javascript' src='@Model.VendorJSFIle'></script>

Map popup

<div class="smbc-map__item">
  <div class="smbc-map__item__header__block">
    <i class="fa fa-list smbc-map__item__header__block__icon" aria-hidden="true"></i>
    <span class="smbc-map__item__header__block__title">Item title</span>
  </div>
  <div class="smbc-map__item__body">
    <p>Name: Test</p>
    <p>Type: Test</p>
    <a href="#" target="_blank">Further Information</a>
  </div>
</div>