MapTip

Maptip

WHAT

A MapTip is an informative message that appears when a user hovers the pointer over a feature, surface, or raster image. The purpose of a MapTip is to provide helpful content such as additional attributes, data, or images and therefore give users direct access to attribute information for that feature.

WHY

The map provides available content through markers, rich markers, and labels. Additional information can be retrieved through interactions that open sometimes invasive elements such as info pop-ups or info panels. As such, MapTips are useful for showing information that cannot be displayed on a marker or label but that doesn’t justify disrupting the user experience by opening a pop-up or panel.

WHEN

Because MapTips are initiated by a hover gesture, they are not accessible on touch screen devices and therefore should be used only to display information that is helpful but not essential to complete a task. An example of a useful MapTip is a tourist map that shows travelers the name of an attraction, hotel, or restaurant. On choropleth maps, the MapTip could show information about the hovered geographic area such as total value or even a small pie chart that graphs values by a certain attribute.

HOW

Provide MapTips that appear when hovering the pointer over a feature or tabbing through features using the keyboard. The MapTip should be self-sufficient with brief, helpful, clear, and consistent content. Avoid redundant or lengthy text; for numbers, add units.

Place the MapTip close to the hovered feature and at the pointer’s tail or head if possible. To avoid potential confusion, consider adding pointer arrows to indicate the relation of the MapTip to the feature. This is especially important when several nearby or overlapping features may have triggered the MapTip.

The MapTip can show immediately or after a brief delay, which depends on the anticipated usage of the information and weighing the value and amount of information with the annoyance of constant interruptions. For performance reasons, it is sometimes recommended to disable MapTips when they are not necessary, at smaller scales, or when they turn out to be more distracting to the user than helpful.

Users cannot interact with the content of a MapTip because moving the pointer will make them disappear. Therefore, do not provide links or buttons inside a MapTip because users will not be able to reach them. The exception to this rule is when MapTips are implemented so that they stay in place, or are sticky, without immediately disappearing. In this case, they can be treated as if they were info pop-ups.

Another aspect of MapTips is that they are triggered by the user, which distinguishes them from similar interactions such as through onboarding tutorials, which show tips automatically.

EXAMPLE

Find Your Candidates is a web-based app that was used to visualize the US House and Senate races in the 2020 election. It allowed users to find officials running for public office and to learn more about them. The points represented races for the House of Representatives and the photos represented races for the Senate, also highlighting the incumbent congressperson and their challengers. The app used MapTips to show the candidate’s name and party affiliation as a quick way to get basic information before the user clicked the candidate to see more details in an info panel. The app also featured an attribute filter to filter congresspersons by election level, party affiliation, or race and gender.

The Find Your Candidates app helps users explore information on election officials.
The Find Your Candidates app helps users explore information on election officials.

MORE EXAMPLES

Maptip
Sygic is an online map for travellers that shows Maptips for attractions, hotels, or restaurants.

Leave a Reply