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>
      <li>
        <label for="public-toilet">public toilet</label>
        <input id="public-toilet" type="checkbox" class="public-toilet-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();
        });
        $('.public-toilet-checkbox').change(function () {
          updateSql();
        });
      });
​
      //
      // Update the SQL for the layer based on the current state of the checkboxes.
      //
      function updateSql() {
        var whereConditions = [];
        // Since there are more checkboxes we use a technique that is a bit different from previous examples. We gather all the parts of the WHERE clause in an array (whereConditions) based on which checkboxes are checked.
        // If you were using this technique you would do the following for each checkbox
        if ($('.urbanag-checkbox').prop('checked')) {
          whereConditions.push("watsan = 'urban_agriculture'");
        }
        if ($('.peepoint-checkbox').prop('checked')) {
          whereConditions.push("watsan = 'pee_point'");
        }
        if ($('.public-toilet-checkbox').prop('checked')) {
          whereConditions.push("watsan = 'toilet_public'");
        }
        var sql = "SELECT * FROM watsan";
​
        // If there are any whereConditions, we add WHERE to the SQL statement and the conditions
        if (whereConditions.length > 0) {
          // Then we combine them with ' OR ', so any of the conditions can be true.
          sql += ' WHERE ' + whereConditions.join(' OR ');
        }
        // Leaving this console.log() here so we can make sure we get valid SQL.
        console.log(sql);
        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