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%;
      }
      
      .urbanag-checkbox-container {
        position: absolute;
        top: 15px;
        right: 55px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div class="urbanag-checkbox-container">
      <label for="urbanag">just show urban agriculture</label>
      <input id="urbanag" type="checkbox" class="urbanag-checkbox" />
    </div>
    <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 checkbox: add an event handler to watch for clicks
        //
        $('.urbanag-checkbox').change(function () {
          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

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

Dismiss x
public
Bin info
ebrelsfordpro
0viewers