Skip to content

Instantly share code, notes, and snippets.

@andrewxhill

andrewxhill/CartoCSS.md

Last active August 29, 2015 13:56
Show Gist options
  • Save andrewxhill/8853590 to your computer and use it in GitHub Desktop.
Save andrewxhill/8853590 to your computer and use it in GitHub Desktop.
Download ZIP
Madison workshop documents
Raw
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);
  }
}
Raw
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')
});
Raw
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>
Raw
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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment