Pabloska/index.html

## index.html
<html>
<head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>
  <style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #map { width: 100%; height:600; background: black;}
    #menu { position: absolute; top: 5px; left: 90px; width: 500px; height:60px; background: transparent; z-index:10;}
    #menu a {
      margin: 15px 10px 0 0;
      float: right;
      vertical-align: baseline;
      width: 70px;
      padding: 10px;
      text-align: center;
      font: bold 11px "Helvetica",Arial;
      line-height: normal;
      color: #555;
      border-radius: 4px;
      border: 1px solid #777777;
      background: #ffffff;
      text-decoration: none;
      cursor: pointer;
    }
    #menu a.selected,
    #menu a:hover {
      color: #F84F40;
    }

	#dashboard {
          background: #E6E6E6;
          border-left: 0px solid #000;
          height: 580;
          font-family: 'Open Sans', sans-serif;
		  color: black;
          overflow-y: scroll;
          padding: 10px;
          position: absolute;
          right: 0;
          text-align: left;
          top: 0;
          z-index: 2001;
          opacity: 0.90;
          width: 370px;
      }
	  #chart_div {
          height: 300px;
          width: 300px;
      }
  </style>

  <script>
  var map;
  function init(){
    // initiate leaflet map
    map = new L.Map('map', {
      center: [40,50],
      width: 500,
	  zoom: 3
    })

    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
      attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
    }).addTo(map);

  //adding layer
  var layerUrl = 'https://migrantreport.cartodb.com/api/v2/viz/567c6bc2-39f2-11e5-9621-0e0c41326911/viz.json';

	var sublayers = [];

	cartodb.createLayer(map, layerUrl)
	.addTo(map)
	.on('done', function(layer) {
    // change the query for the first layer
    var subLayerOptions = {
      sql: "SELECT * FROM geographies2",
      cartocss: "#geographies2{ polygon-fill: #F84F40; polygon-opacity: 0.7; line-color: #FFF; line-width: 0.5; line-opacity: 1;}"
    }
    var sublayer = layer.getSubLayer(0);
    sublayer.set(subLayerOptions);
    sublayers.push(sublayer);
	sublayer.setInteraction(true);
    sublayer.setInteractivity("cartodb_id,name,background,legal_framework,type");

	sublayer.on('featureOver',function(e, latlng, pos, data, subLayerIndex) {
		$("#header").html("<h2><b></b></h2><p>" + data.name +  " ( "+ data.type +  " ) </p>   ");
		//draw_chart([data.score2010, data.score2011,data.score2012,data.score2013,data.score2014], data.name);
        $("#info").html("<h2><b>BACKGROUND</b></h2>" + data.background+  "<h2><b>LEGAL FRAMEWORK</b></h2>" + data.legal_framework+  "");
			});

  }).on('error', function() {
    //log the error
  });
  //higlight selected buttom
  $('.button').click(function() {
  $('.button').removeClass('selected');
  $(this).addClass('selected');
  LayerActions[$(this).attr('id')]();
});
 //layer actions

 var LayerActions = {
  all: function(){
    sublayers[0].set({
	sql: "SELECT * FROM geographies2",
	//cartocss: "#ne_10m_populated_places_simple{ marker-fill: green; }"
	});
    return true;
  },
  Destination: function(){
    sublayers[0].set({
	sql: "SELECT * FROM geographies2 WHERE type = 'Destination'",
	//cartocss: "#ne_10m_populated_places_simple{ marker-fill: blue; }"
	});
    return true;
  },
  Transit: function(){
    sublayers[0].set({
	sql: "SELECT * FROM geographies2 WHERE type = 'Transit'",
	//cartocss: "#ne_10m_populated_places_simple{ marker-fill: red; }"
	});
    return true;
  },
  Origin: function(){
    sublayers[0].set({
	sql: "SELECT * FROM geographies2 WHERE type = 'Origin'",
	//cartocss: "#ne_10m_populated_places_simple{ marker-fill: red; }"
	});
    return true;
  }

  }

}

   </script>
</head>

<body onload="init()">
  <div id='map'></div>
  <img src="http://migrantreport.org/wp-content/uploads/migrant-report-red-2x.png" style="float:left;position:relative;width:110px;height:20px;bottom:30; left: 90;opacity:0.6">
  <div id="dashboard">

  <p>
  <img src="http://migrantreport.org/wp-content/uploads/3-red.png" alt="migrnats" style="float:right;width:90px;height:90px;font-size:20;opacity: 0.6"><h2>Migrant Legal Satus</h2>
  </p>

  <div id="header" style ="height:50px, width:50px,text-align:center;font-size:20;color:red;font-weight: bold;opacity: 0.6">Click on a region to display the related information.</div>
  <div id="info" style="text-align: justify;font-size:12"></div>
  </div>

  <div id='menu'>
    <a href="#Origin" id="Origin" class="button megacities">ORIGIN</a>
	<a href="#Transit" id="Transit" class="button megacities">TRANSIT</a>
    <a href="#Destination" id="Destination" class="button capitals">DESTINATION</a>
    <a href="#all" id="all" class="button all">ALL</a>
  </div>
</body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>
	<style>
	html, body {width:100%; height:100%; padding: 0; margin: 0;}
	#map { width: 100%; height:600; background: black;}
	#menu { position: absolute; top: 5px; left: 90px; width: 500px; height:60px; background: transparent; z-index:10;}
	#menu a {
	margin: 15px 10px 0 0;
	float: right;
	vertical-align: baseline;
	width: 70px;
	padding: 10px;
	text-align: center;
	font: bold 11px "Helvetica",Arial;
	line-height: normal;
	color: #555;
	border-radius: 4px;
	border: 1px solid #777777;
	background: #ffffff;
	text-decoration: none;
	cursor: pointer;
	}
	#menu a.selected,
	#menu a:hover {
	color: #F84F40;
	}

	#dashboard {
	background: #E6E6E6;
	border-left: 0px solid #000;
	height: 580;
	font-family: 'Open Sans', sans-serif;
	color: black;
	overflow-y: scroll;
	padding: 10px;
	position: absolute;
	right: 0;
	text-align: left;
	top: 0;
	z-index: 2001;
	opacity: 0.90;
	width: 370px;
	}
	#chart_div {
	height: 300px;
	width: 300px;
	}
	</style>

	<script>
	var map;
	function init(){
	// initiate leaflet map
	map = new L.Map('map', {
	center: [40,50],
	width: 500,
	zoom: 3
	})

	L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>'
	}).addTo(map);

	//adding layer
	var layerUrl = 'https://migrantreport.cartodb.com/api/v2/viz/567c6bc2-39f2-11e5-9621-0e0c41326911/viz.json';

	var sublayers = [];

	cartodb.createLayer(map, layerUrl)
	.addTo(map)
	.on('done', function(layer) {
	// change the query for the first layer
	var subLayerOptions = {
	sql: "SELECT * FROM geographies2",
	cartocss: "#geographies2{ polygon-fill: #F84F40; polygon-opacity: 0.7; line-color: #FFF; line-width: 0.5; line-opacity: 1;}"
	}
	var sublayer = layer.getSubLayer(0);
	sublayer.set(subLayerOptions);
	sublayers.push(sublayer);
	sublayer.setInteraction(true);
	sublayer.setInteractivity("cartodb_id,name,background,legal_framework,type");

	sublayer.on('featureOver',function(e, latlng, pos, data, subLayerIndex) {
	$("#header").html("<h2><b></b></h2><p>" + data.name + " ( "+ data.type + " ) </p> ");
	//draw_chart([data.score2010, data.score2011,data.score2012,data.score2013,data.score2014], data.name);
	$("#info").html("<h2><b>BACKGROUND</b></h2>" + data.background+ "<h2><b>LEGAL FRAMEWORK</b></h2>" + data.legal_framework+ "");
	});

	}).on('error', function() {
	//log the error
	});
	//higlight selected buttom
	$('.button').click(function() {
	$('.button').removeClass('selected');
	$(this).addClass('selected');
	LayerActions[$(this).attr('id')]();
	});
	//layer actions

	var LayerActions = {
	all: function(){
	sublayers[0].set({
	sql: "SELECT * FROM geographies2",
	//cartocss: "#ne_10m_populated_places_simple{ marker-fill: green; }"
	});
	return true;
	},
	Destination: function(){
	sublayers[0].set({
	sql: "SELECT * FROM geographies2 WHERE type = 'Destination'",
	//cartocss: "#ne_10m_populated_places_simple{ marker-fill: blue; }"
	});
	return true;
	},
	Transit: function(){
	sublayers[0].set({
	sql: "SELECT * FROM geographies2 WHERE type = 'Transit'",
	//cartocss: "#ne_10m_populated_places_simple{ marker-fill: red; }"
	});
	return true;
	},
	Origin: function(){
	sublayers[0].set({
	sql: "SELECT * FROM geographies2 WHERE type = 'Origin'",
	//cartocss: "#ne_10m_populated_places_simple{ marker-fill: red; }"
	});
	return true;
	}

	}

	}

	</script>
	</head>

	<body onload="init()">
	<div id='map'></div>
	<img src="http://migrantreport.org/wp-content/uploads/migrant-report-red-2x.png" style="float:left;position:relative;width:110px;height:20px;bottom:30; left: 90;opacity:0.6">
	<div id="dashboard">

	<p>
	<img src="http://migrantreport.org/wp-content/uploads/3-red.png" alt="migrnats" style="float:right;width:90px;height:90px;font-size:20;opacity: 0.6"><h2>Migrant Legal Satus</h2>
	</p>

	<div id="header" style ="height:50px, width:50px,text-align:center;font-size:20;color:red;font-weight: bold;opacity: 0.6">Click on a region to display the related information.</div>
	<div id="info" style="text-align: justify;font-size:12"></div>
	</div>

	<div id='menu'>
	<a href="#Origin" id="Origin" class="button megacities">ORIGIN</a>
	<a href="#Transit" id="Transit" class="button megacities">TRANSIT</a>
	<a href="#Destination" id="Destination" class="button capitals">DESTINATION</a>
	<a href="#all" id="all" class="button all">ALL</a>
	</div>
	</body>
	</html>