FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.
Mapbox Style Specification
Props
A unique identifier for the layer.
If true, references an existing layer in the style.
sourceID
string
default:"Mapbox.StyleSource.DefaultSourceID"
The source from which to obtain data.
Identifier of the layer within the source.
Inserts the layer above the specified layer ID.
Inserts the layer below the specified layer ID.
Minimum zoom level for layer visibility.
Maximum zoom level for layer visibility.
Filters features based on a condition.
style
FillExtrusionLayerStyleProps
Customizable style attributes.
Style Properties
style.visibility
'visible' | 'none'
default:"visible"
Controls layer visibility.
style.fillExtrusionOpacity
The opacity of the entire fill extrusion layer. Range: 0-1.
The base color of the extruded fill. Disabled by: fillExtrusionPattern
style.fillExtrusionHeight
The height with which to extrude this layer in meters. Minimum: 0
The height with which to extrude the base of this layer. Must be less than or equal to fillExtrusionHeight. Minimum: 0
style.fillExtrusionPattern
Name of image in sprite to use for drawing images on extruded fills.
Example
import { MapView, ShapeSource, FillExtrusionLayer } from '@rnmapbox/maps';
const buildings = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[...]],
},
properties: { height: 100 },
},
],
};
function Map() {
return (
<MapView pitch={45}>
<ShapeSource id="buildings" shape={buildings}>
<FillExtrusionLayer
id="building-extrusion"
minZoomLevel={15}
maxZoomLevel={22}
style={{
fillExtrusionColor: '#aaa',
fillExtrusionHeight: ['get', 'height'],
fillExtrusionBase: 0,
fillExtrusionOpacity: 0.8,
}}
/>
</ShapeSource>
</MapView>
);
}