I am attempting to create a map with two layers: a CartoDB Torque visualization on top and a Google heatmap layer underneath. So far I have only been able to get them to draw in the opposite order I'm going for. I have tried calling a setTimeout on cartodb.createLayer and reordering when the layers are created. Can this ordering be done via either the Google Maps API or CartoDB? Below is the relevant code.

heatmapData = [lots of new google.maps.LatLng()]

var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    opacity: 0.5,
    gradient: g,
    radius: 12


cartodb.createLayer(map, 'http://catalina.cartodb.com/api/v2/viz/2ed4ec6e-5f84-11e4-ab03-0e853d047bba/viz.json')
    .addTo(map, 0)
    .on('done', function(layer) {
        //do nothing
    .on('error', function(err) {
        alert("some error occurred: " + err);

Full code available on http://catalinagis.org/bison2


I think that could be related with the pane each layer is taking not the order you add to the map.

In torque for gmaps we use CanvasLayer and it adds itself a overlaysPane (https://github.com/CartoDB/torque/blob/master/lib/torque/gmaps/CanvasLayer.js#L54), I guess changing the pane or zindex or the layer would work

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.