CartoDB.js Lesson 3 | CartoCSS Demo

Changing CartoCSS in CartoDB.js author(s): Andy Eschbacher

by nygeog

HTML

<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css">
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
<div id="map"></div>
<div id="cartocss" class="layer_selector">
    <p>Select Year</p>
    <ul>
        <li data="yoy2004" data-type="cartocss">2004
        </li>
        <li data="yoy2005" data-type="cartocss">2005
        </li>
        <li data="yoy2006" data-type="cartocss">2006
        </li>
        <li data="yoy2007" data-type="cartocss">2007
        </li>
        <li data="yoy2008" data-type="cartocss">2008
        </li>
        <li data="yoy2009" data-type="cartocss">2009
        </li>
        <li data="yoy2010" data-type="cartocss">2010
        </li>
        <li data="yoy2011" data-type="cartocss">2011
        </li>
        <li data="yoy2012" data-type="cartocss">2012
        </li>
        <li data="yoy2013" data-type="cartocss">2013
        </li>
        <li data="yoy2014" data-type="cartocss">2014
        </li>
        <li data="simple" data-type="cartocss">Reset
        </li>
    </ul>
</div>
<style type="cartocss/html" id="simple">
    /** simple visualization */

    #all_day_cdb_gu_l3 {
        polygon-fill: #fff;
        line-width: 0.75;
        line-color: #ffffff;
    }
    #all_day_cdb_gu_l3[y_y2004 < 0] {
        polygon-fill: #A6CEE3;
    }
    #all_day_cdb_gu_l3[y_y2004 > 0] {
        polygon-fill: #FF7F00;
    }
</style>

<style type="cartocss/html" id="categ-report-sta">
    /** category visualization */

    #all_day_cdb_gu_l3 {
        polygon-fill: #fff;
    }

    #all_day_cdb_gu_l3[y_y2004 < 0] {
        marker-fill: #A6CEE3;
    }
    #all_day_cdb_gu_l3[net="ak"] {
        marker-fill: #1F78B4;
    }
    #all_day_cdb_gu_l3[net="us"] {
        marker-fill: #B2DF8A;
    }
    #all_day_cdb_gu_l3[net="ci"] {
        marker-fill: #33A02C;
    }
    #all_day_cdb_gu_l3[net="nn"] {
        marker-fill: #FB9A99;
    }
    #all_day_cdb_gu_l3[net="hv"] {
       ...

CSS

html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
}
#cartocss {
    position: absolute;
    top: 20px;
    right: 20px;
}
#sql {
    position: absolute;
    top: 20px;
    right: 292px;
}
.layer_selector {
    background: rgba(255,255,255,0.9);
    border-radius: 5px;
    padding: 0;
    border: 1px solid #999;
    width: 250px;
}

.layer_selector > p {
    padding: 15px 30px;
    border-bottom: 1px solid #999;
}

.layer_selector ul {
    padding: 0; margin: 0;
    list-style-type: none;
}
.layer_selector li {
    padding: 15px 30px;
    font-family: Helvetica, Arial;
    font-size: 13px;
    color: #444;
    cursor: pointer;
}
.layer_selector li:not(:last-child) {
    border-bottom: 1px solid #999;
}
.layer_selector li:hover {
    background-color: #F0F0F0;
    cursor: pointer;
}
.layer_selector li.sql_selected,
.layer_selector li.cartocss_selected {
    background-color: #A6CEE3;
}

JavaScript

window.onload = function() {

    var tableName = "zip_yoy";

    var layerSource = {
            user_name: 'nygeog',
            type: 'cartodb',
            sublayers: [{
                sql: "SELECT * FROM " + tableName, // Earthquake data
                cartocss: $("#simple").html() // Simple visualization
            }]
    }
    
    // Instantiate new map object, place it in 'map' element
    var map_object = new L.Map('map', {
        center: [40.7127, -74.0059], // San Francisco
        zoom: 10
    });

    // Create layer selector
    function createSelector(layer) {
        var cartocss = "";
        var $options = $(".layer_selector").find("li");
        $options.click(function(e) {
            var $li = $(e.target);
            var selected = $li.attr('data');

            $options.removeClass('cartocss_selected');
            $li.addClass('cartocss_selected');

            cartocss = $('#'+selected).text();

            layer.setCartoCSS(cartocss);
        });
    }

    // Pull tiles from CartoDB's basemaps
    L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
        attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap<\/a> contributors'
    }).addTo(map_object);

    // for storing sublayer outside of createlayer
    var sublayers;

    // Add data layer to your map
    cartodb.createLayer(map_object,layerSource)
        .addTo(map_object)
        .done(function(layer) {
            sublayer = layer.getSubLayer(0);
            createSelector(sublayer);
        })
        .error(function(err) {
            console.log("error: " + err);
        });
}