Making a BOS leaflet.js map because it takes me sooo long trying to use d3 and it’s nice to give people a familiar interface. Need to add a function in the addStyle() to make this bad boy more colorful.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet w/ geojson Polygons & addStyle()</title>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="//leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->
<script type="text/javascript" src="//maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
<script type="text/javascript" src="./sfBOSleaf.geojson" ></script>
<style type="text/css">
#map {
width: 90%;
height: 600px;
margin: 0 0 1em 0;
margin-right:auto;
margin-left:auto;
}
</style>
</head>
<body onload="initialize()">
<div id="map" ></div>
<script type="text/javascript">
function initialize() {
var watercolor = new L.StamenTileLayer("watercolor");
var terrain = new L.StamenTileLayer("terrain");
var toner= new L.StamenTileLayer("toner");
var bases = {
"Watercolor":watercolor,
"Terrain":terrain,
"Toner":toner
}
var map = new L.Map('map', {
center: [37.75, -122.45],
zoom:12,
layers:toner
})
var bosBords = L.geoJson().addTo(map);
bosBords.addData(bords)
.setStyle(
{fillColor:'green',
color:'pink'}
);
}
</script>
</body>
</html>