How to hide popup content for certain entities


NOTE: This video features an older version of the Projection map's Data tab. However, the custom popup functionality works in the same way as described in the video. Follow the step-by-step guide below for the most up-to-date way to hide popup content.

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:

1
Decide which information you'd like to display and add it to the Data tab in separate columns. Don't forget to bind your new columns under Metadata for popups.
2
Customize the content of your popups if you would like to apply formatting or add images.

3
You'll now notice that the popup styling is also applying to those states that you haven't added information for. It's time to fix this.
4
Add a new column to your data tab, call it "no-information" and make sure you add it to the Metadata for popups column binding, too.

5
Copy "no-information" to every cell where you don't have the image and paragraph.
6
Back in the Preview tab, wrap all the popup content that you don't have for all regions or points – in our case this is everything after the name and the number of barrels – in a 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. 
Our custom content area now looks like this: 
<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>
6
In the <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>

Related Articles