Interactive map

The interactive map component: Users can click on a map pin, and a popup appears with details about that location. The map image size set up: 1280x720 pixels.

The Interactive Map Component helps users explore location-based information visually. It highlights key points of interest, and when users click on these points, a pop-up appears with relevant details. The pop-up is scrollable for additional content.

 

 


Component data

Component resources:
SCSS files

Functional grouping: Marketing and storytelling

Demo

Interactive map title - Neque porro quisquam


Do

  •  Use the correct business unit colour to highlight interactive points, ensuring they are clearly visible.
  •  Keep pop-up content concise and easy to read.
  • Provide alternative text (alt text) for all map markers so screen reader users can understand them.
  • Support keyboard navigation, allowing users to tab through points and close the pop-up easily.
  •  Include a clear close button so users can quickly return to the map.
  •  Write all displayed information in plain language to make it easy to understand.

Don't

  • Don’t overload the map with too many markers—this can make navigation difficult.
  • Don’t rely only on colour to indicate interactive points—always include icons or labels for clarity.
  • Don’t make the pop-up too large or difficult to close.
  • Don’t allow the pop-up to block important content when open.