How to hide popup content for certain entities
This is an advanced help doc that covers hiding parts of your popup content with custom HTML. To get started with custom popups in general, head over to this help doc.
Our example also uses region highlighting. To learn more about this, head over to this help doc.
In some cases, you might want to show some extra information like an image or a paragraph of text for a certain region or point, but not for others. In this case, with a bit of custom HTML, you can hide certain parts. Here's how:





div
and give it a class called
{{no-information}}
. As you might know, double curly brackets are used to look up a column in the data tab. This means that you are giving your div a class of the content of that column.
<b>{{Name}}</b>: {{2019}} barrels </br> <div class="{{no-information}}"> <div style="width: 250px; "> <div class="img" style="background-image: url({{Image}})"></div> <p>{{Information}}</p> </div> </div> <style> .img { background-size: cover; width: 100px; height: 100px; float: right; margin: 5px 5px 5px; } </style>
<style>
section, add a style of display:none to the
{{no-information}}
class. This will hide it. If you want to avoid everything from being hidden, just move that out of the
{{no-information}}
div.
<b>{{Name}}</b>: {{2019}} barrels </br> <div class="{{no-information}}"> <div style="width: 250px; "> <div class="img" style="background-image: url({{Image}})"></div> <p>{{Information}}</p> </div> </div> <style> .img { background-size: cover; width: 100px; height: 100px; float: right; margin: 5px 5px 5px; } .no-information{ display: none;} </style>