HTML from class
Not the GeoJSON though! You can find it in Slack.
<!doctype html>
<html>
<head>
<title>This is a Leaflet map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css">
<style>
#map {
background: red;
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
<script>
// L.map('map') means make a map in the div with the id of 'map'
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 4
});
// https: also suppported.
var watercolor = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 1,
maxZoom: 16,
ext: 'png'
});
watercolor.addTo(map);
// L.marker([50.5, 30.5]).addTo(map);
// make my house
var house = L.marker([50.5, 30.5])
.bindTooltip("Testing this out")
.bindPopup("Testing the popup")
// then, add my house to the map
house.addTo(map)
// STEP ONE
// make an empty geoJSON layer
// with all of our custom things like 'style'
// give it null to say "we don't have any data"
var geoLayer = L.geoJSON(null, {
style: function (feature) {
if(feature.properties.BoroName == "Manhattan") {
return { color: 'black' }
} else if(feature.properties.BoroName == "Brooklyn") {
return { color: 'green' }
} else {
return { color: 'red' }
}
}
}).bindTooltip(function (layer) {
return "The neighborhood is named" + layer.feature.properties.NTAName;
})
// STEP TWO
// Use omnivore to read in neighborhoods.json
// and also give it the empty geoJSON layer to put the info in
var nabes = omnivore.geojson('neighborhoods.json', null, geoLayer)
.on('ready', function() {
map.fitBounds(nabes.getBounds())
})
// STEP THREE
// add the **NEW** layer from omnivore to the map
nabes.addTo(map);
// var geoLayer = L.geoJSON(states, {
// style: function (feature) {
// return {
// color: 'black'
// };
// }
// }).bindTooltip(function (layer) {
// return layer.feature.properties.name;
// })
// geoLayer.addTo(map);
// map.fitBounds(geoLayer.getBounds())
</script>
</body>
</html>