Map (experimental) example

Custom heading description and copyright

All maps should have a heading, but the heading level will vary depending on the context. Heading size and subsequent headings within the component will be set based on the initial heading_level option.

Descriptions are rendered inside a govspeak block, so can include govspeak formatting. Descriptions are not required but are recommended, to help users with screen readers understand the purpose of the map.

How it looks (preview)

Malvern, Worcestershire

The Malvern Hills has been designated an area of outstanding natural beauty.

Loading map... This map uses JavaScript to work. To view the map, turn on JavaScript in your browser's settings.

How to call this example

<%= render "components/map", {
  heading_text: "Malvern, Worcestershire",
  heading_level: 3,
  description: sanitize("<p>The Malvern Hills has been designated an area of outstanding natural beauty.</p>
    "),
  copyright: sanitize("Contains OS data &copy; Crown copyright and database rights 2026"),
  centre: [
    -2.325062,
    52.107919
  ],
  zoom: 12
} %>