bsudekum/index.html

## 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>