How to create tooltips for grouped symbols

Once you've enabled the grouping feature while customizing your symbol map, you can create tooltips for your grouped symbols, just like you would for individual symbol markers. This article will explain how to do so.

Turn on grouped symbol tooltips

To create a nifty grouped symbol tooltip in your symbol map, here’s what you have to do. 

First, enable grouped symbols. You can learn how to do so in this Academy article. 

Then go into the Annotate tab, and then to Tooltips section at the bottom. Turn on the Grouped symbol tooltips. Then click on Customize tooltips and you'll see two text fields appear. This is what they look like filled out (don't worry, we'll cover that in detail):

Display a list, the sum etc. of grouped symbols

In our article " How to create tooltips", we explain that you can fill tooltips with content using some placeholders. For grouped symbol tooltips, you can also use placeholders. 

To make life easier, there are three blue buttons that automatically insert these placeholders for you. 

• "first" corresponds to symbols[0], the first symbol in the group. The symbols are grouped together in descending order of its size, therefore this should display the biggest symbol in the group. From the drop-down menu, you can easily select the column you want to display the data from. 
• "last" corresponds to the last symbol in the group and works exactly the same way as the first button. 
• "symbols" corresponds to the group of symbols and this is useful when you want to display information across all symbols within that group. 

Count	{{ symbols.length }}	displays the number of symbols within the group
Block	{{ JOIN(MAP(TOOLTIP, symbols), "<hr>") }}	displays the content of symbol tooltip for each symbol within the group
SUM	{{ SUM(PLUCK(symbols, "number")) }}	displays the sum of values in the "number" within the group
JOIN	{{ SUM(PLUCK(symbols, "name")) }}	displays the strings in the "name" column as a list

To learn more about available expressions, find our full list of possible expressions on Github. 

Here's an example of how to use the drop-down menu to display whatever you want in your tooltips:

Example: Polling stations in NYC

Our map shows the location of polling stations in different boroughs of New York City for the year 2018. There are 1000+ polling stations in our data, so we group them to make the map more readable.

In this symbol map's dataset, we have 5 columns:

• Lat and Lon specify the geo-coordinates of these voting sites
• Borough specifies in which neighborhood the voting site is located.
• Site_Name indicates the name of the polling station
• Voter_Entrance which includes information about the exact street and building number from where the voting site could be accessed

A list of symbols for the grouped symbol tooltip

The easiest case is to display a list of symbols that are grouped together. To do so, Go to the grouped symbols tooltip text fields and click on the  symbols button. Then select Blocks from the drop-down menu:

As you can see, his will insert  {{ JOIN(MAP(TOOLTIP, symbols), "<hr>") }} into the text field. What this will do is to loop through the list of symbols within the groups and display the information for each one of these polling stations in the grouped symbols tooltip with a separation line in between created by the <hr> tag.

You can change the separation as you like it. Try e.g. to replace the <hr> with a simple comma. 

Summarizing information for the grouped symbol tooltip

There's also a way to display the grouped symbols tooltips differently from the symbol tooltips. Since some groups are very large containing more than 70 polling stations, we may not want to list every single polling station and its borough and entrance location in the grouped symbols tooltips. Instead, we can show a summary of information. 

Using the grouped symbols tooltip, we can display the name of the borough, the number of polling stations per group, and a list of all the site names of polling stations in that group. 

Here's the code snippet that we add to the Body of the grouped symbols tooltip:

In this part of {{ first.borough }}, one could find {{ LENGTH(symbols) }} polling stations:<br>
{{ JOIN(PLUCK(symbols, "site_name"), "<br>") }}

Clicking on " first" then choosing $.borough will add the placeholder {{ first.borough }} to show the name of Borough. Clicking on "symbols" then selecting Count will insert {{ symbols.length }} which will display the number of polling stations within that group, while selecting JOIN will insert a function that will list all the site names of the polling stations. The <br> tag creates a line break between the two sentences. 

For more on available HTML tags and how to style and format your tooltips, see "How to customize tooltips". 

Display the content of specific symbols

In this last part, we explain how to display the data of only specific symbols in your tooltip. 

  {{ symbols[0] }} returns the “content” of a symbol. This won’t work until you tell the tooltip editor which column content you want. 

For example, if you have a column in your data set called “Time”, writing  {{ symbols[0].Time }} will display the content of the column “Time” for the first symbol within the group. (The symbols are numbered starting from 0. To return the content of the second symbol, write {{ symbol[1].Time }} etc.) 

The column names are case-sensitive, so write them exactly as they appear in your imported data, or else the tooltip will not display correctly.