Label dataset for BOS districts using label leaflet plugin hack to make little text labels.
<!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="//bl.ocks.org/mpmckenna8/raw/9959871/sfBOSleaf.geojson" ></script>
<script src="//leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
<link rel="stylesheet" href="//leaflet.github.io/Leaflet.label/leaflet.label.css" />
<script type="text/javascript" src="./labelSFbos.geojson" ></script>
<style type="text/css">
#map {
width: 600px;
height: 400px;
margin: 0 0 1em 0;
margin-right:auto;
margin-left:auto;
}
.distPoly {
opacity:1;
fill:purple;
}
.leaflet-label {
background:none;
left: -22px;
border:none;
background-clip:none;
}
.leaflet-label:before {
border-right: 0px solid black;
border-right-color: inherit;
left: -10px;
}
</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:11,
layers:toner
})
function onEachFeature(feat){
return console.log(feat.properties)
}
var bosBords = L.geoJson(bords,{onEachFeature:onEachFeature}).addTo(map);
bosBords.addData(bords,{onEachFeature:onEachFeature})
.setStyle(function(feat){
console.log(feat.properties.DISTRICT)
// console.log(feat.properties.DISTRICT);
if(feat.properties.DISTRICT === "01"){
return {fillColor:'green',
color:'pink',fillOpacity:.65}}
else if(feat.properties.DISTRICT === "02"){
return {fillColor:'blue',
color:'pink',fillOpacity:.65}}
else if(feat.properties.DISTRICT === "03"){
return {fillColor:'purple',
color:'pink',fillOpacity:.7}}
else if(feat.properties.DISTRICT === "04"){
return {fillColor:'#cab2d6',
color:'pink',fillOpacity:.7}}
else if(feat.properties.DISTRICT === "05"){
return {fillColor:'#ff7f00',
color:'pink',fillOpacity:.7}}
else if(feat.properties.DISTRICT === "06"){
return {fillColor:'#fdbf6f',
color:'pink',fillOpacity:.7}}
else if(feat.properties.DISTRICT === "07"){
return {fillColor:'#e31a1c',
color:'pink',fillOpacity:.7}}
else if(feat.properties.DISTRICT === "08"){
return {fillColor:'pink',
color:'pink',fillOpacity:.7}}
else if(feat.properties.DISTRICT === "09"){
return {fillColor:'#a6cee3',
color:'pink',fillOpacity:.7}}
else if(feat.properties.DISTRICT === "10"){
return {fillColor:'#ffff99',
color:'pink',fillOpacity:.7}}
else if(feat.properties.DISTRICT === "11"){
return {fillColor:'#b2df8a',
color:'pink',fillOpacity:.7}}
}
)
//Add labels layer
var labelStyle = {
color: 'pink',
opacity: 0
};
var labelMarkerOptions = {
opacity: 0,
fillOpacity: 0,
fillColor:'brown'
};
var labelLayer = L.geoJson(labs, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, labelMarkerOptions);
},
onEachFeature: function (feature, layer) {
layer.bindLabel(feature.properties.district, {noHide:true,direction:'right'});
}
});
labelLayer.eachLayer(function(l) {l.showLabel();});
map.addLayer(labelLayer);
layerControl.addOverlay(labelLayer, 'boslab');
}
</script>
</body>
</html>
var labs = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 11, "district": "11" }, "geometry": { "type": "Point", "coordinates": [ -122.441508569659661, 37.715893280886796 ] } },
{ "type": "Feature", "properties": { "id": 10, "district": "10" }, "geometry": { "type": "Point", "coordinates": [ -122.386067159913722, 37.729694750404228 ] } },
{ "type": "Feature", "properties": { "id": 9, "district": "9" }, "geometry": { "type": "Point", "coordinates": [ -122.41505429292809, 37.73770732675068 ] } },
{ "type": "Feature", "properties": { "id": 8, "district": "8" }, "geometry": { "type": "Point", "coordinates": [ -122.433347143859507, 37.751949765832116 ] } },
{ "type": "Feature", "properties": { "id": 7, "district": "7" }, "geometry": { "type": "Point", "coordinates": [ -122.462615705349748, 37.735259131529055 ] } },
{ "type": "Feature", "properties": { "id": 4, "district": "4" }, "geometry": { "type": "Point", "coordinates": [ -122.492728552267579, 37.74972456539102 ] } },
{ "type": "Feature", "properties": { "id": 1, "district": "1" }, "geometry": { "type": "Point", "coordinates": [ -122.491039981412385, 37.775087883364911 ] } },
{ "type": "Feature", "properties": { "id": 6, "district": "6" }, "geometry": { "type": "Point", "coordinates": [ -122.400420012183133, 37.779314257415535 ] } },
{ "type": "Feature", "properties": { "id": 3, "district": "3" }, "geometry": { "type": "Point", "coordinates": [ -122.4083000095074, 37.79555018371186 ] } },
{ "type": "Feature", "properties": { "id": 0, "district": "6" }, "geometry": { "type": "Point", "coordinates": [ -122.370870022217019, 37.822898537934122 ] } },
{ "type": "Feature", "properties": { "id": 2, "district": "2" }, "geometry": { "type": "Point", "coordinates": [ -122.449388566984069, 37.796217337248557 ] } },
{ "type": "Feature", "properties": { "id": 5, "district": "5" }, "geometry": { "type": "Point", "coordinates": [ -122.436442857094164, 37.77597766640227 ] } }
]
}