Skip to content

Instantly share code, notes, and snippets.

@Xatpy

Xatpy/index.html

Last active August 29, 2015 14:13
Show Gist options
  • Save Xatpy/6bdbae5de103ca8c279c to your computer and use it in GitHub Desktop.
Save Xatpy/6bdbae5de103ca8c279c to your computer and use it in GitHub Desktop.
Download ZIP
Named maps - Layer selector
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Named Map with layer selectors | 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]-->
</head>
<body>
<div id="map"></div>
<div id="layer_selector" class="cartodb-infobox">
<ul>
<li data="all" class="selected">All countries</li>
<li data="1000">area >1000 km<sup>2</sup></li>
<li data="6000">area >6000 km<sup>2</sup></li>
<li data="10000">area >10000 km<sup>2</sup></li>
<li data="50000">area >50000 km<sup>2</sup></li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
var layer_than_1000, layer_than_6000, layer_than_10000, layer_than_50000, layer_europe;
// create layer selector
function createSelector() {
var $options = $('#layer_selector li');
$options.click(function(e) {
// get the area of the selected layer
var $li = $(e.target);
var area = $li.attr('data');
// deselect all and select the clicked one
$options.removeClass('selected');
$li.addClass('selected');
//debugger
if (area === "all") {
layer_europe.show();
layer_than_1000.hide();
layer_than_6000.hide();
layer_than_10000.hide();
layer_than_50000.hide();
} else if (area === "1000") {
layer_europe.hide();
layer_than_1000.show();
layer_than_6000.hide();
layer_than_10000.hide();
layer_than_50000.hide();
} else if (area === "6000") {
layer_europe.hide();
layer_than_1000.hide();
layer_than_6000.show();
layer_than_10000.hide();
layer_than_50000.hide();
} else if (area === "10000"){
layer_europe.hide();
layer_than_1000.hide();
layer_than_6000.hide();
layer_than_10000.show();
layer_than_50000.hide();
} else if (area === "50000"){
layer_europe.hide();
layer_than_1000.hide();
layer_than_6000.hide();
layer_than_10000.hide();
layer_than_50000.show();
}
});
}
function main() {
// create leaflet map
var map = L.map('map', {
zoomControl: false,
scrollWheelZoom: false,
center: [43, 0],
zoomControl: true,
zoom: 3
})
// add a base layer
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
cartodb.createLayer(map, {
user_name: 'xatpy',
type: 'namedmap',
options: {
named_map: {
name: 'xatpy@greater_than_1000'
}
}
})
.addTo(map)
.done(function(layer) {
layer_than_1000 = layer;
layer.hide();
});
cartodb.createLayer(map, {
user_name: 'xatpy',
type: 'namedmap',
options: {
named_map: {
name: 'xatpy@greater_than_6000'
}
}
})
.addTo(map)
.done(function(layer) {
layer_than_6000 = layer;
layer.hide();
});
cartodb.createLayer(map, {
user_name: 'xatpy',
type: 'namedmap',
options: {
named_map: {
name: 'xatpy@greater_than_10000'
}
}
})
.addTo(map)
.done(function(layer) {
layer_than_10000 = layer;
layer.hide();
});
cartodb.createLayer(map, {
user_name: 'xatpy',
type: 'namedmap',
options: {
named_map: {
name: 'xatpy@greater_than_50000'
}
}
})
.addTo(map)
.done(function(layer) {
layer_than_50000 = layer;
layer.hide();
});
cartodb.createLayer(map, {
user_name: 'xatpy',
type: 'namedmap',
options: {
named_map: {
name: 'xatpy@europe'
}
}
})
.addTo(map)
.done(function(layer) {
layer_europe = layer;
layer.show();
});
createSelector();
}
// you could use $(window).load(main);
window.onload = main;
</script>
</body>
</html>
Raw
options.json
{
"version": "0.0.1",
"name": "greater_than_10000",
"auth": {
"method": "open"
},
"layergroup": {
"layers": [{
"type": "cartodb",
"options": {
"cartocss_version": "2.1.1",
"sql": "select * from european_countries_e where area > 10000",
"cartocss": "/** choropleth visualization */ #european_countries_e{ polygon-fill: #FFFFB2; polygon-opacity: 0.8; line-color: #FFF; line-width: 1; line-opacity: 0.5; } #european_countries_e [ area <= 1638094] { polygon-fill: #B10026; } #european_countries_e [ area <= 55010] { polygon-fill: #E31A1C; } #european_countries_e [ area <= 34895] { polygon-fill: #FC4E2A; } #european_countries_e [ area <= 12890] { polygon-fill: #FD8D3C; } #european_countries_e [ area <= 10025] { polygon-fill: #FEB24C; } #european_countries_e [ area <= 9150] { polygon-fill: #FED976; } #european_countries_e [ area <= 5592] { polygon-fill: #FFFFB2; }"
}
}]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment