CartoDB Example

Example usage of dynamic rendering in CartoDB

HTML

<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-9">
    <div id="map"></div>
  </div>
  <form id="mapControl" class="col-3" action="">
    <div class="form-group">
      <label for="borough">Borough</label>
      <select name="borough" class="form-control">
                <option value="">- All -</option>
                <option value="The Bronx">The Bronx</option>
                <option value="Brooklyn">Brooklyn</option>
                <option value="Manhattan">Manhattan</option>
                <option value="Staten Island">Staten Island</option>
                <option value="Queens">Queens</option>
            </select>
    </div>
    <div class="form-group">
      <label for="units">Number of Units</label>
      <select name="units" class="form-control">
                <option value="">- All -</option>
                <option value="small">0-50</option>
                <option value="medium">51-300</option>
                <option value="large">301-1000</option>
                <option value="xlarge">1001+</option>
            </select>
    </div>
    <div class="form-group">
      <label for="floors">Number of Floors</label>
      <select name="floors" class="form-control">
                <option value="">- All -</option>
                <option value="small">0-10</option>
                <option value="medium">11-30</option>
                <option value="large">31-60</option>
                <option value="xlarge">61+</option>
            </select>
    </div>
  </form>
</div>

CSS

#map {
  width: 100%;
  height: 500px;
}

JavaScript

$('document').ready(function() {
  var myCustomLayer = undefined;

  var map = new L.Map('map', {
    zoomControl: false,
    center: [40.7142, -74.0064],
    zoom: 11
  });

  L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
    attribution: 'Stamen'
  }).addTo(map);

  cartodb.createLayer(map, 'http://fillerwriter.cartodb.com/api/v2/viz/fccd7880-fa26-11e2-84c8-5404a6a69006/viz.json')
    .addTo(map)
    .on('done', function(layer) {
      myCustomLayer = layer;
      //layer.setQuery('SELECT * FROM nyc_appartments WHERE units > 200');
      layer.setInteraction(true);
    });

  $('#mapControl select').change(function() {
    redrawCartoLayer();
  });

  function redrawCartoLayer() {
    if (myCustomLayer !== undefined) {
      var baseQuery = 'SELECT * FROM nyc_appartments WHERE (1 = 1)';
      var borough = $('select[name="borough"]').val();
      var units = $('select[name="units"]').val();
      var floors = $('select[name="floors"]').val();
      if (borough != '') {
        baseQuery = baseQuery + " AND (borough = '" + borough + "')";
      }
      if (units != '') {
        var subQuery = '';
        switch (units) {
          case "small":
            subQuery = "units <= 50";
            break;
          case "medium":
            subQuery = "units > 50 AND units <= 300";
            break;
          case "large":
            subQuery = "units > 300 AND units <= 1000";
            break;
          case "xlarge":
            subQuery = "units > 1000";
        }

        baseQuery = baseQuery + " AND (" + subQuery + ')';
      }
      if (floors != '') {
        var subQuery = '';
        switch (floors) {
          case "small":
            subQuery = "floors <= 10";
            break;
          case "medium":
            subQuery = "floors > 10 AND floors <= 30";
            break;
          case "large":
            subQuery = "floors > 30 AND floors <= 60";
            break;
          case "xlarge":
            subQuery = "floors >...