[CARTO] basic viewer

app.js

'use strict';

var DEFAULTS = {
    endpoint: 'http://ramirocartodb.cartodb.com/api/v1/map',
    sql: 'select * from ne_10m_populated_places_simple',
    cartocss: [
	"#layer['mapnik::geometry_type'=1] {",
	"  marker-width: 7;",
	"  marker-fill: #EE4D5A;",
	"  marker-fill-opacity: 0.9;",
	"  marker-line-color: #FFFFFF;",
	"  marker-line-width: 1;",
	"  marker-line-opacity: 1;",
	"  marker-type: ellipse;",
	"  marker-allow-overlap: true;",
	"}",
	"#layer['mapnik::geometry_type'=2] {",
	"  line-color: #4CC8A3;",
	"  line-width: 1.5;",
	"  line-opacity: 1;",
	"}",
	"#layer['mapnik::geometry_type'=3] {",
	"  polygon-fill: #826DBA;",
	"  polygon-opacity: 0.9;",
	"  ::outline {",
	"    line-color: #FFFFFF;",
	"    line-width: 1;",
	"    line-opacity: 0.5;",
	"  }",
	"}"
    ].join('\n'),
    center: [40, 0],
    zoom: 2
};

var LOCAL_STORAGE_KEY;

var Config = {
    get: function() {
        var config = {
            endpoint: DEFAULTS.endpoint,
            sql: DEFAULTS.sql,
            cartocss: DEFAULTS.cartocss,
            center: DEFAULTS.center,
            zoom: DEFAULTS.zoom
        };

        if (window.localStorage) {
            var storedConfig = localStorage.getItem(LOCAL_STORAGE_KEY);
            if (storedConfig) {
                try {
                    storedConfig = JSON.parse(storedConfig);
                    config.endpoint = storedConfig.endpoint || config.endpoint;
                    config.sql = storedConfig.sql || config.sql;
                    config.cartocss = storedConfig.cartocss || config.cartocss;
                    config.center = storedConfig.center || config.center;
                    config.zoom = storedConfig.zoom || config.zoom;
                } catch (e) {
                    // pass
                }
            }
        }

        return config;
    },

    set: function(endpoint, sql, cartocss, center, zoom) {
        var config = {};
        if (endpoint !== DEFAULTS.endpoint) {
            config.endpoint = endpoint;
        }
        if (sql !== DEFAULTS.sql) {
            config.sql = sql;
        }
        if (cartocss !== DEFAULTS.cartocss) {
            config.cartocss = cartocss;
        }

        config.center = center;
        config.zoom = zoom;

        if (window.localStorage) {
            localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(config));
            return true;
        }
        return false;
    }
};


var map = L.map('map', {
    scrollWheelZoom: false,
    center: [40, 0],
    zoom: 2
});

function onMapChanged() {
    console.log('Current zoom = %d', map.getZoom());
    var center = [map.getCenter().lat, map.getCenter().lng];
    Config.set(currentEndpoint(), sqlEditor.getValue(), cssEditor.getValue(), center, map.getZoom());
}

map.on('zoomend', onMapChanged);
map.on('dragend', onMapChanged);

L.tileLayer('http://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
    attribution: '<a href="http://cartodb.com">CartoDB</a> © 2014',
    maxZoom: 18
}).addTo(map);

L.tileLayer('http://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png', {
    attribution: '<a href="http://cartodb.com">CartoDB</a> © 2014',
    maxZoom: 18
}).setZIndex(3).addTo(map);

var sqlEditor = CodeMirror.fromTextArea(document.getElementById('sql_editor'), {
    theme: 'monokai',
    lineNumbers: true,
    lineWrapping: true,
    mode:  "text/x-plsql",
    height: '400px'
});

var cssEditor = CodeMirror.fromTextArea(document.getElementById('css_editor'), {
    theme: 'monokai',
    lineNumbers: true,
    lineWrapping: true,
    mode: "text/x-scss",
    height: "200px"
});

function tilesEndpoint(layergroupId) {
    return currentEndpoint() + '/' + layergroupId + '/{z}/{x}/{y}.png?api_key=' + currentApiKey();
}

var tilesLayer = null;
function updateMap() {
    if ( tilesLayer) {
        map.removeLayer(tilesLayer);
    }

    var config = {
        version: '1.5.0',
        layers: [
            {
                type: 'cartodb',
                options: {
                    sql: sqlEditor.getValue(),
                    cartocss: cssEditor.getValue(),
                    cartocss_version: '2.3.0'
                }
            }
        ]
    };

    var request = new XMLHttpRequest();
    request.open('POST', currentEndpoint() + '?api_key=' + currentApiKey(), 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);

            console.log(layergroup.metadata.layers[0].meta.cartocss);

            tilesLayer = L.tileLayer(tilesEndpoint(layergroup.layergroupid), {
                maxZoom: 18
            }).setZIndex(2).addTo(map);

            onMapChanged();
        } else {
            throw 'Error calling server: Error ' + this.status + ' -> ' + this.response;
        }
    };
    request.send(JSON.stringify(config));
}

function currentEndpoint() {
    return document.getElementById('endpoint').value;
}

function currentApiKey() {
    return document.getElementById('apikey').value;
}


document.getElementById('endpoint').addEventListener('blur', updateMap, false);
CodeMirror.commands.save = function() {
    updateMap();
};

var config = Config.get();
document.getElementById('endpoint').value = config.endpoint;
sqlEditor.setValue(config.sql);
cssEditor.setValue(config.cartocss);
map.setView(config.center, config.zoom);

updateMap();

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: 0;
            padding: 0;
            border: 0;
            height: 100%;
            font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
        }

        .wrap {
            width: 100%;
            margin: 0 auto;
        }

        textarea {
            padding: 0;
            margin: 0;
            border: solid 1px #999;
            height: 64px;
        }

        .editor {
            float: left;
            width: 40%;
            height: 100vh;
        }
        .editor p {
            margin: 8px 0;
        }
        .editor label, .editor input, .editor select {
            width: 80%;
            margin-bottom: 8px;
            margin-left: 10px;
            display: block;
        }
        .CodeMirror {
            float: left;
            width: 100%;
            height: 40vh;
            margin-bottom: 8px;
        }
        #map {
            width: 60%;
            height: 100vh;
        }
    </style>
</head>
<body>
<div class="wrap">
    <form class="editor">
        <p>
            <label for="endpoint">Maps API endpoint</label>
            <input type="text" name="endpoint" id="endpoint" value="http://rochoa.cartodb.com/api/v1/map">
        </p>

        <p>
            <label for="apikey">API key</label>
            <input type="text" name="apikey" id="apikey" value="" placeholder="YOUR API KEY">
        </p>

        <p>
            <label for="sql_editor">SQL</label>
            <textarea id="sql_editor" class="code"></textarea>
        </p>

        <p>
            <label for="css_editor">CartoCSS</label>
            <textarea id="css_editor" class="code"></textarea>
        </p>
    </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/javascript/javascript.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/mode/sql/sql.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/mode/css/css.min.js"></script>

<script src="app.js"></script>

</html>

thumbnail.png