CartoDB VN-resoluties

<!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/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>

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