3D Buildings

maplibre-react-native ships a FillExtrusionLayer component, so 3D buildings work. Point it at the building source layer of any style. The Street style ships this already; the other six styles draw buildings flat.

Filter on extrude, the boolean marking the footprints meant to stand up, and take the base from min_height.

3D terrain is not available. The library wraps MapLibre Native, where setTerrain() raises an UnsupportedError. See 3D Buildings and Terrain.

import { MapView, Camera, FillExtrusionLayer } from '@maplibre/maplibre-react-native';

<MapView style={{ flex: 1 }} mapStyle="https://styles.maptoolkit.org/summer.json">
  <Camera
    centerCoordinate={[-0.12025, 51.50222]}
    zoomLevel={15.5}
    pitch={60}
    heading={45}
  />
  <FillExtrusionLayer
    id="buildings-3d"
    sourceID="mtk"
    sourceLayerID="building"
    minZoomLevel={14}
    filter={['==', ['get', 'extrude'], true]}
    style={{
      fillExtrusionColor: '#cfd8dc',
      fillExtrusionHeight: ['get', 'height'],
      fillExtrusionBase: ['get', 'min_height'],
      fillExtrusionOpacity: 0.9
    }}
  />
</MapView>

The camera needs a pitch, or the extrusions are only ever seen from directly above.