D3 Examples - RLT 3D in Mapbox GL JS

xxxxxxxxxx
 
<!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/v0.39.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        .marker {
            background-image: url('./icons/svgs/marker-15.svg');
            background-size: cover;
            width: 15px;
            height: 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
​
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwdGFzdGlrIiwiYSI6IjNPMkREV1kifQ.2KGPFZD0QaGfvYzXYotTXQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/maptastik/cj6my6c0x083o2qnsdv3bewpx',
    center: [-78.668133, 35.791295],
    zoom: 18.5,
    pitch: 45
});
​
map.on('load', function () {
  map.addLayer({
        'id': 'room-extrusion',
        'type': 'fill-extrusion',
        'source': {
            // Geojson Data source used in vector tiles, documented at
            // https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
            'type': 'geojson',
            'data': 'https://gist.githubusercontent.com/maptastik/747ef842b5e24237adcb69e49246a38e/raw/fab0d2f8baa530f31723283a5353e4c4e119a1e8/rlt_bldg.geojson'
        },
        'paint': {
            'fill-extrusion-color': {
                'property': 'color',
                'type': 'identity'
            },
            'fill-extrusion-height': {
                'property': 'height',
                'type': 'identity'
            },
            'fill-extrusion-base': 0,
​
            'fill-extrusion-opacity': 1
        }
    });
});
</script>
​
</body>
</html>
​
    