3dbuilding.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:20%; width:100%; }
        #info { position:absolute; top:80%; height:20%; width: 100%; outline: 1px solid black; background: white; overflow: auto;}
    </style>
</head>
<body>

<div id='map'></div>
<div id='info'></div>
<script>
//mapboxgl.accessToken = 'your_key_here';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'https://saturnus.geodan.nl/mapbox-viewer/styles/freetilehosting/positron.json',
    zoom: 16,
    center: [4.913, 52.342],
    pitch: 60,
    maxPitch: 60
});

map.on('load', function () {

    map.addLayer({
      "id": "building3D",
      "type": "fill-extrusion",
      "source": {
        type: 'vector',
        tiles:["https://research1.geodan.nl/anneb.bag13_lod1213_2d_levering/{z}/{x}/{y}.pbf"],
        bounds: [3.25524871110589,50.7347266517351,7.24079584680245,53.5258520631408],
        minzoom: 13,
        maxzoom: 18
      },
      "source-layer": "anneb.bag13_lod1213_2d_levering",
      "minzoom": 13,
      "maxzoom": 24,
      "paint": {
        "fill-extrusion-color": ["case",
        ["<",["get","bouwjaar"],1001],"black",
        ["<",["get","bouwjaar"],1700],"#7f0000",
        ["<",["get","bouwjaar"],1800],"#b30000",
        ["<",["get","bouwjaar"],1900],"#d7301f",
        ["<",["get","bouwjaar"],1930],"#ef6548",
        ["<",["get","bouwjaar"],1960],"#fc8d59",
        ["<",["get","bouwjaar"],1975],"#fdbb84",
        ["<",["get","bouwjaar"],1990],"#fdd49e",
        ["<",["get","bouwjaar"],2000],"#fee8c8",
        ["<=",["get","bouwjaar"],2025],"#fff7ec",
        "#fff7ec"],
        "fill-extrusion-height": ["-",["get","dd_h_dak_max"],["get","h_maaiveld"]],
        "fill-extrusion-base": 0,
        "fill-extrusion-opacity": 0.95
      }
    });

    map.on('mousemove', function (e) {
      var features = map.queryRenderedFeatures(e.point).filter((feature)=>feature.layer.id === 'building3D');
      let table = features.map(feature=>`<tr>
        <td><b>bag-id</b> ${feature.properties.bagpandid}</td>
        <td><b>ground level</b> ${feature.properties.h_maaiveld.toFixed(2)} m</td>
        <td><b>height</b> ${(feature.properties.dd_h_dak_max - feature.properties.h_maaiveld).toFixed(2)} m</td>
        <td><b>lod</b> ${feature.properties.lod}</td>
        <td><b>year</b> ${feature.properties.bouwjaar}</td>
        </tr>`).join("\n");
      document.getElementById('info').innerHTML = `<table>${table}</table>`;
    });
});
</script>

</body>
</html>