javisantana · December 10, 2015 22:38
diff --git a/index.html b/index.html
 <html>
 <head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
  <script src="http://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;
            }
     .leaflet-fade-anim .leaflet-tile, .leaflet-fade-anim .leaflet-popup {
           -webkit-transition: none !important;
            transition: none !important;
      }
  </style>
 	<script>
  var map;
  function init(){
  	cdb.$.fx.off = true
    // 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 = 'http://viz2.cartodb.com/api/v1/viz/3029/viz.json';

    var women = 'http://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, women)
      .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>
	<html>
	<head>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
	<script src="http://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;
	}
	.leaflet-fade-anim .leaflet-tile, .leaflet-fade-anim .leaflet-popup {
	-webkit-transition: none !important;
	transition: none !important;
	}
	</style>
	<script>
	var map;
	function init(){
	cdb.$.fx.off = true
	// 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 = 'http://viz2.cartodb.com/api/v1/viz/3029/viz.json';

	var women = 'http://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, women)
	.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>