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="//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="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
function main() {
cartodb.createVis('map', '//documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.done(function(vis, layers) {
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</body>
</html>
CartoCSS.md
#### Simple style
```
#cables{
line-color: #41006D;
line-width: 2;
line-opacity: 0.7;
line-comp-op: screen;
}
```
#### Variable styling
```css
#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
```css
#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
```css
#cables [ capacity_g <= 80000] {
line-width: 5;
}
#cables [ capacity_g <= 8000] {
line-width: 3;
}
#cables [ capacity_g <= 800] {
line-width: 1;
}
```
#### Zoom based styling
```css
#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
```css
#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
```js
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
```js
map = vis.getNativeMap();
map.setZoom(8);
```
Note: in our examples so far, we are using Leaflet as the native map
#### Working with layers
```js
var sublayer = layers[1].getSubLayer(0);
```
note: in createVis, layers[0] is the basemap
#### Adding an infobox
```js
// 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
```js
// 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
```js
// 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
```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>
```html
<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
```js
// 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')
});
```
SQL.md
#### Basic filter
```sql
SELECT * FROM cables WHERE distance_k > 15000
```
#### What about
```sql
SELECT * FROM cables WHERE distance_k > 25000
```
#### Multiple filters
```sql
SELECT * FROM cables WHERE notlive = 1 AND distance_k > 5000
```
#### Spatial filters
```sql
SELECT * FROM cables WHERE ST_Distance(the_geom, CDB_LatLng(40.67, -73.94)) < 10
```
#### Spatial filters
```sql
SELECT * FROM cables WHERE ST_Distance(the_geom::geography, CDB_LatLng(40.67, -73.94)::geography) < 100000
```
Also see some fun SQL statements [here](http://bl.ocks.org/andrewxhill/7862128)