3D Buildings

<Map
  style={streetsStyle}
  class={mapClasses}
  standardControls
  center={[-74.0066, 40.7135]}
  zoom={15.5}
  pitch={45}
  bearing={-17.6}
  on:styledata={({ detail: { map } }) => {
    // Hide the built-in extrusion layer since we're doing our own.
    // Doing this in the styledata event handler ensures that we
    // hide it as soon as possible. If we hide in the `load` event then
    // the built-in layer will be visible for a short time before we hide it.
    map.setLayoutProperty('building-3d', 'visibility', 'none');
  }}
>
  <!-- The source and sourceLayer are specific to the map style. You
  will want to look into the style JSON data for your style to see
  the appropriate values. -->
  <FillExtrusionLayer
    source="maptiler_planet"
    sourceLayer="building"
    beforeLayerType={(l) => l.type === 'symbol' && !!l.paint?.['text-color']}
    minzoom={14}
    paint={{
      // Show lower buildings in green, higher in red.
      'fill-extrusion-color': [
        'interpolate',
        ['linear'],
        ['get', 'render_height'],
        0,
        '#0a0',
        70,
        '#a00',
      ],

      // use an 'interpolate' expression to add a smooth transition effect to the
      // buildings as the user zooms in
      'fill-extrusion-height': [
        'interpolate',
        ['linear'],
        ['zoom'],
        14,
        0,
        14.05,
        ['get', 'render_height'],
      ],
      'fill-extrusion-base': [
        'interpolate',
        ['linear'],
        ['zoom'],
        14,
        0,
        14.05,
        ['get', 'render_min_height'],
      ],
      'fill-extrusion-opacity': 0.6,
    }}
  />
</Map>