jsanz/index.html

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

<head>
  <title>Training | change SQL and CartoCSS | 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;
    }

    #bar {
      z-index: 2;
      position: absolute;
      top: 0;
      right: 0;
      margin: 4px;
    }

    #boton {
      width: 128px;
      height: 64px;
    }
  </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: red;
    }
  </style>

  <style type="text/cartocss" id="cartocss_labels">
    #ne_10m_populated_places_simple::labels {
      text-name: [name];
      text-face-name: 'DejaVu Sans Book';
      text-size: 15;
      text-label-position-tolerance: 10;
      text-fill: #000;
      text-halo-fill: #FFF;
      text-halo-radius: 1;
      text-dy: -10;
      text-allow-overlap: false;
      text-placement: point;
      text-placement-type: simple;
    }
  </style>

</head>

<body>
  <div id="map"></div>

  <div id="bar">
    <button id="allPop">All</button>
    <button id="mostPop">20 most populated places</button>
    <button id="lessPop">20 less populated places</button>
  </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}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        }).addTo(map);

        var layer_sql =  $('#sql').html();
        var layer_cartocss = $('#cartocss').html();
        var labels_cartocss= $('#cartocss_labels').html();

        cartodb.createLayer(map, {
            user_name: 'jsanzacademy1',
            filter: "mapnik",
            type: 'cartodb',
            sublayers: [{
              sql: layer_sql,
              cartocss: layer_cartocss,
              interactivity: 'cartodb_id, name, pop_max'
            }]
          }, {
            /*options here*/
          })
          .addTo(map)
          .on('done', function(layer) {
            var sublayer = layer.getSubLayer(0);

            $('#allPop').on('click', function() {
              sublayer.setSQL(layer_sql);
              sublayer.setCartoCSS(layer_cartocss);
            });
            $('#mostPop').on('click', function() {
              sublayer.setSQL(layer_sql + 'ORDER BY pop_max DESC LIMIT 20;');
              sublayer.setCartoCSS(layer_cartocss + labels_cartocss);
            });
            $('#lessPop').on('click', function() {
              sublayer.setSQL(layer_sql + 'ORDER BY pop_max ASC LIMIT 20;');
              sublayer.setCartoCSS(layer_cartocss + labels_cartocss);
            });

          })
          .on('error', function(e) {
            console.log('error: ' + e);
          });
      });
    })();
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Training \| change SQL and CartoCSS \| 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;
	}

	#bar {
	z-index: 2;
	position: absolute;
	top: 0;
	right: 0;
	margin: 4px;
	}

	#boton {
	width: 128px;
	height: 64px;
	}
	</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: red;
	}
	</style>

	<style type="text/cartocss" id="cartocss_labels">
	#ne_10m_populated_places_simple::labels {
	text-name: [name];
	text-face-name: 'DejaVu Sans Book';
	text-size: 15;
	text-label-position-tolerance: 10;
	text-fill: #000;
	text-halo-fill: #FFF;
	text-halo-radius: 1;
	text-dy: -10;
	text-allow-overlap: false;
	text-placement: point;
	text-placement-type: simple;
	}
	</style>

	</head>

	<body>
	<div id="map"></div>

	<div id="bar">
	<button id="allPop">All</button>
	<button id="mostPop">20 most populated places</button>
	<button id="lessPop">20 less populated places</button>
	</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}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
	}).addTo(map);

	var layer_sql = $('#sql').html();
	var layer_cartocss = $('#cartocss').html();
	var labels_cartocss= $('#cartocss_labels').html();

	cartodb.createLayer(map, {
	user_name: 'jsanzacademy1',
	filter: "mapnik",
	type: 'cartodb',
	sublayers: [{
	sql: layer_sql,
	cartocss: layer_cartocss,
	interactivity: 'cartodb_id, name, pop_max'
	}]
	}, {
	/options here/
	})
	.addTo(map)
	.on('done', function(layer) {
	var sublayer = layer.getSubLayer(0);

	$('#allPop').on('click', function() {
	sublayer.setSQL(layer_sql);
	sublayer.setCartoCSS(layer_cartocss);
	});
	$('#mostPop').on('click', function() {
	sublayer.setSQL(layer_sql + 'ORDER BY pop_max DESC LIMIT 20;');
	sublayer.setCartoCSS(layer_cartocss + labels_cartocss);
	});
	$('#lessPop').on('click', function() {
	sublayer.setSQL(layer_sql + 'ORDER BY pop_max ASC LIMIT 20;');
	sublayer.setCartoCSS(layer_cartocss + labels_cartocss);
	});

	})
	.on('error', function(e) {
	console.log('error: ' + e);
	});
	});
	})();
	</script>
	</body>

	</html>