Extrude polygons for 3D indoor mapping

Create a 3D indoor map with the fill-extrusion-height paint property. See the example: https://docs.mapbox.com//mapbox-gl-js/example/3d-extrusion-floorplan/

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css">

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1Ijoib2Zla2siLCJhIjoiY2xnd2VtbmNiMGRhdjNkcGxqeWd4NjY1MSJ9.fQNCOYbsgE63OuBBI29L9w';
    const map = new mapboxgl.Map({
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [-87.61694, 41.86625],
        zoom: 15.99,
        pitch: 40,
        bearing: 20,
        antialias: true
    });

    map.on('load', () => {
        map.addSource('floorplan', {
            'type': 'geojson',
            /*
             * Each feature in this GeoJSON file contains values for
             * `properties.height`, `properties.base_height`,
             * and `properties.color`.
             * In `addLayer` you will use expressions to set the new
             * layer's paint properties based on these values.
             */
            'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
        });
        map.addLayer({
            'id': 'room-extrusion',
            'type': 'fill-extrusion',
            'source': 'floorplan',
            'paint': {
                // Get the `fill-extrusion-color` from the source `color` property.
                'fill-extrusion-color': ['get', 'color'],

                // Get `fill-extrusion-height` from the source `height` property.
                'fill-extrusion-height': ['get', 'height'],

                // Get `fill-extrusion-base` from the source `base_height` property.
                'fill-extrusion-base': ['get', 'base_height'],

                // Make extrusions slightly opaque to see through indoor walls.
                'fill-extrusion-opacity': 0.5
            }
        });
        map.on('click', 'room-extrusion', (e) => {
        new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML(e.features[0].properties.name)
        .addTo(map);
        });
    });