Skip to main content

Map Pin

A map pin is a visual representation used to mark a specific location or point of interest on a map.

Dos and Don'ts

Do
  • Keep tooltip labels short and succinct.
  • Always use the map pin to show singular points on a map.
Don't
  • Do not use anywhere other than within a map.
  • Don't display multiple tooltips at the same time on one map.

Anatomy

Annotated diagram of a map pin component showing its parts: tooltip, pin, map point, icon, text, and thumbnail.
  1. Tooltip (Optional): Provides succinctly written context.
  2. Pin: Contains the icon or text information.
  3. Map point (Optional): Marks a point on the map with higher prominence.
  4. Icon: Provides quickly recognised context.
  5. Text: Provides quickly recognised context.
  6. Thumbnail: Provides quickly recognised logos.

Variants

Icon

Can be used to mark points of interest on a map with visual or symbolic context.

Map pin component using the icon variant, showing an icon placeholder inside the pin.

Text

Text can be used to mark order of stops on a map with either numbers or letters depending on pillar alignment. It is recommended that no more than two characters should be used in this component.

Map pin component using the text variant, showing a short text label inside the pin.

Thumbnail

Images can be added in the thumbnail to display partner logos. Check out the thumbnail documentation.

Map pin component using the thumbnail variant, showing a thumbnail image placeholder inside the pin.

Modifiers

Colour

Different colour variations can be used to visually identify different points on a map, which can be designated within individual pillars.

Primary

Map pin in the primary colour variant.

Inverse light

The inverse map pin can provide a greater contrast against different map views, such as satellite.

Map pin in the inverse light colour variant.

01 Orange

Map pin in the 01 orange colour variant.

06 Aubergine

Map pin in the 06 aubergine variant.

Interaction

Interactive

A map pin should be interactive when it serves a specific purpose or action within the user interface.

Map pin shown in its interactive state, indicating it responds to user interaction.

Non-interactive

Use the map pin in a static form if you want the pin to retain its original appearance without any interactive features tied with the content or context.

Map pin shown in its non-interactive state, appearing static without any interactive features.

Tooltip position

Three tooltip positions are available within the map pin component; left, top and right. The tooltip can be removed if supporting body copy isn't required.

Only one map pin per map can have a tooltip applied to avoid content overlap.

Left

Map pin with the tooltip positioned to the left.

Top

Map pin with the tooltip positioned at the top.
Map pin with the tooltip positioned to the right.

Map point

The map point should be used consistently across use-cases or pillars. The recommendation is for the map point to be used for low and high priority use-cases.

Low priority

Used to mark individual points on a map that aren't a high priority or interest to the user.

Map pin with the low priority map point modifier applied.

High priority

Used to mark individual points on a map that are of high priority or interest to the user, such as their location, the courier or marking a delivery A to B.

Map pin with the high priority map point modifier applied.

Content

Text

A maximum of two characters are permitted within the map pin, allowing pillars to add a '+' to show added stops.

Map pin in the text modifier.

Icon

The icon should visually provide context to the map pin location or stop.

Map pin in the icon modifier.

Thumbnail

The image should be the logo of the partner.

Map pin in the thumbnail modifier.

Overrides

Map pin tooltip showing bold text used within the string override.
  1. String: The tooltip string can include bold type, when the string is a complete sentence or more.

Overflow

Tooltip

If the content exceeds the maximum width of 180px, the copy will wrap onto a new line. However it is recommended that the body copy doesn't exceed two lines.

Map pin tooltip wrapping onto a second line when content exceeds the maximum width of 180px.

Text

Map pin text will allow no more than two characters before truncating.

Map pin text truncating after two characters.

Interactive states

Default

Map pin in its default interactive state.

Active

Map pin in its active interactive state.

Focus

Map pin in its focus interactive state, showing a focus ring.

Examples

LTR examples

Here are some examples of map pin in left-to-right context.

Example of the map pin component used in a left-to-right layout.

RTL examples

The Map pin component doesn't change in RTL.
Back to top