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" ] { marker-fill: #E31A1C; } #all_day_cdb_gu_l3[net="uw" ] { marker-fill: #FDBF6F; } #all_day_cdb_gu_l3[net="pr" ] { marker-fill: #FF7F00;
  } </style>

    <style type="cartocss/html" id="choropleth-magnitude">
      /** choropleth visualization */ #all_day_cdb_gu_l3{...

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);
    });
}