ramiroaznar · August 2, 2017 07:42
diff --git a/index.html b/index.html
 <!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>
	<!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>