4495761 by andrewxhill

index.html

<html>
<head>
  <link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
  <script src="//libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
	<style>
    html, body {padding: 0; margin: 0;}
    #map { width: 100%; height:100%; background: black;}
    #menu { position: absolute; top: 5; right: 5; width: 400px; height:60px; background: transparent;}
    #menu a { 
              margin: 0 5px 0 0;
              float: right;
              vertical-align: baseline;
              padding: 12px 13px;
              font: bold 19px "Helvetica",Arial;
              line-height: normal;
              color: #555;
              text-shadow: 0 1px 0 white;
              border-radius: 3px;
              border: 1px solid #B0B0B0;
              letter-spacing: -1px;
              background: -webkit-linear-gradient(#F9F9F9, #E1E1E1);
              background: -moz-linear-gradient(#F9F9F9, #E1E1E1);
              background: -o-linear-gradient(#F9F9F9, #E1E1E1);
              background: linear-gradient(#F9F9F9,#E1E1E1);
              text-decoration: none;
              cursor: pointer;
            }
    #menu a.selected,
    #menu a:hover { 
              color: #000;
            }
	</style>
	<script>
  var map;
  function init(){
    // initiate leaflet map
    map = new L.Map('map', { 
      center: [20,-20],
      zoom: 3
    })

    L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
      attribution: 'MapBox'
    }).addTo(map);

    var layerUrl = '//viz2.cartodb.com/api/v1/viz/3029/viz.json';

    var women = '//newsbeastlabs.cartodb.com/api/v1/viz/1934/viz.json'
    var layerOptions = {
              query: "SELECT * FROM {{table_name}}",
              tile_style: "#{{table_name}}{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;} "
    }

    var layers = [];

    var LayerActions = {
      all: function(){
          layers[0].setQuery("SELECT * FROM {{table_name}}");
          return true;
        },
      capitals: function(){
          layers[0].setQuery("SELECT * FROM {{table_name}} WHERE featurecla = 'Admin-0 capital'");
          return true;
        },
      megacities: function(){
          layers[0].setQuery("SELECT * FROM {{table_name}} WHERE megacity = 1");
          return true;
        }
    }

    cartodb.createLayer(map, layerUrl, layerOptions)
     .on('done', function(layer) {
      window.layer = layer;
      map.addLayer(layer);
      layers.push(layer);
    }).on('error', function() {
      //log the error
    });

    cartodb.createLayer(map, w)
      .on('done', function(layer2){
        window.layer2 = layer2
        map.addLayer(layer2)
        layer2.hide()
      })


    $('.button').click(function(){
      layer2.show();
    })

    
  }
	</script>
</head>
<body onload="init()">
  <div id='map'></div>
  <div id='menu'>
      <a href="#megacities" id="megacities" class="button megacities selected">Megacities</a> 
      <a href="#capitals" id="capitals" class="button capitals">Capitals</a> 
      <a href="#all" id="all" class="button all selected">All</a> 
  </div>
</body>
</html>