Metropolitan Map

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

by Grzegorz Matyszewski

HTML

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

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

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.marker {
  background: white;
  border-radius: 20px;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  max-width: 200px;
  line-height: 1.1;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.marker::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -6px;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: white transparent transparent transparent;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibWlrb2xhai1odW5jd290IiwiYSI6ImNram1wNWZodDZlOHcyc2xnYmF0ODlpeXcifQ.svOUXdAo7D73Wloj7laAUA';
    const map = new mapboxgl.Map({
        style: 'mapbox://styles/mikolaj-huncwot/clbm5zdl5000j15par634oi2p',
        center: [21.01224985540136, 52.24244570887588],
        zoom: 16.1,
        pitch: 50,
        bearing: -140,
        container: 'map',
        antialias: true
    });

    map.on('style.load', () => {
        // Insert the layer beneath any symbol layer.
        const layers = map.getStyle().layers;
        const labelLayerId = layers.find(
            (layer) => layer.type === 'symbol' && layer.layout['text-field']
        ).id;

        // The 'building' layer in the Mapbox Streets
        // vector tileset contains building height data
        // from OpenStreetMap.
        map.addLayer(
            {
                'id': 'add-3d-buildings',
                'source': 'composite',
                'source-layer': 'building',
                'filter': ['==', 'extrude', 'true'],
                'type': 'fill-extrusion',
                'minzoom': 15,
                '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'],
                        15,
                        0,
                        15.05,
                        ['get', 'height']
                    ],
                    'fill-extrusion-base': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        15,
                        0,
                        15.05,
                        ['get', 'min_height']
                    ],
                 ...