Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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" />
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
    
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
      }
      #map {
        height: 100%;
        width: 100%;
      }
      
      .queens-button {
        position: absolute;
        top: 15px;
        right: 15px;
      }
    </style>
    <script>
      var dataLayer;
      $(document).ready(function () {
        //
        // Initialize map from CartoDB: create the map and store the data layer for later
        //
        cartodb.createVis('map', 'https://eric.cartodb.com/api/v2/viz/b51aed84-e61d-11e5-9093-0e787de82d45/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 button: add an event handler to watch for clicks
        //
        $('.queens-button').click(function () {
          var sql = "SELECT * FROM nypd_motor_vehicle_collisions_june_2015 WHERE borough = 'QUEENS'";
          dataLayer.setSQL(sql);
        });
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
    <button class="queens-button">just Queens</button>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
ebrelsfordpro
0viewers