hamhands/medianRent

## medianRent
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>External map layers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.2/mapbox.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.2/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }

#map { position:absolute; top:0; bottom:0; width:100%; }

.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;
        }
</style>
</head>
<body>
<nav id='menuUI' class='menu-ui'></nav>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiaGFtaGFuZHMiLCJhIjoiMksybk92QSJ9.TOMmDM4uWCY65kSLpS_Nww';
var map = L.mapbox.map('map').setView([39.952299, -75.163256], 11);
var layers = document.getElementById('menuUI');

addLayer(L.mapbox.featureLayer()
    .loadURL('static/data/medianRent.geojson')
    .on('ready', addLayer), '1990', 1);
addLayer(L.mapbox.featureLayer()
    .loadURL('static/data/medianRent.geojson')
    .on('ready', addLayer), '2000', 2);
addLayer(L.mapbox.featureLayer()
    .loadURL('static/data/medianRent.geojson')
    .on('ready', addLayer), '2010', 3);

//add tiles
var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
}).addTo(map);

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

 var link = document.createElement('a');
        link.href = '#';
        link.className = 'active';
        link.innerHTML = name;

    link.onclick = function(e) {
        e.preventDefault();
        e.stopPropagation();

        if (this.className == 'active' && map.hasLayer(layer)) {
            map.removeLayer(layer);
            this.className = 'active';
        } else {
            map.addLayer(layer);
            this.className = '';
        }
    };

    layers.appendChild(link);
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>External map layers</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.2/mapbox.js'></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.2/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }

	#map { position:absolute; top:0; bottom:0; width:100%; }

	.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;
	}
	</style>
	</head>
	<body>
	<nav id='menuUI' class='menu-ui'></nav>
	<div id='map'></div>
	<script>
	L.mapbox.accessToken = 'pk.eyJ1IjoiaGFtaGFuZHMiLCJhIjoiMksybk92QSJ9.TOMmDM4uWCY65kSLpS_Nww';
	var map = L.mapbox.map('map').setView([39.952299, -75.163256], 11);
	var layers = document.getElementById('menuUI');

	addLayer(L.mapbox.featureLayer()
	.loadURL('static/data/medianRent.geojson')
	.on('ready', addLayer), '1990', 1);
	addLayer(L.mapbox.featureLayer()
	.loadURL('static/data/medianRent.geojson')
	.on('ready', addLayer), '2000', 2);
	addLayer(L.mapbox.featureLayer()
	.loadURL('static/data/medianRent.geojson')
	.on('ready', addLayer), '2010', 3);

	//add tiles
	var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
	}).addTo(map);

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

	var link = document.createElement('a');
	link.href = '#';
	link.className = 'active';
	link.innerHTML = name;

	link.onclick = function(e) {
	e.preventDefault();
	e.stopPropagation();

	if (this.className == 'active' && map.hasLayer(layer)) {
	map.removeLayer(layer);
	this.className = 'active';
	} else {
	map.addLayer(layer);
	this.className = '';
	}
	};

	layers.appendChild(link);
	}

	</script>
	</body>
	</html>