D3 Examples - CARTO basemap and layer selectors

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <title>basemap/layer Selectors</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="https://cartodb.com/assets/favicon.ico"/>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"/>
  <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css"/>
​
  <style>
  html, body {
    height: 100%;
    padding: 0px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
  }
  header {
    text-align:center;
    font-family: 'Montserrat', sans-serif;
  }
  .container {
    position:relative;
    margin-right: 30px;
    margin-left: 30px;
  }
  nav {
    position:absolute;
    left: 15px;
    width: 220px;
  }
  main {
    margin-left: 240px;
    margin-right: 15px;
    min-width: 300px;
    min-height: 400px;
  }
  </style>
</head>
<body>
  <header>
    <h2>This is a test site</h2>
  </header>
  <div class="container">
    <nav>
      <section>
        <input type="radio" name="basemap" id="voyager-base" value="rastertiles/voyager_labels_under" onclick="setBasemap('rastertiles/voyager_labels_under')"checked> Voyager Basemap</input><br>
        <input type="radio" name="basemap" id="light-base" value="light_all" onclick="setBasemap('light_all')"> Positron Basemap</input><br>
        <input type="radio" name="basemap" id="dark-base" value="dark_all" onclick="setBasemap('dark_all')"> Dark Matter Basemap</input><br>
      </section>
      <hr>
      <section>
        <input type="checkbox" name="p.layer" id="allp" value="all" onclick="pclickall()" > <span style="color:tomato">Prevalence by Year (all)</span></input><br>
        <input type="checkbox" name="p.layer" id="2016p" value="2016p" onclick="clicklayer('2016p',lyr2016p)"> 2016 Prevalence</input><br>
        <input type="checkbox" name="p.layer" id="2015p" value="2015p" onclick="clicklayer('2015p',lyr2015p)"> 2015 Prevalence</input><br>
        <input type="checkbox" name="p.layer" id="2014p" value="2014p" onclick="clicklayer('2014p',lyr2014p)"> 2014 Prevalence</input><br>
        <input type="checkbox" name="p.layer" id="2013p" value="2013p" onclick="clicklayer('2013p',lyr2013p)"> 2013 Prevalence</input><br>
      </section>
    </nav>
    <main id="map"></main>
  </div>
  <!-- include cartodb.js library -->
  <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  <script type="text/javascript">
  var bmapLyr;
  var allpid = ["2016p","2015p","2014p","2013p"];
  subLayerArray = [];
  basemapAdded = false;
  map = L.map('map', {
    zoomControl: true,
    center: [21.493103,15.898071],
    zoom: 4
  });
​
  function pclickall(){
    if (document.getElementById("allp").checked == false){
      for (i=0;i<allpid.length;i++){
        if (document.getElementById(allpid[i]).checked == true) {
          document.getElementById(allpid[i]).click();
        }
      }
    }else if(document.getElementById("allp").checked == true){
      for (i=0;i<allpid.length;i++){
        if (document.getElementById(allpid[i]).checked == false) {
          document.getElementById(allpid[i]).click();
        }
      }
    }
  }
  //this is what executes when you click on a layer check
  function clicklayer(a2,b2){
    unclickTop(a2);
    layerselect (a2, b2);
  }
  //this function unclicks the top layer if any of the other layers are unclicked (more design than anything
  function unclickTop(a1){
    if (document.getElementById(a1).checked == false){
      if(document.getElementById(a1).checked != document.getElementById("allp").checked){
        document.getElementById("allp").checked=false;
      }
    }
  }
  //shows or hides
  function layerselect(a1,b1){
    if (document.getElementById(a1).checked == false) {
      b1.hide();
    } else {
      b1.show();
    }
  }
​
  function main(){
    setBasemap('rastertiles/voyager_labels_under');
  };
​
  //sets the basemap based on radio input selection
  function setBasemap(b2) {
    var bmapURL = 'https://{s}.basemaps.cartocdn.com/' + b2 + '/{z}/{x}/{y}.png';
​
    if (basemapAdded){
      // when user makes new basemap selection redraw basemap layer
      bmapLyr._url = bmapURL;
      bmapLyr.redraw();
    } else {
      // add initial basemap layer
      bmapLyr = L.tileLayer(bmapURL, {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'}
    ).addTo(map);
    basemapAdded = true;
    // add data layers
    renderMap();
  }
};
​
//creating all the layers needed
function renderMap() {
  //  var subLyrQuery;
  //  var subLyrStyle;
  //  var subQryArg = ["dummy_2016","dummy_2015","dummy_2014","dummy_2013"]
  //  function setSubQry (x){
  //    subLyrQuery = "SELECT a.cartodb_id, a.the_geom, a.the_geom_webmercator, b.color FROM base_file a INNER JOIN "+x+" b ON a.key = b.key";
  //    for (i=0;i<subQryArg.length;i++){
  //      setSubQry(subQryArg[i]);
  //      layers.createSubLayer(){
  //        sql: subLyrQuery,
  //        cartocss: subLyrStyle
  //      }
  //    }
  //  };
  var subLyrQuery0 = "SELECT a.cartodb_id, a.the_geom, a.the_geom_webmercator, b.color FROM base_file a INNER JOIN dummy_2016 b ON a.key = b.key";
​
  var subLyrQuery1 = "SELECT a.cartodb_id, a.the_geom, a.the_geom_webmercator, b.color FROM base_file a INNER JOIN dummy_2015 b ON a.key = b.key";
​
  var subLyrQuery2 = "SELECT a.cartodb_id, a.the_geom, a.the_geom_webmercator, b.color FROM base_file a INNER JOIN dummy_2014 b ON a.key = b.key";
​
  var subLyrQuery3 = "SELECT a.cartodb_id, a.the_geom, a.the_geom_webmercator, b.color FROM base_file a INNER JOIN dummy_2013 b ON a.key = b.key";
​
  var subLyrStyle = "#layer { polygon-fill: #826DBA; polygon-opacity: .3; [color = 'pink']{ polygon-fill: #ff0066; } [color = 'green']{ polygon-fill: #00ff33; } [color = 'yellow']{ polygon-fill: #ffc400; } ::outline {line-width: 1;line-color: #FFFFFF;line-opacity: 0.5;}}";
​
  cartodb.createLayer(map, {
    user_name: 'aroth-carto',
    type: 'cartodb',
    sublayers: [
      {
        sql: subLyrQuery0,
        cartocss: subLyrStyle
      },
      {
        sql: subLyrQuery1,
        cartocss: subLyrStyle
      },
      {
        sql: subLyrQuery2,
        cartocss: subLyrStyle
      },
      {
        sql: subLyrQuery3,
        cartocss: subLyrStyle
      }
    ]
  })
  .addTo(map)
  .done(function(layers) {
​
    layers.getSubLayer(0).hide();
    layers.getSubLayer(1).hide();
    layers.getSubLayer(2).hide();
    layers.getSubLayer(3).hide();
    lyr2016p = layers.getSubLayer(0);
    lyr2015p = layers.getSubLayer(1);
    lyr2014p = layers.getSubLayer(2);
    lyr2013p = layers.getSubLayer(3);
​
  }).on('error', function() {
    console.log("Yikes a mundo! There's an error");
  });
};
​
window.onload = main;
</script>
</body>
</html>
​
    