Madison workshop documents

CartoCSS.md

Simple style

#cables{
  line-color: #41006D;
  line-width: 2;
  line-opacity: 0.7;
  line-comp-op: screen;
}

Variable styling

#cables{
  line-color: #41006D;
  line-width: 2;
  line-opacity: 0.7;
  line-comp-op: screen;
  [notlive = 1]{
	  line-width: 1;
      line-dasharray: 6, 2;
      line-comp-op: dst-atop;
  }
}

Composite operations

#cables{
  line-color: #41006D;
  line-width: 2;
  line-opacity: 0.7;
  line-comp-op: screen;
  [notlive = 1]{
	  line-width: 1;
      line-dasharray: 6, 2;
      line-comp-op: dst-atop;
  }
}

More variable based styling

#cables [ capacity_g <= 80000] {
   line-width: 5;
}
#cables [ capacity_g <= 8000] {
   line-width: 3;
}
#cables [ capacity_g <= 800] {
   line-width: 1;
}

Zoom based styling

#cables [ capacity_g <= 80000] {
   line-width: 5;
   [zoom > 4] {line-width: 8;}
}
#cables [ capacity_g <= 8000] {
   line-width: 3;
   [zoom > 4] {line-width: 6;}
}
#cables [ capacity_g <= 800] {
   line-width: 1;
   [zoom > 4] {line-width: 4;}
}

Putting it all together

#cables{
  line-color: #41006D;
  line-width: 2;
  line-opacity: 0.7;
  line-comp-op: screen;
}
#cables [ capacity_g <= 80000] {
   line-width: 5;
   [zoom > 4] {line-width: 8;}
}
#cables [ capacity_g <= 8000] {
   line-width: 3;
   [zoom > 4] {line-width: 6;}
}
#cables [ capacity_g <= 800] {
   line-width: 1;
   [zoom > 4] {line-width: 4;}
}
#cables{
  [notlive = 1]{
	  line-width: 1;
      line-dasharray: 6, 2;
      line-comp-op: dst-atop;
      line-color: rgba(255,255,255,0.2);
  }
}

CartoDB.js.md

Viz.json

cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/681143c2-e8a9-11e2-b296-5404a6a683d5/viz.json')

note: createVis versus createLayer

Change it to your own Viz.json URL

Working with the native map

  map = vis.getNativeMap();
  map.setZoom(8);

Note: in our examples so far, we are using Leaflet as the native map

Working with layers

var sublayer = layers[1].getSubLayer(0);

note: in createVis, layers[0] is the basemap

Adding an infobox

// Get the sublayer
var sublayer = layers[1].getSubLayer(0);

// Add interactivity
sublayer.setInteraction(true);

// Define which data columns are returned during interactivity
sublayer.setInteractivity('cartodb_id, url1, url2, distance_k');

// Define our infowindow 
var infobox = new cdb.geo.ui.InfoBox({
width: 300,
layer: layers[1].getSubLayer(0),
template: '<p class="cdb-infobox">Distance km: {{distance_k}}</p>'
});

// Add it to the HTML
$("body").append(infobox.render().el);

Updating SQL on the fly

// Get the sublayer
var sublayer = layers[1].getSubLayer(0);

// Set a new style with a CartoCSS string
sublayer.setSQL("SELECT * FROM cables WHERE distance_k > 18000");

Updating CartoCSS on the fly

// Get the sublayer
var sublayer = layers[1].getSubLayer(0);

// Set a new style with a CartoCSS string
sublayer.setCartoCSS("#cables { line-color: lightgreen; } ");

Create a button to filter and change styles on the fly

Add a button to the html

    <div id="layer_selector" class="cartodb-infobox">
      <ul>
        <li id="change">Change to Choropleth</li>
      </ul>
    </div>

Protip - store the CartoCSS as a <script>

<script type="cartocss/html" id="cartocss_area_template">
/** choropleth visualization */

#cables{
  polygon-opacity: 0;
  line-color: #FF6600;
  line-width: 1;
  line-opacity: 0.8;
}
#cables [ capacity_g <= 80000] {
   line-color: #B10026;
}
#cables [ capacity_g <= 8400] {
   line-color: #E31A1C;
}
#cables [ capacity_g <= 2880] {
   line-color: #FC4E2A;
}
#cables [ capacity_g <= 1000] {
   line-color: #FD8D3C;
}
#cables [ capacity_g <= 320] {
   line-color: #FEB24C;
}
#cables [ capacity_g <= 40] {
   line-color: #FED976;
}
#cables [ capacity_g <= 2.5] {
   line-color: #FFFFB2;
}
</script>

Add a function to change the color on click

// Get our sublayer
var sublayer = layers[1].getSubLayer(0);

// Use jQuery to listen to for the click event on our button
$('#layer_selector #change').click(function(){
	// set our new style based on the style we stored in the template above
	sublayer.setCartoCSS($('#cartocss_area_template').html());
	// filter out the inactive cables
	sublayer.setSQL('SELECT * FROM cables WHERE notlive = 0')
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Easy example | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }

      #layer_selector {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 0;
      }

      #layer_selector ul {
        padding: 0; margin: 0;
        list-style-type: none;
      }

      #layer_selector li {
        border-bottom: 1px solid #999;
        padding: 15px 30px;
        font-family: "Helvetica", Arial;
        font-size: 13px;
        color: #444;
        cursor: auto;
      }

      #layer_selector li:hover {
        background-color: #F0F0F0;
        cursor: pointer;
      }

      #layer_selector li.selected {
        background-color: #EEE;
      }
    </style>

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
    <![endif]-->
  </head>
  <body>
    <div id="map"></div>

    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script>
      function main() {
        cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
        .done(function(vis, layers) {
          // change your map here!
        })
        .error(function(err) {
          console.log(err);
        });
      }

      window.onload = main;
    </script>
  </body>
</html>

SQL.md

Basic filter

SELECT * FROM cables WHERE distance_k > 15000

What about

SELECT * FROM cables WHERE distance_k > 25000

Multiple filters

SELECT * FROM cables WHERE notlive = 1 AND distance_k > 5000

Spatial filters

SELECT * FROM cables WHERE ST_Distance(the_geom, CDB_LatLng(40.67, -73.94)) < 10

Spatial filters

SELECT * FROM cables WHERE ST_Distance(the_geom::geography, CDB_LatLng(40.67, -73.94)::geography) < 100000

Also see some fun SQL statements here