We are using the CartoDB.js API to create our visualizations at runtime using a pre-exsiting Google map. Everything seems to be working fine so far, except that we would like to show some sort of visual loading indicator while the cartodb layer tiles are loading to let the end user know that the map is still rendering.

I see that a visual loading indicator is displayed on the (google) map when I use the cartodb.createVis() function with a pre-defined visualization, however I do not see how I can access/use this with the API for my map visualization that I create at runtime.

Does anyone know how to display a loading indicator on the google map or have an example of doing so?

Thanks, Greg

1 Answer 1


You can use the loading gif we use in the dashboard. It is pretty simple to wire up, add the following to your JS,

var loader = new cdb.geo.ui.TilesLoader({ template: function(){ return '<div class="loader"></div>' } });

Then, inside you callback function after creating the layer on CartoDB add the following,

function addLoader(layer) {
  layer.bind('loading', function() { loader.show() });
  layer.bind('load',  function() { loader.hide(); });
  • Would be helpful to link to full code example
    – clhenrick
    Commented Feb 1, 2017 at 18:00

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.