When a user clicks up an infowindow, it gets all the data that I set through the CartoDB InfoWindow UI.

Sometimes, this data is a bit too long to fit into a small infowindow, so I want to truncate that data to say a 100 characters.

How do I edit the data before it is shown to the user in an InfoWindow? I'm creating the Vis(ualisation) from an existing visualisation on my CartoDB account using CartoDB.js.

1 Answer 1


You could do it with a SQL query. An example:

SELECT cartodb_id, the_geom_webmercator, substring(description,0,100) FROM table

In CartoDB Editor, you can't add custom Javascript code that allows you do this issue. But, you can do your own Javascript code in CartoDB.js. You should get the value of the variable (for example, {{description}} ) and truncate the value as you prefer. Example truncating a string:

var length = 100; var newString = oldString.substring(0,length);

  • But where in the custom code (for cartodb.js) do I do the SQL Query? How do I get the value of the variable {{description}} outside of CartoDB editor? As I understand it, {{description}} is just a placeholder in a template that CartoDB.js will replace and theres no way apparent way to get the value from it before it is replaced by CartoDB.js My workaround is this: apply an SQL query on the Visualisation inside the CartoDB editor to truncate the description with your query. Now all the infowindows only show the truncated description. It's an acceptable solution
    – Dyallo
    Commented Oct 20, 2014 at 18:56
  • Example using CartoDB.js: <!-- language: lang-js --> cartodb.createLayer(map, {<br/> user_name: 'xatpy',<br/> type: 'cartodb', sublayers: [{ sql: 'SELECT cartodb_id, the_geom_webmercator, substring(name,0,5) as "country_name" FROM world_borders', cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }', interactivity: 'country_name' }] }) .addTo(map) .done(function(layer) { cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['country_name']) });
    – Xatpy
    Commented Oct 24, 2014 at 11:16
  • Also, you could use a viz.json. So, you should edit your map in the Editor, generate the viz.json and then load it from CartoDb.js
    – Xatpy
    Commented Oct 24, 2014 at 11:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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