Display buildings in 3D

Use extrusions to display buildings' height in 3D. See the example: https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/

by cs09g

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.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.eyJ1IjoiY3MwOWciLCJhIjoiY2s0N3Uxemp5MGVzcjNrcGE3bG1uaWs1MCJ9.3-rt7AqzSgxkKKOWR3TEFQ";
var map = new mapboxgl.Map({
  style: "mapbox://styles/mapbox/light-v10",
  center: [-74.0066, 40.7135],
  zoom: 15.5,
  pitch: 45,
  bearing: -17.6,
  container: "map",
  antialias: true
});

// The 'building' layer in the mapbox-streets vector source contains building-height
// data from OpenStreetMap.
map.once("idle", function() {
  // Insert the layer beneath any symbol layer.
  var layers = map.getStyle().layers;

  /* for (var i = 1, len = layers.length; i < len; i++) {
    if (layers[i].type === "fill" || layers[i].type === "line") {
      map.addLayer(
        {
          id: "3d-" + layers[i].id,
          source: "composite",
          "source-layer": layers[i].id,
          "type": "fill-extrusion",
          "minzoom": 0,
          "paint": {
            "fill-extrusion-color": layers[i].paint["fill-color"] || layers[i].paint["line-color"],
            "fill-extrusion-height":  [
              "interpolate", ["linear"], ["zoom"],
              15, 0,
              18.0, 30.0
            ],
            "fill-extrusion-base": [
              "interpolate", ["linear"], ["zoom"],
              15, 0,
              18.0, ["get", "min_height"]
            ],
            "fill-extrusion-opacity": 0.8
          }
        }
      );
    } else if (layers[i].type === "background") {
      map.addLayer(
        {
          id: "3d-" + layers[i].id,
          "source-layer": layers[i].id,
          "type": "fill-extrusion",
          "minzoom": 0,
          "paint": {
            "fill-extrusion-color": layers[i].paint["background-color"],
            "fill-extrusion-height":  [
              "interpolate", ["linear"], ["zoom"],
              15, 0,
              18.0, 30.0
            ],
            "fill-extrusion-base": [
              "interpolate", ["linear"], ["zoom"],
              15, 0,
              18.0, ["get", "min_height"]
           ...