Skip to content

Instantly share code, notes, and snippets.

@ebrelsford
Created March 30, 2017 14:27
Show Gist options
  • Save ebrelsford/796c27be2c610570d6b36d817ae80eda to your computer and use it in GitHub Desktop.
Save ebrelsford/796c27be2c610570d6b36d817ae80eda to your computer and use it in GitHub Desktop.
Dropdown with Carto.js
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!--
Load Carto's code so we can pull in our Carto maps.
-->
<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%;
margin: 0;
padding: 0;
width: 100%;
}
#map {
height: 100%;
width: 100%;
}
.type-picker {
position: absolute;
top: 15px;
left: 15px;
}
</style>
</head>
<body>
<div id="map"></div>
<select class="type-picker">
<option value="all">All types</option>
<option value="bathroom">bathroom</option>
<option value="biocentre">biocentre</option>
<option value="dumping_site">dumping site</option>
<option value="pee_point">pee point</option>
<option value="toilet_public">public toilet</option>
<option value="water_public">public water</option>
<option value="recycling">recycling</option>
<option value="urban_agriculture">urban agriculture</option>
<option value="other">other</option>
</select>
<script>
var watsanLayer;
$(document).ready(function () {
//
// Initialize map from CartoDB: create the map and store the data layer for later
//
cartodb.createVis('map', 'https://thenewschool.carto.com/u/brelsfoeagain/api/v2/viz/79edb122-0374-11e7-b189-0e233c30368f/viz.json')
.done(function (vis, layers) {
watsanLayer = layers[1].getSubLayer(0);
});
$('.type-picker').change(function () {
var type = $('.type-picker').val();
var sql;
if (type === 'all') {
// if type is 'all', reset SQL to the original
sql = "SELECT * FROM watsan";
}
else {
// else, select only features with the watsan field set to the chosen type
sql = "SELECT * FROM watsan WHERE watsan = '" + type + "'";
}
watsanLayer.setSQL(sql);
});
});
</script>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment