-1

I am working on a map that I'd like to toggle 1 layer off/on. I followed this tutorial and it worked fine(w/ their data) and i started to add my own to it. My data worked fine w/ their base map but I'd like to use my original base map from the CartoDB UI (Nokia Satellite Day) but I'm not sure how to get that done, here's the current working state of the code. My attempt causes the button to stop working..

<!DOCTYPE html>
<html>
<head>
 <title>Lesson 2 | CartoDB.js | CartoDB</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<link rel="stylesheet" href="http://academy.cartodb.com/css/cdbui.css">

<style>
  html, body {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  #map {
    height: 70%;
    padding: 0;
    margin: 0;
  }
  #dashboard {
    height: 30%;
    padding: 25px;
    margin: 0;
    border-top: 5px solid #333;
  }
  #dash {
    margin: 25px 0;
    width: 400px;
  }
  button {
    margin-right: 10px;
    font-family: "Proxima Nova W01", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: transparent;
  }
  p {
    font-size: 17px;
    margin-bottom: 10px;
  }
</style>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://fast.fonts.net/jsapi/b6470a43-5105-49d3-95ae-75217a436bf8.js"></script>

</head>
<body>
<div id="map"></div>
<div id="dashboard">
    <h3 class="Title Title--xs">testing...</h3>
    <p>Layer controls</p>
<div id="buttons">
<button id="sublayer0" class="Btn Btn--l Btn--blue"><span>Areas of Interest</span>      
</button>
</div>
</div>

<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

<!-- Place your code in the script tags below -->
<script>
    window.onload = function() {
// Instantiate new map object, place it in 'map' element
var map_object = new L.Map('map', {
    center: [26.512424, -77.140892], // Bahamas
    zoom: 10
});

// Put layer data into a JS object
var layerSource = {
    user_name: 'shane-mccoy-design',
    type: 'cartodb',
    sublayers: [{
        sql: "SELECT * FROM areas_of_interest", // Bahamas
        cartocss: '#areas_of_interest{polygon-fill:#fb0303;polygon-opacity:0.9;line-color:#fb0303;line-width:1;line-opacity:1;}'
    }]
}
// For storing the sublayers
var sublayers = [];

// Pull tiles from OpenStreetMap
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map_object);

// Add data layer to your map
cartodb.createLayer(map_object,layerSource)
    .addTo(map_object)
    .done(function(layer) {
       for (var i = 0; i < layer.getSubLayerCount(); i++) {
           sublayers[i] = layer.getSubLayer(i);

       } 
    })
    .error(function(err) {
        console.log("error: " + err);
    });
    var sublayer0Shown = true;
$("#sublayer0").on('click', function() {
if (sublayer0Shown) {
    sublayers[0].show();
} else {
    sublayers[0].hide();
}
sublayer0Shown = !sublayer0Shown; 
});

}
  </script>
</body>
</html>

I tried adding:

     var vizjson_url = 'https://shane-mccoy-design.cartodb.com/api/v2/viz/40df9536-ef52-11e4-af32-0e0c41326911/viz.json';
     cartodb.createVis('map', vizjson_url) 

below the window onload function,

        window.onload = function() {
 var vizjson_url = 'https://shane-mccoy-design.cartodb.com/api/v2/viz/40df9536-ef52-11e4-af32-0e0c41326911/viz.json';
     cartodb.createVis('map', vizjson_url) 
// Instantiate new map object, place it in 'map' element
var map_object = new L.Map('map', {
    center: [26.512424, -77.140892], // Bahamas
    zoom: 10
 }); 

which gets the base map but causes the button to not work. I'm not great w/ JavaScript so i feel I'm missing something simple. I've searched around and can't quite figure it out.


<script>
    window.onload = function() {
var vizjson_url = 'https://shane-mccoy-design.cartodb.com/api/v2/viz/40df9536-ef52-11e4-af32-0e0c41326911/viz.json';
    cartodb.createVis('map', vizjson_url, {
    center: [26.512424, -77.140892], // Bahamas
    zoom: 10
});

// Put layer data into a JS object
var layerSource = {
    user_name: 'shane-mccoy-design',
    type: 'cartodb',
    sublayers: [{
        sql: "SELECT * FROM areas_of_interest", // Bahamas
        cartocss: '#areas_of_interest{polygon-fill:#fb0303;polygon-opacity:0.9;line-color:#fb0303;line-width:1;line-opacity:1;}'
    }]
}
// For storing the sublayers

// Pull tiles from OpenStreetMap

// Add data layer to your map
   .done(function(layers) {
        var sublayers = layers[1]; // layers[1] has the data layer; layers[0] has the basemap
        var sub1 = sublayers.getSubLayer(0);

    })
    .error(function(err) {
        console.log("error: " + err);
    });

    var sublayer0Shown = true;
$("#sublayer0").on('click', function() {
if (sublayer0Shown) {
    sublayers[0].show();
} else {
    sublayers[0].hide();
}
sublayer0Shown = !sublayer0Shown; 
});
}

I tried @Andy's suggestion, but not sure if i fully understand. I did get rid of the New map leaflet and map_object code and added theirs. Button still doesn't work at the moment.

1

The problem seems to be using createVis (which already includes the setup from the map you created in CartoDB) with creating a map through Leaflet.

Something like this should work:

window.onload = function() {
    var vizjson_url = 'https://shane-mccoy-design.cartodb.com/api/v2/viz/40df9536-ef52-11e4-af32-0e0c41326911/viz.json';
    cartodb.createVis('map', vizjson_url)
       .done(function(layers) {
            var sublayers = layers[1]; // layers[1] has the data layer; layers[0] has the basemap
            var sub1 = sublayers.getSubLayer(0);
            sub1.hide();
        })
       .error(function(err) {
          console.log("error error");
       });
}

If you do it with the viz.json url and createVis, however you configure your map in the CartoDB Editor will carry through to your JavaScript map.. That is, you don't have to hard code the basemap... just choose it in CartoDB's Editor and use the viz.json associated with it.

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.