D3 Examples - leaflet.d3.js demo

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
    <title>Leaflet.D3.js demo</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
    <![endif]-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.6.4/leaflet.min.js"></script>
    <script src="leaflet.d3.js"></script>
​
    <style type='text/css'>
​
        #svg-streets path {
            fill:none;
            stroke: rgba(0,0,0,0.3);
        }
​
        #svg-streets path:hover {
            stroke: #0c0;
            cursor: pointer;
        }
​
        #svg-streets .highway-residential { stroke-width: 1px; }
        #svg-streets .highway-primary { stroke-width: 4px; }
        #svg-streets .highway-secondary { stroke-width: 3px; }
        #svg-streets .highway-tertiary { stroke-width: 2px; }
​
        #svg-buildings path {
            fill: rgba(0,0,0,0.3);
        }
​
        #svg-buildings path:hover {
            fill: #00c;
            cursor: pointer;
        }
​
        #svg-places path {
            fill: yellow;
        }
​
    </style>
​
    <script type='text/javascript'>
​
    window.onload = function() {
        var map = L.map('map',{
            maxBounds: [[46.6412301,23.4324747],[46.9201137,23.8047838]]
          }).fitBounds([[46.7412301, 23.53816],[46.76813, 23.59253]]);
​
        L.tileLayer('https://a.tile.stamen.com/toner/{z}/{x}/{y}.png').addTo(map);  
​
        d3.json("streets.geojson", function(collection) {
            var layer = new L.D3geoJSON(collection, {
                id: 'svg-streets',
                featureAttributes: {
                    'class': function(feature) {
                        return 'highway-' + feature.properties.highway;
                    }
                },
            }).addTo(map).on('click', function(e) {
                console.log(e.data.properties.name);
            });
        });
​
        d3.json("buildings.geojson", function(collection) {
​
            var layer = new L.D3geoJSON(collection, {
                id: 'svg-buildings',
            }).addTo(map).on('click', function(e) {
                console.log(e);
            });
        });
​
        // d3.json("../buildings/temp-data/pins.json", function(collection) {
        //  var layer = new L.D3geoJSON(collection, {
        //      id: 'svg-places',
        //  }).addTo(map).on('click', function(e) {
        //      console.log(e);
        //  });
        // });
    };
​
    </script>
</head>
<body>
​
    <div id='map' style='position:absolute;top:0;left:0;right:0;bottom:0;'></div>
​
</body>
</html>
    