JSFiddle - React, Tailwind, and code Playground

by nygeog

HTML

<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: [5.79,-76.34],
    zoom: 7,
    minZoom: 1, 
    maxZoom: 19
});

/* 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
*/

cartodb.createLayer(map, {
    user_name: 'sheehan-carto',
    type: 'cartodb',
    sublayers: [{
        type: "http",
        urlTemplate: "http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png",
        subdomains: ["a", "b", "c"]
    }, {
        type: 'mapnik',
        sql: 'select * from grid_test_11_points',
        cartocss: '#layer { marker-fill: red; marker-width: 2;}'
    }, {
        type: "http",
        urlTemplate: "http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
        subdomains: ["a", "b", "c"]
    }]
}).addTo(map);