[CARTO] Raster demos

app.js

var map = L.map('map', {
    scrollWheelZoom: false,
    center: [-18, -46],
    zoom: 8
});

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{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,
    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 rasterLayer = null;
function updateMap(example) {
    if (rasterLayer) {
        map.removeLayer(rasterLayer);
    }

    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",
                    "geom_column": "the_raster_webmercator",
                    "geom_type": "raster"
                }
            }
        ]
    };

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

            rasterLayer = 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 = examples[k].name;

    examplesSelector.appendChild(option);
});


document.getElementById('endpoint').addEventListener('blur', updateMap, false);


loadExample();

examples.js

function getCartoCss(id, rules) {
    return '#' + id + ' {\n\t' +
        rules.join('\n\t')
        + '\n}'
}

var examples = {
    'natural_earth_inverted': {
        name: 'Natural Earth II Invert layer order',
        desc: 'Natural Earth II with Shaded Relief, Water, and Drainages',
        sql: [
            "SELECT ST_Band(the_raster_webmercator,'{3,2,1}'::integer[]) the_raster_webmercator",
            "from ne2_hr_lc_sr_w_dr"
        ].join('\n'),
        cartocss: getCartoCss('ne2_hr_lc_sr_w_dr', [
            'raster-opacity: 1.0;'
        ]),
        center: [20, 0],
        zoom: 2
    },
    'pop': {
        name: 'Population',
        desc: 'Planet Ortho',
        sql: 'select * from pop',
        cartocss: getCartoCss('pop', [
            'raster-opacity: 1.0;'
        ]),
        center: [20, 0],
        zoom: 2
    },
    'pop_fire': {
        name: 'Population ST_Color fire',
        desc: 'Planet Ortho',
        sql: [
            "select ST_ColorMap(the_raster_webmercator, 'fire') the_raster_webmercator",
            "from pop"
        ].join('\n'),
        cartocss: getCartoCss('pop', [
            'raster-opacity: 1.0;'
        ]),
        center: [-0.74, 112.67],
        zoom: 5
    },
    'pop_bluered': {
        name: 'Population ST_Color bluered',
        desc: 'Planet Ortho',
        sql: [
            "select ST_ColorMap(the_raster_webmercator, 'bluered') the_raster_webmercator",
            "from pop"
        ].join('\n'),
        cartocss: getCartoCss('pop', [
            'raster-opacity: 1.0;'
        ]),
        center: [-0.74, 112.67],
        zoom: 5
    },
    'planet_ortho': {
        name: 'Planet Ortho',
        desc: 'Planet Ortho',
        sql: 'select * from demo_planet_ortho',
        cartocss: getCartoCss('demo_planet_ortho', [
            'raster-opacity: 1.0;'
        ]),
        center: [-18.39, -45.36],
        zoom: 12
    },
    'planet_ortho_colormap': {
        name: 'Planet Ortho ST_ColorMap INTERPOLATE',
        desc: 'Planet Ortho',
        sql: [
            "SELECT ST_ColorMap(the_raster_webmercator,'100% 255 0 0",
            "    75% 200 0 0",
            "    50% 100 0 0",
            "    25% 50 0 0",
            "    10% 10 0 0",
            "nv 0 0 0', 'INTERPOLATE') the_raster_webmercator",
            "from demo_planet_ortho"
        ].join('\n'),
        cartocss: getCartoCss('demo_planet_ortho', [
            'raster-opacity: 1.0;'
        ]),
        center: [-18.39, -45.36],
        zoom: 12
    },
    'planet_ortho_colormap_nearest': {
        name: 'Planet Ortho ST_ColorMap NEAREST',
        desc: 'Planet Ortho',
        sql: [
            "SELECT ST_ColorMap(the_raster_webmercator,'100% 255 0 0",
            "    75% 200 0 0",
            "    50% 100 0 0",
            "    25% 50 0 0",
            "    10% 10 0 0",
            "nv 0 0 0', 'NEAREST') the_raster_webmercator",
            "from demo_planet_ortho"
        ].join('\n'),
        cartocss: getCartoCss('demo_planet_ortho', [
            'raster-opacity: 1.0;'
        ]),
        center: [-18.39, -45.36],
        zoom: 12
    },
    'natural_earth': {
        name: 'Natural Earth II',
        desc: 'Natural Earth II with Shaded Relief, Water, and Drainages',
        sql: [
            'select ST_Band(the_raster_webmercator,1) the_raster_webmercator',
            'from ne2_hr_lc_sr_w_dr'
        ].join('\n'),
        cartocss: getCartoCss('ne2_hr_lc_sr_w_dr', [
            'raster-opacity: 0.5;',
            'raster-scaling:lanczos;',
            'raster-colorizer-default-mode: linear;',
            'raster-colorizer-default-color: transparent;',
            'raster-colorizer-stops:',
                '\tstop(0, #fff)',
                '\tstop(255, #000);'
        ]),
        center: [20, 0],
        zoom: 2
    },
    'natural_earth_bluered': {
        name: 'Natural Earth II ST_ColorMap BLUERED',
        desc: 'Natural Earth II with Shaded Relief, Water, and Drainages',
        sql: [
            "SELECT ST_ColorMap(the_raster_webmercator,'bluered') the_raster_webmercator",
            "FROM ne2_hr_lc_sr_w_dr"
        ].join('\n'),
        cartocss: getCartoCss('ne2_hr_lc_sr_w_dr', [
            'raster-opacity: 0.5;'
        ]),
        center: [20, 0],
        zoom: 2
    },
    'shaded_relief': {
        name: 'Shaded Relief',
        desc: '1:10m Shaded Relief - Grayscale shaded relief of land areas',
        sql: 'select * from sr_hr',
        cartocss: getCartoCss('sr_hr', [
            'raster-opacity: 1.0;',
            'raster-scaling:lanczos;',
            'raster-colorizer-default-mode: linear;',
            'raster-colorizer-default-color: transparent;',
            'raster-colorizer-stops:',
              '\tstop(42,#47443e)',
              '\tstop(70, #77654a)',
              '\tstop(100, rgb(85,107,50))',
              '\tstop(200, #47443e)',
              '\tstop(255, #47443e);'
        ]),
        center: [20, 0],
        zoom: 3
    }
};

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 {
            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="http://rochoa.cartodb.com/api/v1/map">
        </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