Skip to content

Instantly share code, notes, and snippets.

@andrewxhill
Forked from javisantana/index.html
Last active December 10, 2015 22:38
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save andrewxhill/4503902 to your computer and use it in GitHub Desktop.
<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;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
</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 = '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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment