Skip to content

Instantly share code, notes, and snippets.

@camille-s

camille-s/index.html

Last active July 11, 2016 14:36
Show Gist options
  • Save camille-s/d115ade103428548942b5ab4d01918ad to your computer and use it in GitHub Desktop.
Save camille-s/d115ade103428548942b5ab4d01918ad to your computer and use it in GitHub Desktop.
Download ZIP
Select individual layers in CartoDB map
Raw
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div>
<p>Select age group</p>
<select id="age-menu">
<option value="0" selected="selected">Under 20</option>
<option value="1">Ages 20-44</option>
<option value="2">Ages 45-64</option>
<option value="3">Age 65+</option>
</select>
</div>
<div id="container"></div>
</body>
</html>
Raw
script.js
$(document).ready(function() {
var url = 'https://datahaven.carto.com/api/v2/viz/e9083f82-4551-11e6-be2d-0e05a8b3e3d7/viz.json';
cartodb.createVis('container', url)
.done(function(vis, layers) {
/*$('#age-menu').change(function(e){
var num = +$(this).val();
createSelector(layers[1], num);
});*/
$('#age-menu').change(function(e) {
var num = +$('#age-menu option:selected').val();
createSelector(layers[1], num);
});
});
function createSelector(layer, num) {
for (var i = 0; i < layer.getSubLayerCount(); i++) {
if (i === num) {
layer.getSubLayer(i).show();
} else {
layer.getSubLayer(i).hide();
}
}
}
});
Raw
stylesheet.css
#container {
width: 960px;
height: 480px;
}
li a {
text-decoration: none;
color: black;
font-weight: 600;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment