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 jscastro76

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/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 = 'PASTE HERE YOUR TOKEN';
var map = new mapboxgl.Map({
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-74.0066, 40.7135],
  zoom: 11,
  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.on('load', function() {
  // Insert the layer beneath any symbol layer.
  var layers = map.getStyle().layers;

  var labelLayerId;
  for (var i = 0; i < layers.length; i++) {
    if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
      labelLayerId = layers[i].id;
      break;
    }

    if (layers[i].id == 'building') {
      console.log(layers[i]);
      layers[i].minzoom = 5;
      map.setPaintProperty('building', 'fill-opacity', '["interpolate", ["linear"], ["zoom"], 10, 0, 11, 1]');
            console.log(layers[i]);

    }
  }

  var building = map.getLayer("building");
  console.log(building.paint);
  //building.minzoom = 5;
  //console.log(building);
  //map.setLayerZoomRange("building", 5, 22);

  map.addLayer({
      'id': '3d-buildings',
      'source': 'composite',
      'source-layer': 'building',
      //'filter': ['==', 'extrude', 'true'],
      'type': 'fill-extrusion',
      'minzoom': 10,
      'paint': {
        'fill-extrusion-color': '#aaa',

        // use an 'interpolate' expression to add a smooth transition effect to the
        // buildings as the user zooms in
        'fill-extrusion-height': [
          'interpolate',
          ['linear'],
          ['zoom'],
          10,
          0,
          10.05,
          ['get', 'height']
        ],
        'fill-extrusion-base': [
          'interpolate',
          ['linear'],
          ['zoom'],
          10,
          0,
          10.05,
          ['get', 'min_height']
        ],
        'fill-extrusion-opacity': 0.6
      }
    },
    labelLayerId
  );
});