FrieseWoudloper/Readme.MD

## Readme.MD

      
    Raw
  

              Readme.MD
            
          
    Bovenstaande kaart visualiseert de steun voor Verenigde Naties resoluties die door Nederland zijn ingediend. Per land is aangegeven welk percentage van de 'Nederlandse' draft resoluties door het betreffende land ondersteund wordt. Met 'ondersteunen' wordt bedoeld dat het land één van de indieners was. Het is dus niet voldoende wanneer het land alleen maar vóór de resolutie heeft gestemd.
De kaart is gemaakt door Martijn Brünger en gebaseerd op data die door Willy Bakker is verzameld op de website UNBISnet. Lees voor meer informatie dit blog of bekijk deze GitHub repository.

  
## 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/786dcc48-4d80-11e5-9434-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 vn_countries_periodes_resoluties"
    }

    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 vn_countries_periodes_resoluties WHERE periode='01-01-1975'");
      return true;
    },
    1985: function(){
      sublayers[0].setSQL("SELECT * FROM vn_countries_periodes_resoluties WHERE periode='01-01-1985'");
      return true;
    },
    1995: function() {
      sublayers[0].set({
        sql: "SELECT * FROM vn_countries_periodes_resoluties WHERE periode='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 vn_countries_periodes_resoluties WHERE periode='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-1985</a>
    <a href="#1985" id="1985" class="button 1985">1985-1995</a>
    <a href="#1995" id="1995" class="button 1995">1995-2005</a>
    <a href="#2005" id="2005" class="button 2005">2005-2015</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/786dcc48-4d80-11e5-9434-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 vn_countries_periodes_resoluties"
	}

	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 vn_countries_periodes_resoluties WHERE periode='01-01-1975'");
	return true;
	},
	1985: function(){
	sublayers[0].setSQL("SELECT * FROM vn_countries_periodes_resoluties WHERE periode='01-01-1985'");
	return true;
	},
	1995: function() {
	sublayers[0].set({
	sql: "SELECT * FROM vn_countries_periodes_resoluties WHERE periode='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 vn_countries_periodes_resoluties WHERE periode='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-1985</a>
	<a href="#1985" id="1985" class="button 1985">1985-1995</a>
	<a href="#1995" id="1995" class="button 1995">1995-2005</a>
	<a href="#2005" id="2005" class="button 2005">2005-2015</a>
	</div>
	</body>
	</html>