Skip to content

Instantly share code, notes, and snippets.

@bsudekum
Last active December 16, 2015 08:49
Show Gist options
  • Save bsudekum/5408892 to your computer and use it in GitHub Desktop.
Save bsudekum/5408892 to your computer and use it in GitHub Desktop.
Source Code for Vector- Tile Sandwich
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment