kyroskoh/giacomo2.html

## giacomo2.html
<!DOCTYPE html>
<html>
  <head>
    <title>2 Maps: Create Viz</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" />
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />

    <style>
      html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #header {
        color: #3D8FCA;
        font-family: 'Helvetica-Neue', sans-serif;
        font-size: 24px;
        padding-top: 10px;
        padding-left: 20px;
        text-align: left;
        text-transform: uppercase;
      }
      #map1 {
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 40px;
        height: 480px;
      }
      #map2 {
        background-repeat: no-repeat;
        background-size: contain;
        bottom: -40;
        left: 0;
        position: absolute;
        right: 0;
        top: 500px;
        height: 480px;
      }
    </style>

  </head>
  <body>
    <div id="header">2 Maps: Create Viz</div>
    <div id="map1"></div>
    <div id="map2"></div>

    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <!-- place your code between the script tags below -->
    <script>
      window.onload = function() {
          var vizjson_url = 'https://giacowo.cartodb.com/api/v2/viz/8184fa78-5022-11e5-9ad5-0e853d047bba/viz.json'; // <-- Paste viz.json URL between quotes
          var vizjson_url2 = 'https://giacowo.cartodb.com/api/v2/viz/00f83528-54a0-11e5-90bb-0e4fddd5de28/viz.json'; // <-- Paste viz.json URL between quotes
          var options = {
            zoom: 2,
            cartodb_logo: false,
            layer_selector: true,
            legends: true,
          }

          cartodb.createVis(map1, vizjson_url, options) // <-- Change map_id to match your id in html
              .done(function(vis, layers) {
                  // do stuff
                  console.log("Map successfully created");
              })
              .error(function(err) {
                  // report error
                  console.log("An error occurred: " + err);
              });

          cartodb.createVis(map2, vizjson_url2, options) // <-- Change map_id to match your id in html
              .done(function(vis, layers) {
                  // do stuff
                  console.log("Map successfully created");
              })
              .error(function(err) {
                  // report error
                  console.log("An error occurred: " + err);
              });

      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>2 Maps: Create Viz</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" />
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />

	<style>
	html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	}
	#header {
	color: #3D8FCA;
	font-family: 'Helvetica-Neue', sans-serif;
	font-size: 24px;
	padding-top: 10px;
	padding-left: 20px;
	text-align: left;
	text-transform: uppercase;
	}
	#map1 {
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 40px;
	height: 480px;
	}
	#map2 {
	background-repeat: no-repeat;
	background-size: contain;
	bottom: -40;
	left: 0;
	position: absolute;
	right: 0;
	top: 500px;
	height: 480px;
	}
	</style>

	</head>
	<body>
	<div id="header">2 Maps: Create Viz</div>
	<div id="map1"></div>
	<div id="map2"></div>

	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

	<!-- place your code between the script tags below -->
	<script>
	window.onload = function() {
	var vizjson_url = 'https://giacowo.cartodb.com/api/v2/viz/8184fa78-5022-11e5-9ad5-0e853d047bba/viz.json'; // <-- Paste viz.json URL between quotes
	var vizjson_url2 = 'https://giacowo.cartodb.com/api/v2/viz/00f83528-54a0-11e5-90bb-0e4fddd5de28/viz.json'; // <-- Paste viz.json URL between quotes
	var options = {
	zoom: 2,
	cartodb_logo: false,
	layer_selector: true,
	legends: true,
	}

	cartodb.createVis(map1, vizjson_url, options) // <-- Change map_id to match your id in html
	.done(function(vis, layers) {
	// do stuff
	console.log("Map successfully created");
	})
	.error(function(err) {
	// report error
	console.log("An error occurred: " + err);
	});

	cartodb.createVis(map2, vizjson_url2, options) // <-- Change map_id to match your id in html
	.done(function(vis, layers) {
	// do stuff
	console.log("Map successfully created");
	})
	.error(function(err) {
	// report error
	console.log("An error occurred: " + err);
	});

	}
	</script>
	</body>
	</html>