In firefox' console I see the following error: "NetworkError: 400 Bad Request - http://1.api.cartocdn.com/tobagoborn/api/v1/map/undefined/11/677/960.png"

The script below says the layer was created and loaded but it's not being displayed. I can't see reason as to why.

Any suggestions as to what causing this issue and how to solve it?

var map;
function init(){
  // initiate leaflet map
    var map = new L.Map('map_canvas',{
        doubleClickZoom:true,zoomControl:true,scrollWheelZoom: false,touchZoom: false,dragging: true, minZoom: 11, maxZoom: 13
    }).setView(new L.LatLng(11.23,  -60.70), 6);

    var tilesUrl = 'http://tobagoborn.com/tiles/tobagobasemap/{z}/{x}/{y}.png';
    L.tileLayer(tilesUrl, {Zoom: 13}).addTo(map);

  var xxx = cartodb.createLayer(map, {
        user_name: "xxx",
        type: 'cartodb',
        sublayers: [
                //table_name: 'lsites',
                sql: "SELECT * FROM lsites",
                interactivity: "landing_sites,number_of_boats,top_species,site_code"
    .on('done', function(layer) {
        alert("CartoDB layer loaded!");
            .on('error', function(err) {
      //log the error

  • Have you checked that the layer is also in geographic coordinates or within the range set on your canvas? – wunderkind Jan 13 '16 at 4:18
  • Everything worked when I created the app with version 1 of Cartodb library and not I am updating it to use version 3 of the library. Also, in my cartodb account, I can create a map view of what I want so the data is fine I think – ChrisJ Jan 13 '16 at 15:33

Which version of the library are you using? The correct way to load the latest version of cartodb.js would be:

<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />

< script src="http://libs.cartodb.com/cartodb.js/v3/3.15/cartodb.js"></script>

Also, you could find an example working with two sublayers with separate interactivity for each one here

  • That was it!! My links were bad – ChrisJ Jan 17 '16 at 0:02

This works for me to show the layer:

cartodb.createLayer(map, {
    user_name: "xxx",
    type: 'cartodb',
    sublayers: [{
        sql: "SELECT * FROM lsites",
        cartocss: '#lsites {marker-fill: #FF0000;}'

Possibly the syntax is different in the latest api?

API reference to "Creating Visualizations at Runtime"

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.