The map component helps find locations. It suports users' interaction such as panning and zomming. The collapsible data panel provides additional information for each location pin. As the users zoom in or out and pan across or up and down, list in the data panel responds by reflecting additional data for the visible location pins only.

Component data

Component resources:
SCSS files | map.js

Functional grouping: Text and data


Configure: select the dropdowns below to display the variety of options that a map compnonent supports.

This is a map title

Skip map

Map skip anchor



Responsive preview

Usage best practices

Consider using map when:

  • needing to provide location information for many locations


Offer "view larger map" option especially when the map contains a large amounts of data.

Ensure text legibility on the map with proper font size and colour contrast.


Do not cover up map area by more than 40% with content.

Do not provide too many details without offering users the option to enlarge the map.