byrney · March 31, 2017 13:40
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>Toggling layers</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
 <style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
 </style>
 </head>
 <body>
 <style>
 .menu-ui {
    background:#fff;
    position:absolute;
    top:10px;right:10px;
    z-index:1;
    border-radius:3px;
    width:120px;
    border:1px solid rgba(0,0,0,0.4);
 }
 .menu-ui a {
    font-size:13px;
    color:#404040;
    display:block;
    margin:0;padding:0;
    padding:10px;
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,0.25);
    text-align:center;
 }
 .menu-ui a:first-child {
    border-radius:3px 3px 0 0;
 }
 .menu-ui a:last-child {
    border:none;
    border-radius:0 0 3px 3px;
 }
 .menu-ui a:hover {
    background:#f8f8f8;
    color:#404040;
 }
 .menu-ui a.active {
    background:#3887BE;
    color:#FFF;
 }
 .menu-ui a.active:hover {
    background:#3074a4;
 }
 .fade {
    opacity: 0;
    -webkit-transition: opacity 5s ease-in;
    -moz-transition: opacity 5s ease-in;
    -o-transition: opacity 5s ease-in;
    -ms-transition: opacity 5s ease-in;
    transition: opacity 5s ease-in;
 }

 </style>
 <nav id='menu-ui' class='menu-ui'></nav>
 <div id='map'></div>

 <script>
 L.mapbox.accessToken = 'pk.eyJ1IjoicmJ5cm5lIiwiYSI6ImNpc3dhYTR6cDAwMmIydG1uOGNiYzYxYXcifQ.N0aptrqEwFyMpA_-I09tYQ';
 var map = L.mapbox.map('map').setView([38.8922,-77.0348], 14);
 var layers = document.getElementById('menu-ui');

 //addLayer(L.mapbox.tileLayer('mapbox.light'), 'Base Map', 1);
 var lightLayer = L.mapbox.tileLayer('mapbox.streets');
 addLayer(lightLayer, 'Light Map', 1);
 lightLayer.on('load', function(e){
    var layer = e.target;
    layer.getContainer().classList.add('fade');
 });
 var darkLayer = L.mapbox.tileLayer('mapbox.dark');
 addLayer(darkLayer, 'Dark Map', 2);
 darkLayer.on('load', function(e){
    var layer = e.target;
    layer.getContainer().classList.add('fade');
 });
 //darkLayer.getContainer().addClass('fade');
 //darkLayer.getContainer().addClass('visible');
 addLayer(L.mapbox.tileLayer('examples.bike-lanes'), 'Bike Lanes', 3);
 addLayer(L.mapbox.tileLayer('examples.bike-locations'), 'Bike Stations', 4);

 function addLayer(layer, name, zIndex) {
    layer.setZIndex(zIndex).addTo(map);

    // Create a simple layer switcher that
    // toggles layers on and off.
    var link = document.createElement('a');
    link.href = '#';
    link.className = 'active';
    link.innerHTML = name;

    link.onclick = function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (map.hasLayer(layer)) {
            if(layer.options.zIndex <= 2){
                var opacity = layer.options.opacity;
                if(opacity == 0){
                    layer.setOpacity(1);
                    this.classList.add('active');
                } else {
                    layer.setOpacity(0);
                    this.classList.remove('active')
                }
            } else {
                map.removeLayer(layer);
                this.classList.remove('active')
            }
        } else {
            map.addLayer(layer);
            this.classList.add('active');
        }
    };

    layers.appendChild(link);
 }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Toggling layers</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
	<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<style>
	.menu-ui {
	background:#fff;
	position:absolute;
	top:10px;right:10px;
	z-index:1;
	border-radius:3px;
	width:120px;
	border:1px solid rgba(0,0,0,0.4);
	}
	.menu-ui a {
	font-size:13px;
	color:#404040;
	display:block;
	margin:0;padding:0;
	padding:10px;
	text-decoration:none;
	border-bottom:1px solid rgba(0,0,0,0.25);
	text-align:center;
	}
	.menu-ui a:first-child {
	border-radius:3px 3px 0 0;
	}
	.menu-ui a:last-child {
	border:none;
	border-radius:0 0 3px 3px;
	}
	.menu-ui a:hover {
	background:#f8f8f8;
	color:#404040;
	}
	.menu-ui a.active {
	background:#3887BE;
	color:#FFF;
	}
	.menu-ui a.active:hover {
	background:#3074a4;
	}
	.fade {
	opacity: 0;
	-webkit-transition: opacity 5s ease-in;
	-moz-transition: opacity 5s ease-in;
	-o-transition: opacity 5s ease-in;
	-ms-transition: opacity 5s ease-in;
	transition: opacity 5s ease-in;
	}

	</style>
	<nav id='menu-ui' class='menu-ui'></nav>
	<div id='map'></div>

	<script>
	L.mapbox.accessToken = 'pk.eyJ1IjoicmJ5cm5lIiwiYSI6ImNpc3dhYTR6cDAwMmIydG1uOGNiYzYxYXcifQ.N0aptrqEwFyMpA_-I09tYQ';
	var map = L.mapbox.map('map').setView([38.8922,-77.0348], 14);
	var layers = document.getElementById('menu-ui');

	//addLayer(L.mapbox.tileLayer('mapbox.light'), 'Base Map', 1);
	var lightLayer = L.mapbox.tileLayer('mapbox.streets');
	addLayer(lightLayer, 'Light Map', 1);
	lightLayer.on('load', function(e){
	var layer = e.target;
	layer.getContainer().classList.add('fade');
	});
	var darkLayer = L.mapbox.tileLayer('mapbox.dark');
	addLayer(darkLayer, 'Dark Map', 2);
	darkLayer.on('load', function(e){
	var layer = e.target;
	layer.getContainer().classList.add('fade');
	});
	//darkLayer.getContainer().addClass('fade');
	//darkLayer.getContainer().addClass('visible');
	addLayer(L.mapbox.tileLayer('examples.bike-lanes'), 'Bike Lanes', 3);
	addLayer(L.mapbox.tileLayer('examples.bike-locations'), 'Bike Stations', 4);

	function addLayer(layer, name, zIndex) {
	layer.setZIndex(zIndex).addTo(map);

	// Create a simple layer switcher that
	// toggles layers on and off.
	var link = document.createElement('a');
	link.href = '#';
	link.className = 'active';
	link.innerHTML = name;

	link.onclick = function(e) {
	e.preventDefault();
	e.stopPropagation();
	if (map.hasLayer(layer)) {
	if(layer.options.zIndex <= 2){
	var opacity = layer.options.opacity;
	if(opacity == 0){
	layer.setOpacity(1);
	this.classList.add('active');
	} else {
	layer.setOpacity(0);
	this.classList.remove('active')
	}
	} else {
	map.removeLayer(layer);
	this.classList.remove('active')
	}
	} else {
	map.addLayer(layer);
	this.classList.add('active');
	}
	};

	layers.appendChild(link);
	}
	</script>
	</body>
	</html>