ramiroaznar · June 13, 2017 14:57
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>featureClick + launch website | CARTO.js</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); 

          sublayer.setInteractivity("cartodb_id");
          sublayer.setInteraction(true);

          sublayer.on('mouseover',function(){
            $('#map').css({"cursor":"pointer"})
          });

        sublayer.on('featureClick', function(e, pos, latlng, data) {
          var sql = new cartodb.SQL({ user: 'ramirocartodb'});
          var id = data.cartodb_id;

          sql.execute(query + ' where cartodb_id = ' + id).done(function(data){
            var country = data.rows[0].admin;
            console.log(data.rows);
            console.log(country);
            window.open("https://en.wikipedia.org/wiki/" + country);
          });
        });

        }).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>featureClick + launch website \| CARTO.js</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);

	sublayer.setInteractivity("cartodb_id");
	sublayer.setInteraction(true);

	sublayer.on('mouseover',function(){
	$('#map').css({"cursor":"pointer"})
	});

	sublayer.on('featureClick', function(e, pos, latlng, data) {
	var sql = new cartodb.SQL({ user: 'ramirocartodb'});
	var id = data.cartodb_id;

	sql.execute(query + ' where cartodb_id = ' + id).done(function(data){
	var country = data.rows[0].admin;
	console.log(data.rows);
	console.log(country);
	window.open("https://en.wikipedia.org/wiki/" + country);
	});
	});

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

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