CartoDB VN-resoluties

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.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
  <script src="https://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>

L.tileLayer('https://api.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWJzYm5zIiwiYSI6IjkyN2E2ZWE4YTkzYjA1NGI1MDkyNzFkMmJlNzViZWYzIn0.6gguWcp3nN_uvz4f8yquFg', {
    attribution: 'Mapbox <a href="https://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>

Modified http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js