ramiroaznar · August 25, 2017 15:02
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>this keyword in 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>
    
    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

    <script>
      console.log('Global: ', this); // this = Window

      function main() {

        console.log('main: ', this); // this = Window

        var query = $("#query").text();
            style = $("#style").text();

        var map = new L.Map('map', {
          zoomControl: false,
          center: [43, 0],
          zoom: 3
        });

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

        function showFeature(cartodb_id) {

          console.log('showFeature: ', this); // this = Window

          sql.execute("select ST_Simplify(the_geom, 0.1) as the_geom from ne_50m_admin_0_countries where cartodb_id = {{cartodb_id}}", {cartodb_id: cartodb_id} ).done(function(geojson) {
            console.log('showFeature function: ', this);
            if (polygon) {
              map.removeLayer(polygon);
            }
            polygon = L.geoJson(geojson, { 
              style: {
                color: "#000",
                fillColor: "#fff",
                weight: 2,
                opacity: 0.65
              }
            }).addTo(map);
          });
        }

        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); 

          console.log('Done: ', this); // this = addTo callback


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

          sublayer.on('featureClick', function(e, pos, latlng, data) {
            showFeature(data.cartodb_id)
            console.log('Click: ', this); // this = sublayer variable

          });

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

      window.onload = main;
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>this keyword in 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>

	<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

	<script>
	console.log('Global: ', this); // this = Window

	function main() {

	console.log('main: ', this); // this = Window

	var query = $("#query").text();
	style = $("#style").text();

	var map = new L.Map('map', {
	zoomControl: false,
	center: [43, 0],
	zoom: 3
	});

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

	function showFeature(cartodb_id) {

	console.log('showFeature: ', this); // this = Window

	sql.execute("select ST_Simplify(the_geom, 0.1) as the_geom from ne_50m_admin_0_countries where cartodb_id = {{cartodb_id}}", {cartodb_id: cartodb_id} ).done(function(geojson) {
	console.log('showFeature function: ', this);
	if (polygon) {
	map.removeLayer(polygon);
	}
	polygon = L.geoJson(geojson, {
	style: {
	color: "#000",
	fillColor: "#fff",
	weight: 2,
	opacity: 0.65
	}
	}).addTo(map);
	});
	}

	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);

	console.log('Done: ', this); // this = addTo callback


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

	sublayer.on('featureClick', function(e, pos, latlng, data) {
	showFeature(data.cartodb_id)
	console.log('Click: ', this); // this = sublayer variable

	});

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

	window.onload = main;
	</script>
	</body>
	</html>