'New' Cartography: Collapsing data in a pop-up and… please kill your tables
“Do you really need ALL of that information in your pop-up?”
You might have a lot of information in your dataset… but every user probably doesn’t need to see all of it. For an earthquake, the average user just wants to know ‘where’ and ‘how big’. The attribute for ‘modified Mercali intensity’… probably not so much.
With the HTML <details> element, you can actually use some basic HTML to create a native, collapsible content area. Also, combining this with the HTML description list <dl> element lets you create some fancy hidden tables.
These are some great ways to show students how cartography can also include these more dynamic elements, depending on the needs of the map/application.
If you want to explore my map on your own, please open the map here: https://arcg.is/5XjT8
(You can then click on Layers, Events by Magnitude, and then look at the HTML in the pop-up and the Arcade expressions to get the 'colors)
Let’s dive into the <details>
A few months ago – I discovered that ArcGIS Online pop-ups now support the <details> element. What is the <details> element you ask?
Well – it’s a simple way to natively create a collapsible data structure in a website, which you can now use in a pop-up.
It really just requires 3 lines of code, so simple.
Here is a basic example:
<details>
<summary>More information - <i>click here to expand</i></summary>
<p>Hidden text</p>
</details>
The <summary> tag will serve as the ‘header’ and any information that falls after that and before the closing </details> tag will be collapsed/hidden.
There were 2 things that I got really excited about as well. The first one is the fact that CSS style tags can be used on the element, so you can modify how it looks/appears/displays.
The 2nd thing is the fact that you can nest multiple <details>. So… you can nest collapsible content (I am not going to dive into that here… but please explore it, it’s easy to do.).
So, you can now ‘nest’ any content that you want. You can actually nest entire HTML data structures within the details element as well, so tables, list, <div>s, etc… anything!
In the next step, let’s look at nesting some ‘tables’.
Please kill your tables
To date myself, I remember when tables ruled the internet. Literally every website relied on the lowly table (with hidden borders) to define it’s structure and layout. But CSS has come a long way since 1995.
The ‘point’ of the <table> element in websites is to have information presented that can be logically presented as columns and rows, structured with logical headers. If the data you are presenting isn’t really intended for a table… there must be something else that we could use…
Another element that was recently added to ArcGIS Online pop-ups is the description list or <dl>. The <dl> is used to present name:value pairs, which is really what we are trying to do when we present a set of attribute values in a tabular format.
The <dl> works somewhat similar to a <table>, but it provides some more flexibility. I also prefer it when reading the HTML, it just seems less confusing in the syntax.
A <dl></dl> is then composed of pairs of <dt></dt><dd></dd>, or terms and descriptions.
So, in a basic example we could have:
<dl>
<dt>Time</dt>
<dd>{time}</dd>
<dt>Place</dt>
<dd>{place}</dd>
<dl>
In this example, I have 2 value pairs and I am using the syntax for the field so that it will dynamically populate the value.
You could also include multiple terms with a single description, or one term and multiple descriptions… there are a lot of options.
The CSS style tag is also supported with <dl>, <dt>, and <dd>, so you can style them to look however you want.
Toss that <dl> into the <details>
In the example, I put a 2nd <dl> into a <detail> - so that we could make a hidden table of information. This is a great way to include a lot of information, but let users choose whether or not they want to see/engage with it.
So, please go explore the <details> element, it’s a clean and easy way to build some nice collapsible content structures for your pop-up!