Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Last active August 11, 2016 10:42
Show Gist options
  • Save ramiroaznar/a324acdc7a5f1dae26d6ca79c619f6bb to your computer and use it in GitHub Desktop.
Save ramiroaznar/a324acdc7a5f1dae26d6ca79c619f6bb to your computer and use it in GitHub Desktop.
How to add autostyling to a category widget with CARTO
<!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