3

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

GregH
  • 45
  • 2

1 Answers1

3

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(); });
}
andrewxhill
  • 2,468
  • 12
  • 17