JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css">
<style type="cartodb/css" id="polygon">
#glas_uk_crime_stats {
polygon-fill: #d9b8d3;
polygon-opacity: 0.8;
polygon-clip: false;
line-color: #FFF;
line-width: 0.5;
line-opacity: 1;
}
#glas_uk_crime_stats::wards {
text-name: [ward];
text-face-name: 'DejaVu Sans Book';
text-size: 12;
text-label-position-tolerance: 0;
text-fill: #000000;
text-halo-fill: #FFF;
text-halo-radius: 1;
text-dy: -10;
text-allow-overlap: true;
text-placement: point;
text-placement-type: simple;
}
</style>
<style type="cartodb/css" id="bubble">
/** bubble visualization */
#glas_uk_crime_stats::markers {
//marker-width: 0;
marker-fill-opacity: 1;
marker-line-color: #7f0169;
marker-line-width: 8;
marker-line-opacity: 0.5;
marker-placement: point;
marker-multi-policy: whole;
marker-clip: false;
marker-type: ellipse;
marker-fill: #7f0169;
marker-allow-overlap: true;
marker-ignore-placement: false;
}
#glas_uk_crime_stats::labels {
text-name: '';
text-face-name: 'DejaVu Sans Book';
text-size: 16;
text-label-position-tolerance: 10;
text-fill: #FFF;
text-halo-fill: rgba(255,255,255,0.3);
text-halo-radius: 0;
text-dy: 0;
text-allow-overlap: true;
text-placement: point;
text-placement-type: simple;
}
</style>
<style type="cartodb/css" id="murder">
/** bubble visualization */
#glas_uk_crime_stats::labels
[ murder >= 1 ] {
text-name: [murder];
}
#glas_uk_crime_stats::markers [ murder <= 10] {
...
CSS
html, body {
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
div.leaflet-bottom .leaflet-control-attribution {
display: none;
}
JavaScript
jQuery(function($) {
var tableName = "glas_uk_crime_stats";
var southEast = L.latLng(61.30190, -15.13916);
var northWest = L.latLng(53.00156, 6.65771);
var map = L.map('map', {
center: [55.864237,-4.251806], // Glasgow
maxBounds: L.latLngBounds(southEast, northWest),
zoom: 11,
});
var layerSource = {
user_name: 'snichollsjno',
type: 'cartodb',
cartodb_logo: false,
sublayers: [
{
sql: "SELECT * FROM " + tableName,
cartocss: $("#polygon").text()
},
{
sql: "SELECT ST_Transform(ST_Centroid(the_geom), 3857) as the_geom_webmercator, murder FROM " + tableName + " WHERE calendar_year = (SELECT MAX(calendar_year) FROM " + tableName +" )",
cartocss: $("#bubble, #murder").text()
}
]
}
var options = {
https: true
}
// Add basemap tiles
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
{
"attribution": "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>, @<a href=\"https://twitter.com/TheLayReporter\">TheLayReporter</a> Sally Nicholls",
subdomains: 'abcd',
}).addTo(map);
// Add data layer to your map
cartodb.createLayer(map,layerSource,options)
.addTo(map)
.done(function(layer) {
console.log(layer);
})
.error(function(err) {
console.log("error: " + err);
});
});