<!DOCTYPE html>
<html>
<head>
<title>CARTO.js | Get GeoJSON from selected feature</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#infobox{
width: 325px;
height: 110px;
position: absolute;
top: 20px;
left: 20px;
background-color: white;
opacity: 0.6;
text-align: center;
font-family: "Open Sans";
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- infobox div -->
<div id="infobox">
<h4>Click on a UK region</h4>
<p id="region">UK region</p>
</div>
<script type="text/sql" id="query">
SELECT
*
FROM
uk_administrative_regions
</script>
<script type="text/cartocss" id="style">
#layer {
polygon-opacity: 0.5;
polygon-fill: ramp([region], cartocolor(Bold), category(10));
line-width: 2;
line-color: ramp([region], cartocolor(Bold), category(10));
line-opacity: 0.4;
line-offset: -1;
}
</script>
<!-- include cartodb.js library -->
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
var query = $("#query").text(),
style = $("#style").text();
var map = new L.Map('map', {
zoomControl: false,
center: [54, -3],
zoom: 6
});
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: 'CARTO'
}).addTo(map);
cartodb.createLayer(map, {
user_name: 'ramirocartodb',
type: 'cartodb',
sublayers: [{
sql: query,
cartocss: style
}]
})
.addTo(map)
.on('done', function(layer) {
var sublayer = layer.getSubLayer(0);
// change cursor to pointer when hovering on a feature
sublayer.on('mouseover',function(){
$('#map').css({"cursor":"pointer"})
});
// set layer interactivity
sublayer.setInteractivity("cartodb_id");
sublayer.setInteraction(true);
sublayer.on('featureClick', function(e, pos, latlng, data) {
// get cartodb_id from selected feature
var id_selected = data.cartodb_id;
var sql = new cartodb.SQL({ user: 'ramirocartodb'});
// get region from selected cartodb_id
sql.execute(" SELECT region FROM uk_administrative_regions WHERE cartodb_id = {{cartodb_id}}", {cartodb_id: id_selected})
.done(function(data) {
var region = data.rows[0].region;
console.log(region);
$('#region').text(region);
// get GeoJSON
sql.execute(" SELECT ST_AsGeoJSON(ST_Union(the_geom)), region FROM uk_administrative_regions WHERE region = '{{region}}' GROUP BY region", {region: region}).done(function(data) {
var geoJSON = data.rows[0];
console.log(geoJSON);
});
});
});
}).on('error', function() {
cartodb.log.log("Some error occurred.");
});
}
// you could use $(window).load(main);
window.onload = main;
</script>
</body>
</html>