ramiroaznar · June 8, 2017 11:25
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>CARTO.js | Set bbox 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;
      }
    </style>
    <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>

  <script type="text/sql" id="query">
    SELECT * FROM ne_50m_admin_0_countries
  </script>

  <script type="text/cartocss" id="style">
    #layer {
        polygon-opacity: 0.5;
        polygon-fill: ramp([mapcolor7], cartocolor(Bold), category(7));
        line-width: 2;
        line-color: ramp([mapcolor7], cartocolor(Bold), category(7));
        line-opacity: 0.4;
        line-offset: -1;
    }
  </script>

    <div id="map"></div>
    
    <!-- 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: [43, 0],
          zoom: 3
        });

        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;
            console.log(id_selected);

            var sql = new cartodb.SQL({ user: 'ramirocartodb'});

            // get bounds from selected feature
            sql.getBounds(
              "select the_geom from ne_50m_admin_0_countries where cartodb_id = {{cartodb_id}}", 
              {cartodb_id: id_selected})
            .done(function(bounds) {
              console.log(bounds);
              // set new bbox
              map.fitBounds(bounds, 8);
            });

          });

        }).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 \| Set bbox 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;
	}
	</style>
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	</head>
	<body>

	<script type="text/sql" id="query">
	SELECT * FROM ne_50m_admin_0_countries
	</script>

	<script type="text/cartocss" id="style">
	#layer {
	polygon-opacity: 0.5;
	polygon-fill: ramp([mapcolor7], cartocolor(Bold), category(7));
	line-width: 2;
	line-color: ramp([mapcolor7], cartocolor(Bold), category(7));
	line-opacity: 0.4;
	line-offset: -1;
	}
	</script>

	<div id="map"></div>

	<!-- 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: [43, 0],
	zoom: 3
	});

	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;
	console.log(id_selected);

	var sql = new cartodb.SQL({ user: 'ramirocartodb'});

	// get bounds from selected feature
	sql.getBounds(
	"select the_geom from ne_50m_admin_0_countries where cartodb_id = {{cartodb_id}}",
	{cartodb_id: id_selected})
	.done(function(bounds) {
	console.log(bounds);
	// set new bbox
	map.fitBounds(bounds, 8);
	});

	});

	}).on('error', function() {
	cartodb.log.log("Some error occurred.");
	});
	}

	// you could use $(window).load(main);
	window.onload = main;
	</script>
	</body>
	</html>