Last active
August 2, 2017 09:31
-
-
Save ramiroaznar/a65af2490b6f64d8b902478d40eb98a0 to your computer and use it in GitHub Desktop.
How to add/remove legend with CARTO.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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