CartoDB Example

Example usage of dynamic rendering in CartoDB

by Alex Azuero

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":
              ...