juanje/index.html

## index.html
<html>
<head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
  <![endif]-->
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #map { width: 100%; height:90%; background: black;}
    #menu { position: absolute; top: 25px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
    #menu a {
      margin: 15px 10px 0 0;
      float: right;
      vertical-align: baseline;
      width: 70px;
      padding: 10px;
      text-align: center;
      font: bold 11px "Helvetica",Arial;
      line-height: normal;
      color: #555;
      border-radius: 4px;
      border: 1px solid #777777;
      background: #ffffff;
      text-decoration: none;
      cursor: pointer;
    }
    #menu a.selected,
    #menu a:hover {
      color: #F84F40;
    }
  </style>

  <script>
  var map;

  function init(){
    // initiate leaflet map
    var lon = -3.7163616;
    var lat = 40.435952;
    var total = 10;
    var map;
    var layerUrl = 'http://juanje.cartodb.com/api/v2/viz/8349e90c-0def-11e4-9e87-0edbca4b5057/viz.json';
    var sublayers = [];
    var css = "#playas {" +
        " marker-fill-opacity: 0.9;" +
        " marker-line-color: #FFF;" +
        " marker-line-width: 1;" +
        " marker-line-opacity: 1;" +
        " marker-placement: point;" +
        " marker-type: ellipse;" +
        " marker-width: 6.5;" +
        " marker-allow-overlap: true;" +
        " marker-fill: #3E7BB6;" +
        " }";
    var query;

    detectUserLocation();
    map = new L.Map('map', {
      center: [lat, lon],
      zoom: 7
    });

    L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
      attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
    }).addTo(map);

    cartodb.createLayer(map, layerUrl)
      .addTo(map)
      .on('done', function(layer) {
        var sublayer = layer.getSubLayer(0);
        sublayers.push(sublayer);
    });

    function getQuery() {
      query = "SELECT " +
        "the_geom_webmercator," +
        "ST_X(ST_Centroid(the_geom)) as longitude," +
        "ST_Y(ST_Centroid(the_geom)) as latitude," +
        "playa," +
        "cartodb_id," +
        "ST_Distance(the_geom::geography," +
        "ST_PointFromText('POINT(" + lon + " " + lat + ")', 4326)::geography) AS distance " +
        "FROM juanje.catalogo_de_playas_espana playas " +
        "ORDER BY distance " +
        "ASC " +
        "LIMIT " + total;
    };

    // credit: http://html5doctor.com/finding-your-position-with-geolocation/
    function detectUserLocation(){
      if (navigator.geolocation) {
        var timeoutVal = 10 * 1000 * 1000;
        navigator.geolocation.watchPosition(
          mapToPosition,
          alertError,
          { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
        );
      }
      else {
        alert("Geolocation is not supported by this browser");
      }

      function alertError(error) {
        var errors = {
          1: 'Permission denied',
          2: 'Position unavailable',
          3: 'Request timeout'
        };
        alert("Error: " + errors[error.code]);
      }
    }

    function updateQuery() {
      getQuery();
      console.log(query);
      sublayers[0].set({
        sql: query,
        cartocss: css
      });
    }

    function mapToPosition(position) {
      lon = position.coords.longitude;
      lat = position.coords.latitude;
      map.setView(new L.LatLng(lat,lon), 9);
      new L.CircleMarker([lat,lon],{radius: 4}).addTo(map);
      updateQuery();
    }

    $('.button').click(function() {
      $('.button').removeClass('selected'); $(this).addClass('selected');
      total = $(this).attr('id');
      updateQuery();
    })
  }
  </script>
</head>

<body onload="init()">
  <h1>Playas cercanas</h1>
  <div id='map'></div>
  <div id='menu'>
    <a href="#100" id="100" value=100 class="button 100">100 playas</a>
    <a href="#50" id="50" value=50 class="button 50">50 playas</a>
    <a href="#10" id="10" value=10 class="button 10 selected">10 playas</a>
  </div>
</body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
	<![endif]-->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
	<style>
	html, body {width:100%; height:100%; padding: 0; margin: 0;}
	#map { width: 100%; height:90%; background: black;}
	#menu { position: absolute; top: 25px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
	#menu a {
	margin: 15px 10px 0 0;
	float: right;
	vertical-align: baseline;
	width: 70px;
	padding: 10px;
	text-align: center;
	font: bold 11px "Helvetica",Arial;
	line-height: normal;
	color: #555;
	border-radius: 4px;
	border: 1px solid #777777;
	background: #ffffff;
	text-decoration: none;
	cursor: pointer;
	}
	#menu a.selected,
	#menu a:hover {
	color: #F84F40;
	}
	</style>

	<script>
	var map;

	function init(){
	// initiate leaflet map
	var lon = -3.7163616;
	var lat = 40.435952;
	var total = 10;
	var map;
	var layerUrl = 'http://juanje.cartodb.com/api/v2/viz/8349e90c-0def-11e4-9e87-0edbca4b5057/viz.json';
	var sublayers = [];
	var css = "#playas {" +
	" marker-fill-opacity: 0.9;" +
	" marker-line-color: #FFF;" +
	" marker-line-width: 1;" +
	" marker-line-opacity: 1;" +
	" marker-placement: point;" +
	" marker-type: ellipse;" +
	" marker-width: 6.5;" +
	" marker-allow-overlap: true;" +
	" marker-fill: #3E7BB6;" +
	" }";
	var query;

	detectUserLocation();
	map = new L.Map('map', {
	center: [lat, lon],
	zoom: 7
	});

	L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
	attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>'
	}).addTo(map);

	cartodb.createLayer(map, layerUrl)
	.addTo(map)
	.on('done', function(layer) {
	var sublayer = layer.getSubLayer(0);
	sublayers.push(sublayer);
	});

	function getQuery() {
	query = "SELECT " +
	"the_geom_webmercator," +
	"ST_X(ST_Centroid(the_geom)) as longitude," +
	"ST_Y(ST_Centroid(the_geom)) as latitude," +
	"playa," +
	"cartodb_id," +
	"ST_Distance(the_geom::geography," +
	"ST_PointFromText('POINT(" + lon + " " + lat + ")', 4326)::geography) AS distance " +
	"FROM juanje.catalogo_de_playas_espana playas " +
	"ORDER BY distance " +
	"ASC " +
	"LIMIT " + total;
	};

	// credit: http://html5doctor.com/finding-your-position-with-geolocation/
	function detectUserLocation(){
	if (navigator.geolocation) {
	var timeoutVal = 10 * 1000 * 1000;
	navigator.geolocation.watchPosition(
	mapToPosition,
	alertError,
	{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
	);
	}
	else {
	alert("Geolocation is not supported by this browser");
	}

	function alertError(error) {
	var errors = {
	1: 'Permission denied',
	2: 'Position unavailable',
	3: 'Request timeout'
	};
	alert("Error: " + errors[error.code]);
	}
	}

	function updateQuery() {
	getQuery();
	console.log(query);
	sublayers[0].set({
	sql: query,
	cartocss: css
	});
	}

	function mapToPosition(position) {
	lon = position.coords.longitude;
	lat = position.coords.latitude;
	map.setView(new L.LatLng(lat,lon), 9);
	new L.CircleMarker([lat,lon],{radius: 4}).addTo(map);
	updateQuery();
	}

	$('.button').click(function() {
	$('.button').removeClass('selected'); $(this).addClass('selected');
	total = $(this).attr('id');
	updateQuery();
	})
	}
	</script>
	</head>

	<body onload="init()">
	<h1>Playas cercanas</h1>
	<div id='map'></div>
	<div id='menu'>
	<a href="#100" id="100" value=100 class="button 100">100 playas</a>
	<a href="#50" id="50" value=50 class="button 50">50 playas</a>
	<a href="#10" id="10" value=10 class="button 10 selected">10 playas</a>
	</div>
	</body>
	</html>