Skip to content

Instantly share code, notes, and snippets.

@jsanz

jsanz/index.html

Created April 3, 2016 12:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jsanz/8e3195f2606a22fbfcdd0a117e109fb4 to your computer and use it in GitHub Desktop.
Save jsanz/8e3195f2606a22fbfcdd0a117e109fb4 to your computer and use it in GitHub Desktop.
Download ZIP
Training: change SQL with slider
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Training | Change SQL with slider | 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" />
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
#map {
height: 100%;
padding: 0;
margin: 0;
}
.slider-container{
display: table-cell;
position: absolute;
top: 20px;
right: 20px;
height: 20px;
z-index: 20;
vertical-align: middle;
background: white;
padding: 10px;
}
.slider-container label, .slider-container input{
vertical-align:middle;
}
.slider-container label{
width: 50px;
}
</style>
<!-- layer SQL -->
<script type="template/underscore" id="sql">
SELECT * FROM ne_10m_populated_places_simple ORDER BY pop_max DESC LIMIT <%= cities %>
</script>
<!-- layer CartoCSS style -->
<style type="text/cartocss" id="cartocss">
#ne_10m_populated_places_simple{
marker-fill: red;
}
#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 class="slider-container">
<label for="slider-cities">40 cities</label>
<input id="slider-cities" type="range" min="5" max="100" step="5" value="40">
</div>
</div>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<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);
// Define an underscore template
var layer_sql_template = _.template($('#sql').html());
cartodb.createLayer(map, {
user_name: 'jsanzacademy1',
filter: "mapnik",
type: 'cartodb',
sublayers: [{
sql: layer_sql_template({cities:40}),
cartocss: $('#cartocss').html(),
interactivity: 'cartodb_id, name, pop_max'
}]
}, {})
.addTo(map)
.on('done', function(layer) {
var sublayer = layer.getSubLayer(0);
// Avoid dragging when moving the slider
$('.slider-container').on('mousedown',function(e){e.stopPropagation(); });
// Event when the moving the slider
$('#slider-cities').on('change',function(e){
// Get the slider value
var value = e.target.value;
// Set the label
$('.slider-container label').html(value + ' cities');
// Update the SQL
sublayer.setSQL(layer_sql_template({cities:value}));
});
})
.on('error', function(e) {
console.log('error: ' + e);
});
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment