ernesmb/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Changing SQL query| 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, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }

      #map{position:relative;}
      #bar{z-index: 2; position:absolute; top:0; right:0; margin:4px;}
      #boton{width:128px; height:64px;}

      </style>

  </head>
  <body>
      <div id="map"></div>
      <div id="bar">
        <button onclick="boton1()">20 most populated places</button>
        <button onclick="boton2()">20 less populated places</button>
      </div>
    <script>
      var map;
      var layer;
      function main() {
        map = L.map('map', {
          zoomControl: true,
          center: [36,0],
          zoom:2
        });

        //add tile layer from STAMEN
        L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
          attribution:'Stamen and CartoDB attribution'
        }).addTo(map);

        //add CartoDB layer
        cartodb.createLayer(map, {
          user_name:'ernestomb',
          type:'cartodb',
          sublayers:[{
            sql:'SELECT * FROM ne_10m_populated_places_simple_7_copy',
            cartocss:'#ne_10m_populated_places_simple_7_copy {marker-fill:#f60;}',
          }]
        },{https:true}).addTo(map)
          .on('done', function(layer){
            sublayer=layer.getSubLayer(0);
          });
      }
      function boton1(){
        sublayer.setSQL('SELECT * FROM ne_10m_populated_places_simple_7_copy ORDER BY pop_max DESC LIMIT 20;');
      }
      function boton2(){
        sublayer.setSQL('SELECT * FROM ne_10m_populated_places_simple_7_copy ORDER BY pop_max ASC LIMIT 20;');
      }
    window.onload = main;

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Changing SQL query\| 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, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	#map{position:relative;}
	#bar{z-index: 2; position:absolute; top:0; right:0; margin:4px;}
	#boton{width:128px; height:64px;}

	</style>

	</head>
	<body>
	<div id="map"></div>
	<div id="bar">
	<button onclick="boton1()">20 most populated places</button>
	<button onclick="boton2()">20 less populated places</button>
	</div>
	<script>
	var map;
	var layer;
	function main() {
	map = L.map('map', {
	zoomControl: true,
	center: [36,0],
	zoom:2
	});

	//add tile layer from STAMEN
	L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
	attribution:'Stamen and CartoDB attribution'
	}).addTo(map);

	//add CartoDB layer
	cartodb.createLayer(map, {
	user_name:'ernestomb',
	type:'cartodb',
	sublayers:[{
	sql:'SELECT * FROM ne_10m_populated_places_simple_7_copy',
	cartocss:'#ne_10m_populated_places_simple_7_copy {marker-fill:#f60;}',
	}]
	},{https:true}).addTo(map)
	.on('done', function(layer){
	sublayer=layer.getSubLayer(0);
	});
	}
	function boton1(){
	sublayer.setSQL('SELECT * FROM ne_10m_populated_places_simple_7_copy ORDER BY pop_max DESC LIMIT 20;');
	}
	function boton2(){
	sublayer.setSQL('SELECT * FROM ne_10m_populated_places_simple_7_copy ORDER BY pop_max ASC LIMIT 20;');
	}
	window.onload = main;

	</script>
	</body>
	</html>