jsanz · April 3, 2016 10:26
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Training | feature Click | CartoDB.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" />
    <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
        position:relative;
      }
      #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #info{
        position:absolute;
        top: 20px;
        left:50px;
        height: 20px;
        background: white;
        z-index: 10;
        padding: 5px;
        font-size: 1.2em;
      }
    </style>
    <!-- layer SQL -->
    <script type="text/sql" id="sql">
      SELECT * FROM ne_10m_populated_places_simple
    </script>
    
    <!-- layer CartoCSS style -->
    <style type="text/cartocss" id="cartocss">
      #ne_10m_populated_places_simple{
        marker-fill-opacity: 0.9;
        marker-line-color: #FFF;
        marker-line-width: 0;
        marker-line-opacity: 1;
        marker-placement: point;
        marker-multi-policy: largest;
        marker-type: ellipse;
        marker-fill: #FFCC00;
        marker-allow-overlap: true;
        marker-clip: false;
        marker-comp-op: multiply;
      }
    </style>
  </head>
  <body>
    <div id="map">
      <div id="info">Click on a city!</div>
    </div>
    <script>
    (function () {
      'use strict';
      $(document).ready(function(){
        var sublayer
        var map = L.map('map', {
          zoomControl: true,
          center: [40.418709, -3.703277],
          zoom: 3
        });
        L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
          attribution: 'Stamen and CartoDB attribution'
        }).addTo(map);

        cartodb.createLayer(map, {
          user_name: 'jsanzacademy1',
          filter: "mapnik",
          type: 'cartodb',
          sublayers: [{
            sql: $('#sql').html(),
            cartocss: $('#cartocss').html(),
            interactivity: "cartodb_id,pop_max,name" //fields to retrieve on click
          }]
        },{
        /*options here*/
        })
        .addTo(map)
        .on('done', function(layer) {
          var sublayer = layer.getSubLayer(0);
          sublayer.setInteraction(true);
          sublayer.on('featureClick', function(event, latlng, pos, data){
            //add here any action you want to perform on click
            $('#info').html(
              'You clicked at ' +
              data.name + ", population: " + 
              data.pop_max
            );
          });
        })
        .on('error', function(e){
          console.log('error: '+e);
        });
      });
    })();
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Training \| feature Click \| CartoDB.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" />
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
	<style>
	html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	position:relative;
	}
	#map {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	#info{
	position:absolute;
	top: 20px;
	left:50px;
	height: 20px;
	background: white;
	z-index: 10;
	padding: 5px;
	font-size: 1.2em;
	}
	</style>
	<!-- layer SQL -->
	<script type="text/sql" id="sql">
	SELECT * FROM ne_10m_populated_places_simple
	</script>

	<!-- layer CartoCSS style -->
	<style type="text/cartocss" id="cartocss">
	#ne_10m_populated_places_simple{
	marker-fill-opacity: 0.9;
	marker-line-color: #FFF;
	marker-line-width: 0;
	marker-line-opacity: 1;
	marker-placement: point;
	marker-multi-policy: largest;
	marker-type: ellipse;
	marker-fill: #FFCC00;
	marker-allow-overlap: true;
	marker-clip: false;
	marker-comp-op: multiply;
	}
	</style>
	</head>
	<body>
	<div id="map">
	<div id="info">Click on a city!</div>
	</div>
	<script>
	(function () {
	'use strict';
	$(document).ready(function(){
	var sublayer
	var map = L.map('map', {
	zoomControl: true,
	center: [40.418709, -3.703277],
	zoom: 3
	});
	L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
	attribution: 'Stamen and CartoDB attribution'
	}).addTo(map);

	cartodb.createLayer(map, {
	user_name: 'jsanzacademy1',
	filter: "mapnik",
	type: 'cartodb',
	sublayers: [{
	sql: $('#sql').html(),
	cartocss: $('#cartocss').html(),
	interactivity: "cartodb_id,pop_max,name" //fields to retrieve on click
	}]
	},{
	/options here/
	})
	.addTo(map)
	.on('done', function(layer) {
	var sublayer = layer.getSubLayer(0);
	sublayer.setInteraction(true);
	sublayer.on('featureClick', function(event, latlng, pos, data){
	//add here any action you want to perform on click
	$('#info').html(
	'You clicked at ' +
	data.name + ", population: " +
	data.pop_max
	);
	});
	})
	.on('error', function(e){
	console.log('error: '+e);
	});
	});
	})();
	</script>
	</body>
	</html>