Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/index.html

Last active July 18, 2016 21:01
Show Gist options
  • Save ramiroaznar/625d619f9bc2ccc6eef444f316ab8be6 to your computer and use it in GitHub Desktop.
Save ramiroaznar/625d619f9bc2ccc6eef444f316ab8be6 to your computer and use it in GitHub Desktop.
Download ZIP
How to reset the view in a CARTO dashboard
Raw
readme.md

Change your map view (zoom and center) and then click on the "Set view" button.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to reset the view in a CARTO dashboard</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 style="top: 40px;bottom: auto;position: absolute;z-index: 100;left: 105px;">
<button class="CDB-Button CDB-Button--primary CDB-Button--big" id="view">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">Reset View</span>
</button>
</div>
<div id="dashboard"></div>
<script type="text/SQL" id="query">
SELECT *
FROM populated_places
WHERE pop_max > 0
</script>
<script>
window.onload = function() {
// set vizJson
var vizJSON = "https://team.cartodb.com/u/ramirocartodb/api/v3/viz/1740ac74-384e-11e6-91fe-0e31c9be1b51/viz.json";
// set SQL query
var query = cdb.$("#query").text();
// create dashboard
cartodb.deepInsights.createDashboard('#dashboard', vizJSON, {
no_cdn: false,
cartodb_logo: false,
zoom: 5, //set zoom
center: [40, 5] // set center
},function(err,dashboard){
// get map object
var map = dashboard.getMap();
// get & set layer object
var layer = map.getLayer(1);
layer.set('sql', query);
// set widget parameters
var sum = {
"type": "formula",
"title": "Total Population",
"column": "pop_max",
"operation": "sum"
};
var avg = {
"type": "formula",
"title": "Average Population",
"column": "pop_max",
"operation": "avg"
};
var histo = {
"type": "histogram",
"title": "Population Histogram",
"column": "pop_max",
"bins": 20
};
var city = {
"type": "category",
"title": "City Category",
"column": "name"
};
var country = {
"type": "category",
"title": "Country Category",
"column": "adm0name"
};
var city = {
"type": "category",
"title": "City Category",
"column": "name"
};
// add widgets to the dashboard
var sumWidget = dashboard.createFormulaWidget(sum, layer);
var avgWidget = dashboard.createFormulaWidget(avg, layer);
var histoWidget = dashboard.createHistogramWidget(histo, layer);
var countryWidget = dashboard.createCategoryWidget(country, layer);
var cityWidget = dashboard.createCategoryWidget(city, layer);
// assign set view functions
cdb.$('#view').click(function() {
vis.centerMapToOrigin();
vis.map.setZoom(5);
});
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment