iriberri · September 2, 2015 12:19
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>GMaps Satellite basemap | 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" />
    <style>
    html, body, #map {
    height: 95%;
    padding: 0;
    margin: 0;
  }
    </style>


 <div>
 <p>Use the selector to choose the size of the buffer</p>

 <select id="buffer-selector">
  <option value="1000000">1000KM</option>
  <option value="5000000">5000KM</option>
  <option value="10000000">10000KM</option>
 </select>

 </div>

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>

    <!-- include google maps library -->
    <script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.12"></script>

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

    <script>

    var layer_query;
      function main() {
        var vizjson_url = "https://team.cartodb.com/u/iriberri/api/v2/viz/89caf374-516a-11e5-a21f-0e853d047bba/viz.json";
        cartodb.createVis("map", vizjson_url, { share: true, title: false, description: false, search: true
            , gmaps_base_type: 'satellite'
        })
        .done(function(vis, layers) {

          layer_query = layers[1].getSubLayer(0);
        });

        $(document).on('change','#buffer-selector',function(){

     var e = document.getElementById("buffer-selector");
    var input = e.options[e.selectedIndex].value;
        console.log(input);

         var  query = "select * from gmaps_example_public where ST_Intersects(the_geom, ST_Buffer(ST_SetSRID(ST_MakePoint(0,0), 4326)::geography,  "+ input + "))"

           layer_query.setSQL(query);

    
    });
      }
      window.onload = main;
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>GMaps Satellite basemap \| 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" />
	<style>
	html, body, #map {
	height: 95%;
	padding: 0;
	margin: 0;
	}
	</style>


	<div>
	<p>Use the selector to choose the size of the buffer</p>

	<select id="buffer-selector">
	<option value="1000000">1000KM</option>
	<option value="5000000">5000KM</option>
	<option value="10000000">10000KM</option>
	</select>

	</div>

	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
	</head>
	<body>
	<div id="map"></div>

	<!-- include google maps library -->
	<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.12"></script>

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

	<script>

	var layer_query;
	function main() {
	var vizjson_url = "https://team.cartodb.com/u/iriberri/api/v2/viz/89caf374-516a-11e5-a21f-0e853d047bba/viz.json";
	cartodb.createVis("map", vizjson_url, { share: true, title: false, description: false, search: true
	, gmaps_base_type: 'satellite'
	})
	.done(function(vis, layers) {

	layer_query = layers[1].getSubLayer(0);
	});

	$(document).on('change','#buffer-selector',function(){

	var e = document.getElementById("buffer-selector");
	var input = e.options[e.selectedIndex].value;
	console.log(input);

	var query = "select * from gmaps_example_public where ST_Intersects(the_geom, ST_Buffer(ST_SetSRID(ST_MakePoint(0,0), 4326)::geography, "+ input + "))"

	layer_query.setSQL(query);


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