What Problem Does This Solve?

It’s hard to clearly identify the point associated with its labels, multiple labels overlap because of their length, size, or nearby position, or only some features need to be highlighted.

When to Use This Pattern

Use call-outs to clearly associate features with their respective label when space is limited and labels start overlapping because of their length, size or nearby position. Call-outs are a great mechanism to highlight a subset of objects with specific significance, e.g. mountain peaks over 8000 meters.

Call-outs are even more important in 3D maps where features may be obstructed by buildings or difficult to associate their actual position in the three-dimensional space.

What’s the Solution?

Connect symbols with their respective labels through a callout line, arrow, or similar graphic. In this way the user can clearly identify which label belongs to which feature. Consider using speech bubbles to accommodate longer labels, descriptions, or images like company logos.

Why Use This Pattern?


Special Considerations

Consider call-out lines to point vertically up if possible, this is the most natural placement and works well in 3D, e.g. on top of the roof.

In 3D maps, consider

  • setting vertical offset to points on the ground so they can still be visible even if they are hidden behind a building
  • making icons that are further away smaller so that users can better interpret distances
  • decluttering the view by removing overlapping icons, especially distant and less relevant features

Leave a Reply