Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
  <head>
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
      }
​
      #map {
        height: 100%;
        width: 100%;
      }
      
      .checkbox-container {
        position: absolute;
        top: 15px;
        right: 55px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <ul class="checkbox-container">
      <li>
        <label for="watsan">watsan</label>
        <input id="watsan" type="checkbox" class="watsan-checkbox" checked="true" />
      </li>
      <li>
        <label for="borders">borders</label>
        <input id="borders" type="checkbox" class="borders-checkbox" checked="true" />
      </li>
    </ul>
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
    <script>
      var watsanLayer;
      var bordersLayer;
      
      $(document).ready(function () {
        cartodb.createVis('map', 'https://thenewschool.carto.com/u/brelsfoeagain/api/v2/viz/efd5facf-035c-40f6-beb2-d8066f08d870/viz.json')
          .done(function (vis, layers) {
            bordersLayer = layers[1].getSubLayer(0);
            watsanLayer = layers[1].getSubLayer(1);
          });
​
        $('.watsan-checkbox').change(function () {
          if ($('.watsan-checkbox').prop('checked')) {
            // If checked, show the layer
            watsanLayer.show();
          }
          else {
            // Else, hide it
            watsanLayer.hide();
          }
        });
        
        $('.borders-checkbox').change(function () {
          if ($('.borders-checkbox').prop('checked')) {
            // If checked, show the layer
            bordersLayer.show();
          }
          else {
            // Else, hide it
            bordersLayer.hide();
          }
        });
      });
    </script>
​
  </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ebrelsfordpro
0viewers