Skip to content

Instantly share code, notes, and snippets.

@andrewxhill

andrewxhill/index.html

Last active January 2, 2016 15:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save andrewxhill/8324313 to your computer and use it in GitHub Desktop.
Save andrewxhill/8324313 to your computer and use it in GitHub Desktop.
Download ZIP
Style selector menu for CartoDB
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Style selector example | 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" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#layer_selector {
position: absolute;
top: 20px;
right: 20px;
padding: 0;
}
#layer_selector ul {
padding: 0; margin: 0;
list-style-type: none;
}
#layer_selector li {
border-bottom: 1px solid #999;
padding: 15px 30px;
font-family: "Helvetica", Arial;
font-size: 13px;
color: #444;
cursor: auto;
}
#layer_selector li:hover {
background-color: #F0F0F0;
cursor: pointer;
}
#layer_selector li.selected {
background-color: #EEE;
}
</style>
<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 type="cartocss/html" id="cartocss_area_template">
/** choropleth visualization */
#tl_2013_us_zcta510_001{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#tl_2013_us_zcta510_001 [ aland10 <= 34785906652.01] {
polygon-fill: #ff4d4d;
}
#tl_2013_us_zcta510_001 [ aland10 <= 366219966] {
polygon-fill: #ff7a7a;
}
#tl_2013_us_zcta510_001 [ aland10 <= 199228941] {
polygon-fill: #ffa6a6;
}
#tl_2013_us_zcta510_001 [ aland10 <= 119576077] {
polygon-fill: #fff2cc;
}
#tl_2013_us_zcta510_001 [ aland10 <= 69445753] {
polygon-fill: #7fbfff;
}
#tl_2013_us_zcta510_001 [ aland10 <= 30445142] {
polygon-fill: #40a0ff;
}
#tl_2013_us_zcta510_001 [ aland10 <= 8726850] {
polygon-fill: #0080ff;
}
</script>
</head>
<body>
<div id="map"></div>
<div id="layer_selector" class="cartodb-infobox">
<ul>
<li id="red" class="selected">Red</li>
<li id="bw">Black & White</li>
<li id="area">Area</li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
var styles = {}, selectedStyle;
// create layer selector
function createSelector(layer) {
var sql = new cartodb.SQL({ user: 'documentation' });
var $options = $('#layer_selector li');
$options.click(function(e) {
// get the area of the selected layer
var $li = $(e.target);
var style = $li.attr('id');
if(selectedStyle != style ){
// change the style in the layer to update the map
layer.setCartoCSS(styles[style]);
selectedStyle = style;
}
});
}
function main() {
// get the currently selected style
selectedStyle = $('li.selected').attr('id');
cartodb.createVis('map', 'http://viz2.cartodb.com/api/v2/viz/b88571fe-78a3-11e3-a0a2-0e49973114de/viz.json')
.done(function(vis, layers) {
// create a new assoc array of styles
// key values must mach ids of menu list in HTML
styles['red'] = "#tl_2013_us_zcta510_001{ polygon-fill: #F84F40; polygon-opacity: 0.7; line-width: 0.5; line-color: #FFFFFF;line-opacity: 0.5;}";
styles['bw'] = "#tl_2013_us_zcta510_001{ polygon-fill: #000; polygon-opacity: 0.7; line-width: 0.5; line-color: #FFF;line-opacity: 0.5;}";
styles['area'] = $('#cartocss_area_template').html();
// layer 0 is the base layer, layer 1 is cartodb layer
var subLayer = layers[1].getSubLayer(0);
createSelector(subLayer);
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment