ramiroaznar/index.html Secret

## 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>
	<!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>