Skip to content

Instantly share code, notes, and snippets.

@juanje
Last active Aug 29, 2015
Embed
What would you like to do?
Las playas más cercanas
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment