3D Buildings

flutter-maplibre-gl exposes the fill extrusion layer, so 3D buildings work. Add it on 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 plugin wraps MapLibre Native, where setTerrain() raises an UnsupportedError. See 3D Buildings and Terrain.

await controller.addFillExtrusionLayer(
  'mtk',
  'buildings-3d',
  const FillExtrusionLayerProperties(
    fillExtrusionColor: '#cfd8dc',
    fillExtrusionHeight: ['get', 'height'],
    fillExtrusionBase: ['get', 'min_height'],
    fillExtrusionOpacity: 0.9,
  ),
  sourceLayer: 'building',
  minzoom: 14,
  filter: ['==', ['get', 'extrude'], true],
);

Tilt the camera, or the extrusions are only ever seen from directly above:

await controller.animateCamera(
  CameraUpdate.newCameraPosition(
    const CameraPosition(
      target: LatLng(51.50222, -0.12025),
      zoom: 15.5,
      tilt: 60,
    ),
  ),
);