Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Last active August 8, 2016 13:40
Show Gist options
  • Save ramiroaznar/67cd2129a83cc8f29bf5c918fa5ab44b to your computer and use it in GitHub Desktop.
Save ramiroaznar/67cd2129a83cc8f29bf5c918fa5ab44b to your computer and use it in GitHub Desktop.
setCartoCSS with CARTO.js
<!DOCTYPE html>
<html>
<head>
<title>setCartoCSS with CARTO.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#layer_selector {
position: absolute;
top: 20px;
right: 20px;
padding-left: 30px;
}
#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;
background-color: #FFF;
text-decoration: none;
}
#layer_selector li:hover {
background-color: #F0F0F0;
cursor: pointer;
}
#layer_selector li.selected {
background-color: #F0F0F0;
}
a:-webkit-any-link {
color: black;
text-decoration: none !important;
cursor: auto;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- Different way to create the botton list -->
<div id='layer_selector'>
<ul>
<li><a href="#spain" id="spain" class="button spain">Spain</a></li>
<li><a href="#france" id="france" class="button france">France</a></li>
<li><a href="#portugal" id="portugal" class="button portugal">Portugal</a></li>
<li><a href="#italy" id="italy" class="button italy">Italy</a></li>
<li><a href="#greece" id="greece" class="button greece">Greece</a></li>
<li><a href="#all" id="all" class="button all">All</a></li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
var map = L.map('map', {
zoomControl: true,
center: [40, 20],
zoom: 3
});
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'}).addTo(map);
var sublayers = [];
cartodb.createLayer(map, 'https://team.cartodb.com/u/oboix/api/v2/viz/e64f2796-6cd6-11e5-bb1b-0ecfd53eb7d3/viz.json')
.addTo(map)
.on('done', function(layer) {
var subLayerOptions = {
sql: "SELECT * FROM european_1",
cartocss: "#european_1{polygon-fill: #fc9f58; line-color: white; }"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
});
var LayerActions = {
spain: function(){
sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Spain']{polygon-fill: #c8fc55; line-color: white; }");
return true;
},
france: function(){
sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='France']{polygon-fill: #c8fc55; line-color: white; }");
return true;
},
italy: function(){
sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Italy']{polygon-fill: #c8fc55; line-color: white; }");
return true;
},
portugal: function(){
sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Portugal']{polygon-fill: #c8fc55; line-color: white; }");
return true;
},
greece: function(){
sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Greece']{polygon-fill: #c8fc55; line-color: white; }");
return true;
},
all: function(){
sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; }");
return true;
}
}
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).addClass('selected');
LayerActions[$(this).attr('id')]();
});
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment