iriberri · August 29, 2015 14:23
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Data Library</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: 300px;
      padding: 0;
      margin: 0;
      font-family: Helvetica, Arial; 
      font-weight: regular; 
      font-size: 15px; 
      color: #555; 
      background-color: #FFF; 
      margin: 0;
    }
  </style>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
 </head>
 <body>
  <div id="map"></div>
  <div class="bottompanel" style="background-color:#FFF; position: absolute; padding: 20px; width: 90%; height: 100%; overflow: auto;">
  <h1> Browsing the CartoDB Data Library </h1>
  <p> Select a country to see a list of all the data available for it. </p>


 <br>
  
    <table id="cartodb_table" class="display" cellspacing="0" width="100%">
    </table>
 </div>
  </div>


  <!-- include cartodb.js library -->
  <script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>

   <script type="infowindow/html" id="infowindow_template">
    <div class="cartodb-popup">
      <a href="#close" class="cartodb-popup-close-button close">x</a>

      <div class="cartodb-popup-content-wrapper">
       <div class="cartodb-popup-content">
         {{content.data.name}}

       </div>
     </div>
     <div class="cartodb-popup-tip-container"></div>
   </div>
 </script>

 <script>
  function main() {

    var southWest = L.latLng(-90, -180);
    var northEast = L.latLng(90, 180); 
    var country;
    var headers = ['name', 'description', 'tabname', 'place'];
    var sql = cartodb.SQL({ user: 'common-data' });

    var map = new L.Map('map', {
      zoomControl: false,
      center: [20, 0],
      zoom: 2,
      maxBounds: L.latLngBounds(southWest, northEast),
    });

  cartodb.createLayer(map, {
          user_name: 'common-data',
          type: 'cartodb',
          sublayers: [{
            sql: "SELECT * FROM world_borders",
            cartocss: "#world_borders{ polygon-fill: #5CA2D1; polygon-opacity: 0.9; line-color: #2E5387; line-width: 1; line-opacity: 1; }",
            interactivity: "cartodb_id, name, iso3"
          }]
        })
          .addTo(map)
          .on('done', function(layer) {

            function printTable(country){
            sql.execute("SELECT name, description, tabname, place FROM library_dataset_geo WHERE place ilike '%"+country+"%' OR place ilike '%global%' ORDER BY place asc").done(function(data) {
              console.log(data);
                var c = 0;
                   data.rows.map(function(r) { 
                      c++;
                      var n = $('<tr></tr>');
                         for (h in headers){
                           var p = $('<td></td>').text(r[headers[h]])
                            
                           n.append(p);
                         }
                  $('#cartodb_table').append(n);
            
                  });
                 });
                }
            

          var infowindow = cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['cartodb_id', 'name', 'iso3'])
           infowindow.model.set('template', $('#infowindow_template').html());

           layer.on('featureClick', function(e, pos, latlng, data) {
            document.getElementById("cartodb_table").innerHTML = "";
            printTable(data.iso3);
          });

          }).on('error', function() {
            console.log("some error occurred");
          });

 /*cartodb.createLayer(map, {
          user_name: 'iriberri',
          type: 'cartodb',
          sublayers: [{
            sql: "SELECT * FROM untitled_table_231",
            cartocss: "#untitled_table_231{  line-color: #FF6600; line-width: 2;  line-opacity: 0.7;}",
            interactivity: "cartodb_id"
          }]
        })
          .addTo(map)
          .on('done', function(lyr) {

  
          }).on('error', function() {
            console.log("some error occurred");
          });*/



                         }
      // you could use $(window).load(main);
      window.onload = main;
    </script>
  </body>
  </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Data Library</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: 300px;
	padding: 0;
	margin: 0;
	font-family: Helvetica, Arial;
	font-weight: regular;
	font-size: 15px;
	color: #555;
	background-color: #FFF;
	margin: 0;
	}
	</style>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
	</head>
	<body>
	<div id="map"></div>
	<div class="bottompanel" style="background-color:#FFF; position: absolute; padding: 20px; width: 90%; height: 100%; overflow: auto;">
	<h1> Browsing the CartoDB Data Library </h1>
	<p> Select a country to see a list of all the data available for it. </p>


	<br>

	<table id="cartodb_table" class="display" cellspacing="0" width="100%">
	</table>
	</div>
	</div>


	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>

	<script type="infowindow/html" id="infowindow_template">
	<div class="cartodb-popup">
	<a href="#close" class="cartodb-popup-close-button close">x</a>

	<div class="cartodb-popup-content-wrapper">
	<div class="cartodb-popup-content">
	{{content.data.name}}

	</div>
	</div>
	<div class="cartodb-popup-tip-container"></div>
	</div>
	</script>

	<script>
	function main() {

	var southWest = L.latLng(-90, -180);
	var northEast = L.latLng(90, 180);
	var country;
	var headers = ['name', 'description', 'tabname', 'place'];
	var sql = cartodb.SQL({ user: 'common-data' });

	var map = new L.Map('map', {
	zoomControl: false,
	center: [20, 0],
	zoom: 2,
	maxBounds: L.latLngBounds(southWest, northEast),
	});

	cartodb.createLayer(map, {
	user_name: 'common-data',
	type: 'cartodb',
	sublayers: [{
	sql: "SELECT * FROM world_borders",
	cartocss: "#world_borders{ polygon-fill: #5CA2D1; polygon-opacity: 0.9; line-color: #2E5387; line-width: 1; line-opacity: 1; }",
	interactivity: "cartodb_id, name, iso3"
	}]
	})
	.addTo(map)
	.on('done', function(layer) {

	function printTable(country){
	sql.execute("SELECT name, description, tabname, place FROM library_dataset_geo WHERE place ilike '%"+country+"%' OR place ilike '%global%' ORDER BY place asc").done(function(data) {
	console.log(data);
	var c = 0;
	data.rows.map(function(r) {
	c++;
	var n = $('<tr></tr>');
	for (h in headers){
	var p = $('<td></td>').text(r[headers[h]])

	n.append(p);
	}
	$('#cartodb_table').append(n);

	});
	});
	}


	var infowindow = cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['cartodb_id', 'name', 'iso3'])
	infowindow.model.set('template', $('#infowindow_template').html());

	layer.on('featureClick', function(e, pos, latlng, data) {
	document.getElementById("cartodb_table").innerHTML = "";
	printTable(data.iso3);
	});

	}).on('error', function() {
	console.log("some error occurred");
	});

	/*cartodb.createLayer(map, {
	user_name: 'iriberri',
	type: 'cartodb',
	sublayers: [{
	sql: "SELECT * FROM untitled_table_231",
	cartocss: "#untitled_table_231{ line-color: #FF6600; line-width: 2; line-opacity: 0.7;}",
	interactivity: "cartodb_id"
	}]
	})
	.addTo(map)
	.on('done', function(lyr) {


	}).on('error', function() {
	console.log("some error occurred");
	});*/



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