CartodbJS sandwich example

Set several HTTP layers with a CartoB Mapnik in the middle

by nygeog

HTML

<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<div id="map"></div>

CSS

html, body, #map {
    width:100%;
    height:100%;
    padding: 0;
    margin: 0;
}

JavaScript

//Create the leaflet map
var map = L.map('map', {
    zoomControl: true,
    center: [70.79,-126.34],
    zoom: 5
});

/* Define a layer source made of:

- CartoDB Positron map (light) without labels
- CartoDB Layer using SQL and CartoCSS
- A landsat image (1 band)
- CartoDB Positron labels
*/

var updateMap = 

cartodb.createLayer(map, {
    user_name: 'examples',
    type: 'cartodb',
    sublayers: [{
        type: "http",
        urlTemplate: "http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png",
        subdomains: ["a", "b", "c"],
        zIndex: 1
    }, {
        type: 'mapnik',
        sql: 'select * from country_boundaries where cartodb_id = 36',
        cartocss: '#layer { polygon-fill: lighten(red,30); polygon-opacity: 0.3; line-color: #F00; }'
    }, {
        type: "http",
        urlTemplate: "https://maps.t-mobile.com/TMo_TechLTE_Map/{z}/{x}:{y}/tile.png"
    }, {
        type: "http",
        urlTemplate: "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
        subdomains: ["a", "b", "c"]
    }]
}).addTo(map);