Component

Map (experimental)

A simple map component.

Displays a map, given a location and a zoom level. Maps can also display markers with popups. The map can be scrolled and zoomed.

This component uses the DEFRA map component.

Maps are inaccessible to many users. If you are using this component to display information, you must also display this information in an accessible way separately from the map.

Note that the order of positional co-ordinates for this map and its contents is longitude followed by latitude. This is particularly important for markers.

Search for usage of this component on GitHub.

Overview

How it looks (preview) (preview all)

An example map

Skip map

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

How to call this component

<%= render "components/map", {
  heading_text: "An example map",
  zoom: 12,
  centre: [
    -3.1883,
    55.9533
  ]
} %>

Accessibility acceptance criteria

The map must:

• have an accessible alternative, including a list of map markers separate to the map itself
• be usable with a keyboard
• provide a skip link to bypass the map for keyboard users
• have a heading

Links must:

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• indicate when they have focus
• change in appearance when touched (in the touch-down state)
• change in appearance when hovered
• be usable with touch
• be usable with voice commands
• have visible text
• have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

See all standard options

• id - accepts a string for the element ID attribute
• data_attributes - accepts a hash of data attributes
• aria - accepts a hash of aria attributes
• classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
• margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
• role - accepts a space separated string of roles
• lang - accepts a language attribute value
• open - accepts an open attribute value (true or false)
• hidden - accepts an empty string, ‘hidden’, or ‘until-found’
• tabindex - accepts an integer. The integer can also be passed as a string
• dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
• type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
• rel - accepts any valid rel attribute e.g. ‘nofollow’
• target - accepts a valid target attribute e.g. ‘_blank’
• title - accepts any string
• draggable - accepts a draggable attribute value (“true” or “false”)

Custom heading description and copyright (preview)

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.

Malvern, Worcestershire

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

Skip map

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

Contains OS data © Crown copyright and database rights 2026

<%= 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
} %>

With markers (preview)

Adds markers to the map. Markers have popups when clicked, containing the marker name and description. name is also used for the alt attribute of the marker for screen readers.

Popup content should be minimal, as markers are currently width limited in order to be readable on small screens.

The position of the map is automatically adjusted to include all markers, so centre values and a zoom are not needed. However if only one marker is on the map, centre values and a zoom are required.

London stations

Skip map

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

Locations on this map

<%= render "components/map", {
  heading_text: "London stations",
  markers: [
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1766,
          51.5163
        ]
      },
      properties: {
        name: "Paddington Station",
        description: "Designed by Isambard Kingdom Brunel and opened in 1838."
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1236,
          51.5316
        ]
      },
      properties: {
        name: "Kings Cross station",
        description: "Opened in 1852 and built on the site of a smallpox and fever hospital."
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1632,
          51.5224
        ]
      },
      properties: {
        name: "Marylebone Station"
      }
    }
  ]
} %>

With custom markers (preview)

Marker symbol type and colour can be customised. If this option is used to make different markers on the same map a key must be provided to explain to users what the different markers indicate.

Valid marker symbols are pin, circle or square. Allowed colour values are blue, green, orange or red.

Values for the key are the same as the markers.

London stations

As an avid train enthusiast, this map records the London stations that I have visited.

Skip map

Map key

• Stations I have visited
• Stations I have stood outside
• Stations I want to visit

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

Locations on this map

<%= render "components/map", {
  heading_text: "London stations",
  description: sanitize("<p>As an avid train enthusiast, this map records the London stations that I have visited.</p>
    "),
  key: [
    {
      name: "Stations I have visited",
      symbol: "square",
      colour: "red"
    },
    {
      name: "Stations I have stood outside",
      symbol: "pin",
      colour: "orange"
    },
    {
      name: "Stations I want to visit",
      symbol: "circle",
      colour: "green"
    }
  ],
  key_heading: "Key for map",
  markers: [
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1766,
          51.5163
        ]
      },
      properties: {
        name: "Paddington Station",
        description: "Designed by Isambard Kingdom Brunel and opened in 1838."
      },
      marker: {
        symbol: "square",
        colour: "red"
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1236,
          51.5316
        ]
      },
      properties: {
        name: "Kings Cross station",
        description: "Opened in 1852 and built on the site of a smallpox and fever hospital."
      },
      marker: {
        symbol: "pin",
        colour: "orange"
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1632,
          51.5224
        ]
      },
      properties: {
        name: "Marylebone Station"
      },
      marker: {
        colour: "green"
      }
    }
  ]
} %>

Hide markers beneath (preview)

By default any map pins are listed beneath the map for ease of accessibility. In some situations it may be preferable to produce a different alternative to the map, so this option can be used to hide that list.

London stations

Skip map

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

<%= render "components/map", {
  hide_markers_beneath: true,
  heading_text: "London stations",
  markers: [
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1766,
          51.5163
        ]
      },
      properties: {
        name: "Paddington Station",
        description: "Designed by Isambard Kingdom Brunel and opened in 1838."
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1236,
          51.5316
        ]
      },
      properties: {
        name: "Kings Cross station",
        description: "Opened in 1852 and built on the site of a smallpox and fever hospital."
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1632,
          51.5224
        ]
      },
      properties: {
        name: "Marylebone Station"
      }
    }
  ]
} %>

Passed geojson (preview)

Given a URL to a GeoJSON file, the map will draw markers and apply popups as specified in the file. The map will auto zoom and position based on the markers found.

Note that other markers can also be added to this map using the method already described. They will be included when automatically setting the map position and zoom.

Birmingham and surrounding places

Skip map

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

Locations on this map

<%= render "components/map", {
  url: "/assets/frontend/components/map/map-test.geojson",
  heading_text: "Birmingham and surrounding places",
  markers: [
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1766,
          51.5163
        ]
      },
      properties: {
        name: "Paddington Station",
        description: "Designed by Isambard Kingdom Brunel and opened in 1838."
      }
    }
  ]
} %>

Custom bounds (preview)

This allows the initial position of the map to be set, overriding the automatic adjustment to show all markers.

Places with Ham in their name

There's another one over in the east, look.

Skip map

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

Locations on this map

<%= render "components/map", {
  heading_text: "Places with Ham in their name",
  description: sanitize("<p>There's another one over in the east, look.</p>
    "),
  bounds: [
    -3.203169743770889,
    51.643668495828116,
    -0.8983602517140259,
    50.68105666989489
  ],
  markers: [
    {
      geometry: {
        type: "Point",
        coordinates: [
          -2.87,
          50.98
        ]
      },
      properties: {
        name: "Hambridge, Somerset"
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -2.52,
          51.49
        ]
      },
      properties: {
        name: "Hambrook, South Gloucestershire"
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -1.33,
          50.85
        ]
      },
      properties: {
        name: "Hamble-le-Rice, Hampshire"
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          1.326,
          51.233
        ]
      },
      properties: {
        name: "Ham, Kent"
      }
    }
  ]
} %>

Custom height (preview)

The map defaults to a height of 500px on desktop but this can be overridden if required. The height on tablet and mobile is set to be no taller than the window.

Paddington station

Skip map

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

Locations on this map

<%= render "components/map", {
  height: 200,
  heading_text: "Paddington station",
  markers: [
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1766,
          51.5163
        ]
      },
      properties: {
        name: "Paddington Station",
        description: "Designed by Isambard Kingdom Brunel and opened in 1838."
      }
    }
  ]
} %>