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>
    <!--
    Load CartoDB's code so we can pull in our CartoDB maps.
    -->
    <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="urbanag">urban agriculture</label>
        <input id="urbanag" type="checkbox" class="urbanag-checkbox" />
      </li>
      <li>
        <label for="peepoint">pee point</label>
        <input id="peepoint" type="checkbox" class="peepoint-checkbox" />
      </li>
    </ul>
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
    <script>
      var dataLayer;
      $(document).ready(function () {
        //
        // Initialize map from CartoDB: create the map and store the data layer for later
        //
        cartodb.createVis('map', 'https://thenewschool.carto.com/u/brelsfoeagain/api/v2/viz/79edb122-0374-11e7-b189-0e233c30368f/viz.json')
          .done(function (vis, layers) {
            // Store the data layer for later:
            //  * layers[0] is the base layer (eg OpenStreetMap)
            //  * layers[1] is where all of your data layers go, and they're stored as "sublayers". The first one is numbered 0, the second is 1, etc. In this case we're getting the first sublayer.
            dataLayer = layers[1].getSubLayer(0);
          });
​
        //
        // Initialize the checkboxes: add an event handler to watch for changes.
        //
        // Call updateSql on any change.
        //
        $('.urbanag-checkbox').change(function () {
          updateSql();
        });
        $('.peepoint-checkbox').change(function () {
          updateSql();
        });
      });
​
      //
      // Update the SQL for the layer based on the current state of the checkboxes.
      //
      // $('.urbanag-checkbox').prop('checked') is true if the checkbox is checked.
      //
      // First we check to see if all the checkboxes are checked. If so we allow the type of watsan to be either 'urban_agriculture' or 'pee_point'
      //
      // Then, with 'else if' statements, we check the individual checkboxes.
      //
      // Finally, if nothing is checked we're showing everything.
      //
      function updateSql() {
          if ($('.urbanag-checkbox').prop('checked') && $('.peepoint-checkbox').prop('checked')) {
            var sql = "SELECT * FROM watsan WHERE watsan = 'urban_agriculture' OR watsan = 'pee_point'";
          }
          else if ($('.peepoint-checkbox').prop('checked')) {
            var sql = "SELECT * FROM watsan WHERE watsan = 'pee_point'";
          }
          else if ($('.urbanag-checkbox').prop('checked')) {
            var sql = "SELECT * FROM watsan WHERE watsan = 'urban_agriculture'";
          }
          else {
            var sql = "SELECT * FROM watsan";
          }
          dataLayer.setSQL(sql);
      }
    </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