oriolbx/index.html

## index.html
<!DOCTYPE html>
<html>
<head>

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

  <style>
    html, body,#map {
      width:100%;
      height:100%;
      padding: 0;
      margin: 0;

    }

  </style>
</head>

<body>

    <div id='map'></div>

  <script type="text/javascript">
    function main() {
      var map;

      //  center and zoom level
      var options = {
        center: [20, 20],
        zoom: 2,

      };

      var map_object = new L.Map('map', options);

      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        }).addTo(map_object);


      cartodb.createLayer(map_object, 'https://team.carto.com/u/oboix/api/v2/viz/0885bb30-d71c-11e6-b344-0e3ebc282e83/viz.json')
        .addTo(map_object)
        .on('done', function(layer) {
        	// set interaction of the CartoDB layer (allow you to click on it)
        	layer.setInteraction(true);
        	// change cursor when moving on the geometry
          layer.on('mouseover',function(){
            $('#map').css({"cursor":"pointer"})
          });
        	// when the CartoDB layer is clicked...
        	layer.on('featureClick', function(e, latlng, pos, data) {

        		console.log(latlng);
        		// center to the coordinates of the point and set zoom to 10
          		map_object.setView(latlng,10,true);
    		});

        });

    }
    window.onload = main;
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

	<style>
	html, body,#map {
	width:100%;
	height:100%;
	padding: 0;
	margin: 0;

	}

	</style>
	</head>

	<body>

	<div id='map'></div>

	<script type="text/javascript">
	function main() {
	var map;

	// center and zoom level
	var options = {
	center: [20, 20],
	zoom: 2,

	};

	var map_object = new L.Map('map', options);

	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
	}).addTo(map_object);


	cartodb.createLayer(map_object, 'https://team.carto.com/u/oboix/api/v2/viz/0885bb30-d71c-11e6-b344-0e3ebc282e83/viz.json')
	.addTo(map_object)
	.on('done', function(layer) {
	// set interaction of the CartoDB layer (allow you to click on it)
	layer.setInteraction(true);
	// change cursor when moving on the geometry
	layer.on('mouseover',function(){
	$('#map').css({"cursor":"pointer"})
	});
	// when the CartoDB layer is clicked...
	layer.on('featureClick', function(e, latlng, pos, data) {

	console.log(latlng);
	// center to the coordinates of the point and set zoom to 10
	map_object.setView(latlng,10,true);
	});

	});

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