1

CartoDB.js uses the mustache.js library to render tooltip windows. One of the features of mustache.js is allows functions to be defined, which are called when the template is rendered. An example is given below:

{
  "beatles": [
    { "firstName": "John", "lastName": "Lennon" },
    { "firstName": "Paul", "lastName": "McCartney" },
    { "firstName": "George", "lastName": "Harrison" },
    { "firstName": "Ringo", "lastName": "Starr" }
  ],
  "name": function () {
    return this.firstName + " " + this.lastName;
  }
}

Is it possible to pass such a function to a CartoDB tooltip template? I understand how basic variable substitution works, I am talking about the case where a function is called to generate the substitution. In the above example that is:

 "name": function () {
    return this.firstName + " " + this.lastName;
  }

which would be referenced as {{name}} in the template.

3

Yep! Checkout the documentation in CartoDB.js for more on how to integrate it into your map application: https://docs.cartodb.com/cartodb-platform/cartodb-js/ui-functions/

If you checkout the infowindow or tooltip template code, which you can access through the tray on the right in the CartoDB Editor -> Infowindow tab. Read more in the Editor docs to see how to change the HTML template for your infowindows/tooltips.

By the way, a template looks something like this:

<div class="cartodb-tooltip-content-wrapper">
  <div class="cartodb-tooltip-content">
    <h4>Area (Sq. Miles)</h4>
    <p>{{area_sq_miles}}</p>
    <h4>rank</h4>
    <p>{{rank}}</p>
    <h4>District Number</h4>
    <p>{{cd114fp}}</p>
  </div>
</div>

The template reads from the data available via the SQL applied in the SQL tab. In the example above, the fields area_sq_miles, rank, and cd114fp are all available column names in the dataset associated with the layer that the tooltip is associated with.

Mustache.js is a dependency of CartoDB.js, so you can use it when writing JavaScript applications without including the script elsewhere. A common use of it is using CartoDB's sql.execute to get JSON response and then using the templating of Mustache.render.

Also, checkout the CartoDB tutorial on custom interactivity where Mustache templates are discussed: https://docs.cartodb.com/tutorials/custom_interactivity/

  • Sorry, I wasn't as clear as I could have been. I was talking about the case where instead of directly substituting the column value from the SQL row, a function is applied to format that value. Using your example, imagine a {{area_sq_km}} which didn't map to column name, but instead applied a javascript function, e.g. with the signature function(data.content.area_sq_miles) which computed the value from other fields. – lotophage Jun 4 '16 at 4:11
  • Behind the scenes CartoDB.js is using mustache.js (github.com/janl/mustache.js), so it can be used as is just as you see in the examples on their github :) Updated answer above to include that. – Andy Eschbacher Jun 7 '16 at 1:34

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.