Last active
August 11, 2016 10:42
-
-
Save ramiroaznar/a324acdc7a5f1dae26d6ca79c619f6bb to your computer and use it in GitHub Desktop.
How to add autostyling to a category widget with CARTO
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>How to add autostyling to a category widget with CARTO</title> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <meta name=viewport content="width=device-width initial-scale=1"> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/di.js/v0/themes/css/deep-insights.css" /> | |
| <script src=" http://libs.cartocdn.com/di.js/v0/deep-insights.uncompressed.js"></script> | |
| <style type="text/css"> | |
| html, body { | |
| position:relative; | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="dashboard"></div> | |
| <style type="cartocss/text" id="style"> | |
| #continents{ | |
| polygon-fill: #BEAC8B; | |
| polygon-opacity: 0.7; | |
| line-color: #FFF; | |
| line-width: 1; | |
| line-opacity: 1; | |
| } | |
| #continents[name='Europe']{ | |
| polygon-fill: #2ca095; | |
| } | |
| #continents[name='North America']{ | |
| polygon-fill: #e5811b; | |
| } | |
| #continents[name='Oceania']{ | |
| polygon-fill: #4a4dba; | |
| } | |
| #continents[name='Africa']{ | |
| polygon-fill: #ad2bad; | |
| } | |
| #continents[name='South America']{ | |
| polygon-fill: #559030; | |
| } | |
| #continents[name='Asia']{ | |
| polygon-fill: #a49947; | |
| } | |
| </style> | |
| | |
| <script> | |
| window.onload = function() { | |
| // set vizJson | |
| var vizJSON = "https://team.carto.com/u/ramirocartodb/api/v3/viz/5756a1f4-5ee8-11e6-8762-0e3ebc282e83/viz.json"; | |
| // set droplet button | |
| var dropLet = '.js-applyColors'; | |
| // get style | |
| var style = cdb.$("#style").text(); | |
| // create dashboard | |
| cartodb.deepInsights.createDashboard('#dashboard', vizJSON, { | |
| no_cdn: false, | |
| cartodb_logo: false | |
| },function(err,dashboard){ | |
| // get map object | |
| var map = dashboard.getMap(), | |
| layers = map.getLayers(), | |
| layer = layers[1]; | |
| // set widgest parameters | |
| var name = { | |
| "type": "category", | |
| "title": "Continents", | |
| "column": "name" | |
| }; | |
| // add category widget | |
| dashboard.createCategoryWidget(name,layer); | |
| // set autostyling function | |
| cdb.$(dropLet).click(function() { | |
| layer.set('cartocss', style); | |
| }); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment