bsudekum · December 16, 2015 08:49
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>New York City Neighborhoods</title>
 	<meta charset="utf-8" />

 	<meta name="viewport" content="width=device-width, initial-scale=1.0">

 	<html>
 	<head>
 	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0beta0.0/mapbox.css' rel='stylesheet' />
 	<!--[if lte IE 8]>
 	    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0beta0.0/mapbox.ie.css' rel='stylesheet' />
 	  <![endif]-->
 	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0beta0.0/mapbox.js'></script>
 	<script src='http://bl.ocks.org/lxbarth/raw/5388588/nycneighborhoods.js'></script>

 	<style>
 	  html,
 	  body,
 		#map {
 		  padding: 0;
 		  margin: 0;
 			width: 100%;
 			height: 100%;
 		}

 		.info {
 			padding: 6px 8px;
 			font: 14px/16px Arial, Helvetica, sans-serif;
 			background: white;
 			background: rgba(255,255,255,0.8);
 			box-shadow: 0 0 15px rgba(0,0,0,0.2);
 			border-radius: 5px;
 		}
 		.info h4 {
 			margin: 0 0 5px;
 			color: #777;
 		}

 		.legend {
 			text-align: left;
 			line-height: 18px;
 			color: #555;
 		}
 		.legend i {
 			width: 18px;
 			height: 18px;
 			float: left;
 			margin-right: 8px;
 			opacity: 0.7;
 		}
 		.leaflet-top-pane {
 			pointer-events: none;
 		}
 	</style>
 </head>
 <body>
 	<div id="map"></div>
 	<script type="text/javascript">

 		var map = L.mapbox.map('map')
 			.setView([40.75, -73.94], 15);

 		// control that shows state info on hover
 		var info = L.control();

 		info.onAdd = function (map) {
 			this._div = L.DomUtil.create('div', 'info');
 			this.update();
 			return this._div;
 		};

 		info.update = function (props) {
      var info = document.getElementsByClassName('info')[0];
      if (!info || !props || !props.NTAName) return;
 		  info.textContent = props.NTAName;
 		};

 		info.addTo(map);

 		function style(feature) {
 			return {
 				weight: 0,
 				fillOpacity: 0.5,
 				fillColor: '#FFEDA0'
 			};
 		}

 		function highlightFeature(e) {
 			var layer = e.target;

 			layer.setStyle({
 				weight: 0,
 				opacity: 1,
 				color: 'white',
 				dashArray: '3',
 				fillOpacity: 0.7,
 				fillColor: '#FEB24C'
 			});

 			if (!L.Browser.ie && !L.Browser.opera) {
 				layer.bringToFront();
 			}

 			info.update(layer.feature.properties);
 		}

 		var geojson;

 		function resetHighlight(e) {
 			geojson.resetStyle(e.target);
 			info.update();
 		}

 		function zoomToFeature(e) {
 			map.fitBounds(e.target.getBounds());
 		}

 		function onEachFeature(feature, layer) {
 			layer.on({
 				mouseover: highlightFeature,
 				mouseout: resetHighlight,
 				click: zoomToFeature
 			});
 		}

 		geojson = L.geoJson(neighborhoods, {
 			style: style,
 			onEachFeature: onEachFeature
 		}).addTo(map);
    map.attributionControl.addAttribution('NYC Neighborhoods &copy; <a href="https://nycopendata.socrata.com/Government/Neighborhood-Tabulation-Areas/cpf4-rkhq">NYC Open Data</a> <a href="http://openstreetmap.org">OpenStreetMap</a>');

 		var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
 		var topLayer = L.mapbox.tileLayer('bobbysud.map-3inxc2p4').addTo(map);
 		topPane.appendChild(topLayer.getContainer());
 		topLayer.setZIndex(9);

  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>New York City Neighborhoods</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<html>
	<head>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0beta0.0/mapbox.css' rel='stylesheet' />
	<!--[if lte IE 8]>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0beta0.0/mapbox.ie.css' rel='stylesheet' />
	<![endif]-->
	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0beta0.0/mapbox.js'></script>
	<script src='http://bl.ocks.org/lxbarth/raw/5388588/nycneighborhoods.js'></script>

	<style>
	html,
	body,
	#map {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	}

	.info {
	padding: 6px 8px;
	font: 14px/16px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;
	}
	.info h4 {
	margin: 0 0 5px;
	color: #777;
	}

	.legend {
	text-align: left;
	line-height: 18px;
	color: #555;
	}
	.legend i {
	width: 18px;
	height: 18px;
	float: left;
	margin-right: 8px;
	opacity: 0.7;
	}
	.leaflet-top-pane {
	pointer-events: none;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script type="text/javascript">

	var map = L.mapbox.map('map')
	.setView([40.75, -73.94], 15);

	// control that shows state info on hover
	var info = L.control();

	info.onAdd = function (map) {
	this._div = L.DomUtil.create('div', 'info');
	this.update();
	return this._div;
	};

	info.update = function (props) {
	var info = document.getElementsByClassName('info')[0];
	if (!info \|\| !props \|\| !props.NTAName) return;
	info.textContent = props.NTAName;
	};

	info.addTo(map);

	function style(feature) {
	return {
	weight: 0,
	fillOpacity: 0.5,
	fillColor: '#FFEDA0'
	};
	}

	function highlightFeature(e) {
	var layer = e.target;

	layer.setStyle({
	weight: 0,
	opacity: 1,
	color: 'white',
	dashArray: '3',
	fillOpacity: 0.7,
	fillColor: '#FEB24C'
	});

	if (!L.Browser.ie && !L.Browser.opera) {
	layer.bringToFront();
	}

	info.update(layer.feature.properties);
	}

	var geojson;

	function resetHighlight(e) {
	geojson.resetStyle(e.target);
	info.update();
	}

	function zoomToFeature(e) {
	map.fitBounds(e.target.getBounds());
	}

	function onEachFeature(feature, layer) {
	layer.on({
	mouseover: highlightFeature,
	mouseout: resetHighlight,
	click: zoomToFeature
	});
	}

	geojson = L.geoJson(neighborhoods, {
	style: style,
	onEachFeature: onEachFeature
	}).addTo(map);
	map.attributionControl.addAttribution('NYC Neighborhoods © <a href="https://nycopendata.socrata.com/Government/Neighborhood-Tabulation-Areas/cpf4-rkhq">NYC Open Data</a> <a href="http://openstreetmap.org">OpenStreetMap</a>');

	var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
	var topLayer = L.mapbox.tileLayer('bobbysud.map-3inxc2p4').addTo(map);
	topPane.appendChild(topLayer.getContainer());
	topLayer.setZIndex(9);

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