Skip to content

Instantly share code, notes, and snippets.

@andy-esch

andy-esch/index.html

Last active August 29, 2015 14:07
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 andy-esch/4cb083497faf2ade0959 to your computer and use it in GitHub Desktop.
Save andy-esch/4cb083497faf2ade0959 to your computer and use it in GitHub Desktop.
Download ZIP
slider example using jquery's ui
Raw
index.html
<!doctype html>
<html lang="en">
<!-- pulled some code from http://jqueryui.com/slider/#rangemin -->
<head>
<meta charset="utf-8">
<title>CartoDB.js Opacity Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
padding: 0;
margin: 0;
height: 67%;
width: 100%;
}
#dash {
padding: 25px;
margin: 0;
height: 33%;
width: 100%;
border-top: 2px solid black;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="dash">
<p>
<label for="amount">Opacity:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="header" style="width: 300px;"></div>
<div id="slider-range-min" style="width: 300px"></div>
</div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
window.onload = function() {
cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
.done(function(vis, layers) {
var op = 0.5;
layers[1].setOpacity(op);
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value + "%" );
op = $( "#slider-range-min" ).slider( "value" ) / 100;
layers[1].setOpacity(op);
}
});
$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) + "%");
});
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment