1

I followed the Cartodb Toggle Map View tutorial and I inserted the corresponding elements from my own map into the code and it's not working for some reason, all I see is a blank page. I've posted my code below, and here is the actual map in Cartodb. All I want to do is create two buttons that allow you to toggle between the two layers of data I've created in the map.

<html>
<head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
  <![endif]-->
  <style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #cartodb-map { width: 100%; height:100%; background: black;}
  </style>

  <script>
    var map;
    function init(){
      // initiate leaflet map
      map = new L.Map('cartodb-map', { 
        center: [0,0],
        zoom: 2
      })

      var layerUrl = 'http://rjharris.cartodb.com/api/v2/viz/8f8fb646-6bbf-11e4-a77f-0e018d66dc29/viz.json';

var sublayers = [];

cartodb.createLayer(map, layerUrl)
  .addTo(map)
  .on('done', function(layer) {
    // change the query for the first layer
    var subLayerOptions = {
      sql: "SELECT * FROM medicaid_expansion",
      cartocss: "#medicaid_expansion {
   polygon-opacity: 0.7;
   line-color: #FFF;
   line-width: 1;
   line-opacity: 1;
}

#medicaid_expansion[expansion="Expanding\n"] {
   polygon-fill: #A6CEE3;
}
#medicaid_expansion[expansion="No Expansion"] {
   polygon-fill: #1F78B4;
}
#medicaid_expansion[expansion="Currently in Debate"] {
   polygon-fill: #B2DF8A;
}
#medicaid_expansion[expansion="Expanding"] {
   polygon-fill: #33A02C;
}
#medicaid_expansion[expansion="Expanding\n\n"] {
   polygon-fill: #FB9A99;
}
#medicaid_expansion[expansion="No Expansion\n"] {
   polygon-fill: #E31A1C;
}"
    }

    var sublayer = layer.getSubLayer(0);

    sublayer.set(subLayerOptions);

    sublayers.push(sublayer);
  }).on('error', function() {
    //log the error
  });

  </script>
</head>
<body onload="init()">
  <div id='cartodb-map'></div>
</body>
</html>
Improve this question
1

1 Answer 1

Reset to default
1

Looks like you have some syntax errors with your script. For example you are using double quotes for quoting parts of a string when using double quotes for quoting the string itself which will not work.

Also you have linebreaks that are preventing your code from working correctly.

+you have a missing '}' at the end of your script.

Here you have a working version of it. Also remember that SQL and CartoCSS are read-only on private tables.

    <html>
<head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
  <![endif]-->
  <style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #cartodb-map { width: 100%; height:100%; background: black;}
  </style>

  <script>
    var map;
    function init(){
      // initiate leaflet map
      map = new L.Map('cartodb-map', { 
        center: [0,0],
        zoom: 2
      })

      var layerUrl = 'http://rjharris.cartodb.com/api/v2/viz/8f8fb646-6bbf-11e4-a77f-0e018d66dc29/viz.json';

var sublayers = [];

cartodb.createLayer(map, layerUrl)
  .addTo(map)
  .on('done', function(layer) {
    // change the query for the first layer
    var subLayerOptions = {
      sql: 'SELECT * FROM medicaid_expansion',
      cartocss: '#medicaid_expansion { polygon-opacity: 0.7; line-color: #FFF; line-width: 1; line-opacity: 1;} #medicaid_expansion[expansion="Expanding"] {polygon-fill: #A6CEE3; } #medicaid_expansion[expansion="No Expansion"] { polygon-fill: #1F78B4; } #medicaid_expansion[expansion="Currently in Debate"] { polygon-fill: #B2DF8A;} #medicaid_expansion[expansion="Expanding"] { polygon-fill: #33A02C; } #medicaid_expansion[expansion="Expanding"] { polygon-fill: #FB9A99; }#medicaid_expansion[expansion="No Expansion"] {polygon-fill: #E31A1C;}'
    }

    var sublayer = layer.getSubLayer(0);

    sublayer.set(subLayerOptions);

    sublayers.push(sublayer);
  }).on('error', function() {
    //log the error
  });
}

  </script>
</head>
<body onload="init()">
  <div id='cartodb-map'></div>
</body>
</html>

Cheers!

Improve this answer

Your Answer

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

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