Skip to content

Instantly share code, notes, and snippets.

@rochoa
Last active August 4, 2017 04:59
Show Gist options
  • Save rochoa/f76f5290b652cb67bcde to your computer and use it in GitHub Desktop.
Save rochoa/f76f5290b652cb67bcde to your computer and use it in GitHub Desktop.
[CARTO] turbo-cartocss examples

Color ramps: *-fill

Basic usage

marker-fill: ramp([column_name], colorbrewer(Greens));
                  |                    |
                  v                    |
      column to calculate ramp         |
                                       v
                it will use a color ramp from http://colorbrewer2.org/

Change number of color brewer data classes

marker-fill: ramp([column_name], colorbrewer(YlGnBu, 7));
                                                     |
                                                     v
                                          force number of classes
                                            default: 5 classes

Change quantification method

marker-fill: ramp([column_name], colorbrewer(Reds), jenks);
                                                      |
                                                      v
                                         force quantification method
                                             default: quantiles

Numeric ramps: *-width, *-opacity

Basic usage

marker-width: ramp([column_name], 4, 18);
                   |              |   |
                   v              |   |
       column to calculate ramp   |   |
                                  v   |
           start value for the ramp   |
                                      |
                                      v
                            end value for the ramp

Change quantification method

marker-width: ramp([column_name], 4, 18, equal);
                                           |
                                           v
                               force quantification method
                                    default: quantiles

Change number of buckets

marker-width: ramp([column_name], 4, 18, 6);
                                         |
                                         v
                              force number of buckets
                                    default: 5

Change both: number of buckets and quantification method

marker-width: ramp([column_name], 4, 18, 6, jenks);
                                         |    |
                                         v    |
                   force number of classes    |
                                              v
                                 force quantification method

Options

Quantification methods

var map = L.map('map', {
scrollWheelZoom: false,
center: [-18, -46],
zoom: 8
});
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '<a href="http://cartodb.com">CartoDB</a> © 2014',
maxZoom: 18
}).addTo(map);
var sqlEditor = CodeMirror.fromTextArea(document.getElementById('sql_editor'), {
theme: 'monokai',
lineNumbers: true,
lineWrapping: true,
mode: "text/x-plsql",
height: "100px"
});
var cssEditor = CodeMirror.fromTextArea(document.getElementById('css_editor'), {
theme: 'monokai',
lineNumbers: true,
mode: "text/x-scss",
height: "200px"
});
var tilesLayer = null;
function updateMap(example) {
if (tilesLayer) {
map.removeLayer(tilesLayer);
}
if (example) {
map.setView(example.center, example.zoom);
}
var config = {
"version": "1.2.0",
"layers": [
{
"type": "cartodb",
"options": {
"sql": sqlEditor.getValue(),
"cartocss": cssEditor.getValue(),
"cartocss_version": "2.3.0"
}
}
]
};
var request = new XMLHttpRequest();
request.open('POST', currentEndpoint(), true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.onload = function() {
if (this.status >= 200 && this.status < 400){
var layergroup = JSON.parse(this.response);
var tilesEndpoint = currentEndpoint() + '/' + layergroup.layergroupid + '/{z}/{x}/{y}.png';
var protocol = 'https:' == document.location.protocol ? 'https' : 'http';
if (layergroup.cdn_url && layergroup.cdn_url[protocol]) {
var domain = layergroup.cdn_url[protocol];
if ('http' === protocol) {
domain = '{s}.' + domain;
}
tilesEndpoint = protocol + '://' + domain + '/' + currentUser() + '/api/v1/map/' + layergroup.layergroupid + '/{z}/{x}/{y}.png';
}
tilesLayer = L.tileLayer(tilesEndpoint, {
maxZoom: 18
}).addTo(map);
} else {
throw 'Error calling server: Error ' + this.status + ' -> ' + this.response;
}
};
request.send(JSON.stringify(config));
}
function currentExample() {
return examples[examplesSelector.value];
}
function currentUser() {
return currentEndpoint().match(/http[s]*:\/\/([^.]*).*/)[1];
}
function currentEndpoint() {
return document.getElementById('endpoint').value;
}
function loadExample() {
var example = currentExample();
cssEditor.setValue(example.cartocss);
sqlEditor.setValue(example.sql);
updateMap(example);
}
CodeMirror.commands.save = function() {
updateMap();
};
var examplesSelector = document.getElementById('examples');
examplesSelector.addEventListener('change', loadExample, false);
Object.keys(examples).forEach(function(k) {
var option = document.createElement('option');
option.value = k;
option.innerText = k;
examplesSelector.appendChild(option);
});
document.getElementById('endpoint').addEventListener('blur', function() {
updateMap();
}, false);
loadExample();
function getCartoCss(id, rules) {
return '#' + id + ' {\n\t' +
rules.join('\n\t')
+ '\n}'
}
var DEFAULT_STYLE = [
"#points['mapnik::geometry_type'=1] {",
" marker-fill-opacity: 0.7;",
" marker-line-color: #FFF;",
" marker-line-width: 0.5;",
" marker-line-opacity: 1;",
" marker-placement: point;",
" marker-type: ellipse;",
" marker-width: 4;",
" marker-fill: red;",
" marker-allow-overlap: true;",
"}",
"#lines['mapnik::geometry_type'=2] {",
" line-color: red;",
" line-width: 2;",
" line-opacity: 1.0;",
"}",
"#polygons['mapnik::geometry_type'=3] {",
" polygon-fill: red;",
" polygon-opacity: 0.7;",
" line-color: #FFF;",
" line-width: 0.5;",
" line-opacity: 1;",
"}"
].join('\n');
var examples = {
'world-borders': {
sql: [
"SELECT the_geom_webmercator, pop2005, st_area(the_geom::geography) area2 FROM world_borders_public",
].join('\n'),
cartocss: [
"#layer{",
" line-color: #FFF;",
" line-width: 0.5;",
" line-opacity: 1;",
" polygon-opacity: 1;",
" polygon-fill: ramp([area2], colorbrewer(YlGnBu), jenks);",
"}"
].join('\n'),
center: [10, 0],
zoom: 1
},
'world-borders-where-query': {
sql: [
"SELECT the_geom_webmercator, pop2005, st_area(the_geom::geography) area2 FROM world_borders_public WHERE pop2005 > 1e7",
].join('\n'),
cartocss: [
"#layer{",
" line-color: #FFF;",
" line-width: 0.5;",
" line-opacity: 1;",
" polygon-opacity: 1;",
" polygon-fill: ramp([area2], colorbrewer(YlGnBu), jenks);",
"}"
].join('\n'),
center: [10, 0],
zoom: 1
},
'populated-places': {
sql: [
"SELECT * FROM ne_populated_places order by pop_max desc",
].join('\n'),
cartocss: [
"#layer{",
" marker-placement: point;",
" marker-allow-overlap: true;",
" marker-line-opacity: 0.2;",
" marker-opacity: 1;",
" marker-fill: ramp([pop_max], colorbrewer(YlGnBu));",
" marker-width: ramp([pop_max], 6, 24);",
"}"
].join('\n'),
center: [10, 0],
zoom: 1
},
'populated-places-where-query': {
sql: [
"SELECT * FROM ne_populated_places WHERE pop_max > 1e7 order by pop_max desc",
].join('\n'),
cartocss: [
"#layer{",
" marker-placement: point;",
" marker-allow-overlap: true;",
" marker-line-opacity: 0.2;",
" marker-opacity: 1;",
" marker-fill: ramp([pop_max], colorbrewer(Reds));",
" marker-width: ramp([pop_max], 6, 24);",
"}"
].join('\n'),
center: [10, 0],
zoom: 1
}
};
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/codemirror.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/monokai.min.css">
<style>
body {
margin: 16px;
padding: 0;
border: 0;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
textarea {
padding: 0;
margin: 0;
border: solid 1px #999;
height: 64px;
}
.wrap {
width: 960px;
margin: 0 auto;
}
.loader, .editor, .options {
border-bottom: solid 1px #666;
padding: 16px 0;
}
.loader input, .loader select {
margin: 0 24px;
}
.loader input {
width: 320px;
}
.editor label {
width: 480px;
margin-bottom: 12px;
display: block;
float: left;
}
.CodeMirror {
float: left;
width: 479px;
border-left: 1px solid #fff;
height: 160px;
}
#map {
clear: both;
width: 960px;
height: 480px;
margin-top: 16px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="wrap">
<form class="loader">
<label for="examples">Examples</label>
<select name="examples" id="examples"></select>
<label for="endpoint">Maps API endpoint</label>
<input type="text" name="endpoint" id="endpoint" value="https://rochoa.cartodb.com/api/v1/map">
</form>
<!-- <form class="options">
<input type="checkbox" name="raster" id="raster"> <label for="raster">Raster</label>
</form> -->
<form class="editor">
<label for="sql_editor">SQL</label>
<label for="css_editor">CartoCSS</label>
<textarea id="sql_editor" class="code"></textarea>
<textarea id="css_editor" class="code"></textarea>
<div class="clear"></div>
</form>
<div id="map"></div>
</div>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/mode/css/css.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/mode/sql/sql.min.js"></script>
<script src="examples.js"></script>
<script src="app.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment