turbo-cartocss examples

README.md

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

• quantiles: as per CDB_QuantileBins.
• equal: as per CDB_EqualIntervalBins.
• jenks: as per CDB_JenksBins.
• headtails: as per CDB_HeadsTailsBins.

app.js

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

examples.js

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

index.html

<!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>

thumbnail.png