D3 Examples - BOS label geojson

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <title>Leaflet w/ geojson Polygons & addStyle()</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
       <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <!--[if lte IE 8]><link rel="stylesheet" href="https://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->
​
        <script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
<script type="text/javascript" src="/mpmckenna8/9959871/example/sfbosleaf.geojson" ></script>
<script src="https://leaflet.github.io/leaflet.label/leaflet.label.js"></script>
<link rel="stylesheet" href="https://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>
​
    