Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Last active August 2, 2017 09:31
Show Gist options
  • Save ramiroaznar/a65af2490b6f64d8b902478d40eb98a0 to your computer and use it in GitHub Desktop.
Save ramiroaznar/a65af2490b6f64d8b902478d40eb98a0 to your computer and use it in GitHub Desktop.
How to add/remove legend with CARTO.js
<!DOCTYPE html>
<html>
<head>
<title>How to add/remove legend 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"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#selector {
position: absolute;
top: 70px;
right: 20px;
padding: 0;
}
#selector ul {
padding: 0; margin: 0;
list-style-type: none;
}
#selector li {
border-bottom: 1px solid #999;
padding: 15px 30px;
font-family: "Helvetica", Arial;
font-size: 13px;
color: #444;
cursor: auto;
}
#selector li:hover {
background-color: #F0F0F0;
cursor: pointer;
}
#selector li.selected {
background-color: #EEE;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!--
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
-->
</head>
<body>
<div id="map"></div>
<div id="selector" class="cartodb-infobox">
<ul>
<li id="add">Add Legend</li>
<li id="remove">Remove Legend</li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<!--
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
-->
<!-- Drop your code between the script tags below! -->
<script>
function main() {
mapUrl='https://team.carto.com/u/ramirocartodb/api/v2/viz/39e1cfe0-16bd-11e6-a42b-0e31c9be1b51/viz.json'
cartodb.createVis('map', mapUrl)
.on('done', function(vis,layers) {
console.log(vis);
console.log(layers);
}).on('error', function() {
console.log("some error occurred");
});
/* Add Legend Function */
$('#add').click(function() {
$('body').append('<div class="cartodb-legend choropleth"> <div class="legend-title">Population (normalized)</div> <ul style="width: 120px; height: auto"> <li class="min"> 170000 </li> <li class="max"> 250000000 inhabitants </li> <li class="graph count_315"> <div class="colors"> <div class="quartile" style="background-color:#FFFFB2"></div> <div class="quartile" style="background-color:#FECC5C"></div> <div class="quartile" style="background-color:#FD8D3C"></div> <div class="quartile" style="background-color:#F03B20"></div> <div class="quartile" style="background-color:#BD0026"></div> </div> </li> </ul> </div>');
});
/* Remove Legend Function */
$('#remove').click(function() {
$('div.cartodb-legend.choropleth').remove();
});
}
// load main() function
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment