FrieseWoudloper/index.html

## index.html
<!doctype 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:100%; background: black;}
    #menu { position: absolute; top: 5px; right: 10px; width: 500px; height:60px; background: transparent; z-index:10;}
    #menu a {
      margin: 15px 10px 0 0;
      float: left;
      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;
    }
  </style>

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

  L.tileLayer('https://api.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWJzYm5zIiwiYSI6IjkyN2E2ZWE4YTkzYjA1NGI1MDkyNzFkMmJlNzViZWYzIn0.6gguWcp3nN_uvz4f8yquFg', {
    attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
  }).addTo(map);

  var layerUrl = 'https://mb7.cartodb.com/api/v2/viz/2ad7f072-47df-11e5-8079-0e018d66dc29/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 un_ga_countries_resolutions_2_copy_2"
    }

    var sublayer = layer.getSubLayer(0);

    sublayer.set(subLayerOptions);

    sublayers.push(sublayer);
  }).on('error', function() {
    //log the error
  });

  //we define the queries that will be performed when we click on the buttons, by modifying the SQL of our layer
  var LayerActions = {
    1975: function(){
      sublayers[0].setSQL("SELECT * FROM un_ga_countries_resolutions_2_copy_2 WHERE year='01-01-1975'");
      return true;
    },
    1985: function(){
      sublayers[0].setSQL("SELECT * FROM un_ga_countries_resolutions_2_copy_2 WHERE year='01-01-1985'");
      return true;
    },
    1995: function() {
      sublayers[0].set({
        sql: "SELECT * FROM un_ga_countries_resolutions_2_copy_2 WHERE year='01-01-1995'",
        //as it is said, you can also add some CartoCSS code to make your points look like you want for the different queries
       // cartocss: "#ne_10m_populated_places_simple{ marker-fill: black; }"
      });
      return true;
    },
    2005: function(){
      sublayers[0].setSQL("SELECT * FROM un_ga_countries_resolutions_2_copy_2 WHERE year='01-01-2005'");
      return true;
    }
  }

  $('.button').click(function() {
    $('.button').removeClass('selected');
    $(this).addClass('selected');
    //this gets the id of the different buttons and calls to LayerActions which responds according to the selected id
    LayerActions[$(this).attr('id')]();
  });
}
  </script>
</head>

<body onload="init()">
  <div id='map'></div>
  <div id='menu'>
    <a href="#1975" id="1975" class="button 1975">1975</a>
    <a href="#1985" id="1985" class="button 1985">1985</a>
    <a href="#1995" id="1995" class="button 1995">1995</a>
    <a href="#2005" id="2005" class="button 2005">2005</a>
  </div>
</body>
</html>
	<!doctype 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:100%; background: black;}
	#menu { position: absolute; top: 5px; right: 10px; width: 500px; height:60px; background: transparent; z-index:10;}
	#menu a {
	margin: 15px 10px 0 0;
	float: left;
	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;
	}
	</style>

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

	L.tileLayer('https://api.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWJzYm5zIiwiYSI6IjkyN2E2ZWE4YTkzYjA1NGI1MDkyNzFkMmJlNzViZWYzIn0.6gguWcp3nN_uvz4f8yquFg', {
	attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>'
	}).addTo(map);

	var layerUrl = 'https://mb7.cartodb.com/api/v2/viz/2ad7f072-47df-11e5-8079-0e018d66dc29/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 un_ga_countries_resolutions_2_copy_2"
	}

	var sublayer = layer.getSubLayer(0);

	sublayer.set(subLayerOptions);

	sublayers.push(sublayer);
	}).on('error', function() {
	//log the error
	});

	//we define the queries that will be performed when we click on the buttons, by modifying the SQL of our layer
	var LayerActions = {
	1975: function(){
	sublayers[0].setSQL("SELECT * FROM un_ga_countries_resolutions_2_copy_2 WHERE year='01-01-1975'");
	return true;
	},
	1985: function(){
	sublayers[0].setSQL("SELECT * FROM un_ga_countries_resolutions_2_copy_2 WHERE year='01-01-1985'");
	return true;
	},
	1995: function() {
	sublayers[0].set({
	sql: "SELECT * FROM un_ga_countries_resolutions_2_copy_2 WHERE year='01-01-1995'",
	//as it is said, you can also add some CartoCSS code to make your points look like you want for the different queries
	// cartocss: "#ne_10m_populated_places_simple{ marker-fill: black; }"
	});
	return true;
	},
	2005: function(){
	sublayers[0].setSQL("SELECT * FROM un_ga_countries_resolutions_2_copy_2 WHERE year='01-01-2005'");
	return true;
	}
	}

	$('.button').click(function() {
	$('.button').removeClass('selected');
	$(this).addClass('selected');
	//this gets the id of the different buttons and calls to LayerActions which responds according to the selected id
	LayerActions[$(this).attr('id')]();
	});
	}
	</script>
	</head>

	<body onload="init()">
	<div id='map'></div>
	<div id='menu'>
	<a href="#1975" id="1975" class="button 1975">1975</a>
	<a href="#1985" id="1985" class="button 1985">1985</a>
	<a href="#1995" id="1995" class="button 1995">1995</a>
	<a href="#2005" id="2005" class="button 2005">2005</a>
	</div>
	</body>
	</html>