1

In CartoDB (https://carto.com/)'s popup CustomHTML, can I use some logic like "If..then", "loop" or so?

I want to use it for usecase something like below:

  • Avoiding representation if attributes are null.
  • Showing all images if image url list is given.

Would you give me the information for such function in CustomHTML?

1

CARTO infowindows use Mustache templates to display the values of each point in the infowindows. You would need to go to the HTML version of the infowindow and write:

<h4>c_distri</h4> {{#c_distri}} <p>{{c_distri}}</p> {{/c_distri}} {{^c_distri}} <p>No value</p> {{/c_distri}}

  • For the example I'm using a random column named c_distri.

This is "telling" to CARTO:

1- If there is a value (not nulls or empty cells) in the column named c_distri, display the values of the column within HTML paragraph tags.

{{#c_distri}} <p>{{c_distri}}</p> {{/c_distri}} 2- If there is no value (nulls or empty cells) in the column named c_distri, display the message "No value" within HTML paragraph tags.

{{^c_distri}} <p>No value</p> {{/c_distri}}

The complete HTML code for the infowindow could be this one:

<div class="cartodb-popup v2">
  <a href="#close" class="cartodb-popup-close-button close">x</a>
  <div class="cartodb-popup-content-wrapper">
    <div class="cartodb-popup-content">

      <h4>c_distri</h4>
      {{#c_distri}}
                <p>{{c_distri}}</p>
        {{/c_distri}}
        {{^c_distri}}
            <p>No value</p>
        {{/c_distri}}

    </div>
  </div>
  <div class="cartodb-popup-tip-container"></div>
</div>

You can find detailed information about Mustache.js templates here.

  • Thank you!! That is exactly I want to have. But how can I access latitude/longitude of POI in template? – kochizufan Oct 6 '16 at 12:51
  • I tried {{lat}} {{latitude}} {{the_geom.0}} {{the_geom.lat}} {{the_geom.latitude}} or so, but not works.. – kochizufan Oct 6 '16 at 13:50
  • it is not possible to display the coordinates from the_geom column in the infowindow. You could create a new column called" longitude" or "latitude" and populate it with the values from the longitude and latitude values from the_geom column. You could use SQL with the ST_X() and ST_Y() functions to extract the longitude and latitude values from the_geom column – oriolbx Oct 6 '16 at 13:55
  • Thank you, I can extract them by SQL : SELECT *, ST_X(the_geom) as lng, ST_Y(the_geom) as lat FROM table_name – kochizufan Oct 6 '16 at 14:31
  • yes or you could also create the new columns and then use a SQL UPDATE operation to populate those columns. For example: UPDATE tableName SET newColumn = ST_X(the_geom) – oriolbx Oct 6 '16 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.