TOP10NL 3D in OSMBuildings by emacgillavry

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>TOP10NL 3D</title>
        <meta name="author" content="Edward Mac Gillavry">
        <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div id="map-canvas"></div>
        <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
        <script src="https://cdn.rawgit.com/kekscom/osmbuildings/master/dist/OSMBuildings-Leaflet.js"></script>
        <script src="buildings.js"></script>
        <script src="main.js"></script>
    </body>
</html>

main.css

body {
    font: 14px/22px 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #57574D;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

#map-canvas, html, body {
    width: 100%; padding: 0; margin: 0;
}

#map-canvas {
    height: 450px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAACVBMVEUAAADl5eX////EwbxGAAAAAXRSTlMAQObYZgAAABFJREFUeAFjYESCKACdT38ZAAWhAAxcPQc7AAAAAElFTkSuQmCC) repeat scroll 0 0 #f9f9f9;
    cursor: move;
    -webkit-tap-highlight-color: transparent;
}

.leaflet-bar {
    box-shadow: none;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4);
    padding: 2px;
}

.leaflet-bar a, .leaflet-bar a:hover {
    background: none repeat scroll 0 0 rgba(160, 195, 63, 1);
    border-bottom: 1px solid #ccc;
    color: #fff;
    display: block;
    height: 22px;
    line-height: 19px;
    text-align: center;
    text-decoration: none;
    width: 22px;
    margin: 1px;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
}
.leaflet-bar a:hover {
    background: none repeat scroll 0 0 rgba(145, 177, 55, 1);
}

.leaflet-control-attribution {
    background-color: rgba(255,255,255,0.6);
    font-size: smaller;
    color: #666;
    padding: 0 2px;
    line-height: 22px;
}

.leaflet-control-attribution a {
    text-decoration: underline;
}

main.js

var Legend = {
    gemeentehuis: { wall: 'rgba(200,155,54,0.8)', roof: 'rgba(236,173,42,0.7)'},
    huizenblok: { wall: 'rgba(232,184,174,0.8)', roof: 'rgba(232,184,174,0.7)'},
    kasteel: {wall: 'rgba(153,51,0,0.8)', roof: 'rgba(153,51,0,0.7)'},
    overig: {wall: 'rgba(235,207,190,1.0)', roof: 'rgba(235,207,190,1.0)'},
    politiebureau: { wall: 'rgba(200,155,54,0.8)', roof: 'rgba(236,173,42,0.7)'},
    postkantoor: {wall: 'rgba(200,155,54,0.8)', roof: 'rgba(236,173,42,0.7)'},
    ruïne: { wall: 'rgba(153,51,0,0.8)', roof: 'rgba(153,51,0,0.7)'},
    sporthal: { wall: 'rgba(137,159,165,0.8)', roof: 'rgba(137,159,165,0.7)'},
    toren: { wall: 'rgba(153,51,0,0.8)', roof: 'rgba(153,51,0,0.7)'},
    zwembad: { wall: 'rgba(137,159,165,0.8)', roof: 'rgba(137,159,165,0.7)'}
}

var map = new L.Map('map-canvas', {
    zoomControl: true,
    center: [50.8639,5.8340],
    zoom: 15
});

map.attributionControl.setPrefix('');

new L.tileLayer('http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png', {
    attribution: 'Basemap design by <a href="http://www.stamen.com/">Stamen</a>. Tiles hosted by <a href="http://www.geoiq.com/">GeoIQ</a>. Map data: <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors and <a href="http://www.naturalearthdata.org/">Natural Earth Data</a>',
    subdomains: '0123',
    minZoom: 2,
    maxZoom: 18
}).addTo(map);

map.attributionControl.addAttribution(' building data: TOP10NL 3D <a href="http://www.kadaster.nl/">Kadaster</a>');

var osmb = new OSMBuildings(map)
    .each(function(item) {
        var prop = item.properties;
        if (Legend.hasOwnProperty(prop.building_type)) {
            prop.wallColor = Legend[ prop.building_type ]['wall'];
            prop.roofColor = Legend[ prop.building_type ]['roof'];
        } else {
            prop.wallColor = 'rgba(235,207,190,1.0)';
            prop.roofColor = 'rgba(235,207,190,1.0)';
        }
    })
    .set(BldgJSON);