Mapbox spec: [fill-extrusion](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion) ```tsx import { FillExtrusionLayer } from '@rnmapbox/maps'; FillExtrusionLayer ``` FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map. ## props ### id ```tsx string ``` _required_ A string that uniquely identifies the layer in the style to which it is added. ### existing ```tsx boolean ``` The id refers to an existing layer in the style. Does not create a new layer. ### sourceID ```tsx string ``` The source from which to obtain the data to style. If the source has not yet been added to the current style, the behavior is undefined. Inferred from parent source only if the layer is a direct child to it. _defaults to:_ `Mapbox.StyleSource.DefaultSourceID` ### sourceLayerID ```tsx string ``` Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style. ### aboveLayerID ```tsx string ``` Inserts a layer above aboveLayerID. ### belowLayerID ```tsx string ``` Inserts a layer below belowLayerID ### layerIndex ```tsx number ``` Inserts a layer at a specified index ### filter ```tsx FilterExpression ``` Filter only the features in the source layer that satisfy a condition that you define ### minZoomLevel ```tsx number ``` _required_ The minimum zoom level at which the layer gets parsed and appears. ### maxZoomLevel ```tsx number ``` _required_ The maximum zoom level at which the layer gets parsed and appears. ### style ```tsx FillExtrusionLayerStyleProps ``` Customizable style attributes ## styles * visibility
* fillExtrusionEdgeRadius
* fillExtrusionOpacity
* fillExtrusionColor
* fillExtrusionTranslate
* fillExtrusionTranslateAnchor
* fillExtrusionPattern
* fillExtrusionPatternCrossFade
* fillExtrusionHeight
* fillExtrusionBase
* fillExtrusionHeightAlignment
* fillExtrusionBaseAlignment
* fillExtrusionVerticalGradient
* fillExtrusionAmbientOcclusionIntensity
* fillExtrusionAmbientOcclusionRadius
* fillExtrusionAmbientOcclusionWallRadius
* fillExtrusionAmbientOcclusionGroundRadius
* fillExtrusionAmbientOcclusionGroundAttenuation
* fillExtrusionFloodLightColor
* fillExtrusionFloodLightIntensity
* fillExtrusionFloodLightWallRadius
* fillExtrusionFloodLightGroundRadius
* fillExtrusionFloodLightGroundAttenuation
* fillExtrusionVerticalScale
* fillExtrusionRoundedRoof
* fillExtrusionCutoffFadeRange
* fillExtrusionEmissiveStrength
* fillExtrusionLineWidth
* fillExtrusionCastShadows
___ ### visibility Name: `visibility` Mapbox spec: [visibility](https://docs.mapbox.com/style-spec/reference/layers/#layout-fill-extrusion-visibility) #### Description Whether this layer is displayed. #### Type `enum` #### Default Value `visible` #### Supported Values **visible** - The layer is shown.
**none** - The layer is not shown.
#### Expression Parameters: `` ___ ### fillExtrusionEdgeRadius Name: `fillExtrusionEdgeRadius` Mapbox spec: [fill-extrusion-edge-radius](https://docs.mapbox.com/style-spec/reference/layers/#layout-fill-extrusion-fill-extrusion-edge-radius) #### Description Radius of a fill extrusion edge in meters. If not zero, rounds extrusion edges for a smoother appearance. #### Type `number` #### Default Value `0` #### Minimum `0` #### Maximum `1` #### Expression Parameters: `` ___ ### fillExtrusionOpacity Name: `fillExtrusionOpacity` Mapbox spec: [fill-extrusion-opacity](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-opacity) #### Description The opacity of the entire fill extrusion layer. This is rendered on a perLayer, not perFeature, basis, and dataDriven styling is not available. #### Type `number` #### Default Value `1` #### Minimum `0` #### Maximum `1` #### Expression Parameters: `zoom` ___ ### fillExtrusionOpacityTransition Name: `fillExtrusionOpacityTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionOpacity property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionColor Name: `fillExtrusionColor` Mapbox spec: [fill-extrusion-color](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-color) #### Description The base color of the extruded fill. The extrusion's surfaces will be shaded differently based on this color in combination with the root `light` settings. If this color is specified as `rgba` with an alpha component, the alpha component will be ignored; use `fillExtrusionOpacity` to set layer opacity. #### Type `color` #### Default Value `#000000` #### Disabled By `fillExtrusionPattern` #### Expression Parameters: `zoom, feature, feature-state, measure-light` ___ ### fillExtrusionColorTransition Name: `fillExtrusionColorTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionColor property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionTranslate Name: `fillExtrusionTranslate` Mapbox spec: [fill-extrusion-translate](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-translate) #### Description The geometry's offset. Values are [x, y] where negatives indicate left and up (on the flat plane), respectively. #### Type `array` #### Default Value `[0,0]` #### Units `pixels` #### Expression Parameters: `zoom` ___ ### fillExtrusionTranslateTransition Name: `fillExtrusionTranslateTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionTranslate property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionTranslateAnchor Name: `fillExtrusionTranslateAnchor` Mapbox spec: [fill-extrusion-translate-anchor](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-translate-anchor) #### Description Controls the frame of reference for `fillExtrusionTranslate`. #### Type `enum` #### Default Value `map` #### Supported Values **map** - The fill extrusion is translated relative to the map.
**viewport** - The fill extrusion is translated relative to the viewport.
#### Requires `fillExtrusionTranslate` #### Expression Parameters: `zoom` ___ ### fillExtrusionPattern Name: `fillExtrusionPattern` Mapbox spec: [fill-extrusion-pattern](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-pattern) #### Description Name of image in sprite to use for drawing images on extruded fills. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoomDependent expressions will be evaluated only at integer zoom levels. #### Type `resolvedImage` #### Expression Parameters: `zoom, feature` ___ ### fillExtrusionPatternCrossFade Name: `fillExtrusionPatternCrossFade` Mapbox spec: [fill-extrusion-pattern-cross-fade](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-pattern-cross-fade) #### Description Controls the transition progress between the image variants of fillExtrusionPattern. Zero means the first variant is used, one is the second, and in between they are blended together. Both images should be the same size and have the same type (either raster or vector). #### Type `number` #### Default Value `0` #### Minimum `0` #### Maximum `1` #### Requires `linePattern` #### Expression Parameters: `zoom, measure-light` ___ ### fillExtrusionHeight Name: `fillExtrusionHeight` Mapbox spec: [fill-extrusion-height](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-height) #### Description The height with which to extrude this layer. #### Type `number` #### Default Value `0` #### Units `meters` #### Minimum `0` #### Expression Parameters: `zoom, feature, feature-state` ___ ### fillExtrusionHeightTransition Name: `fillExtrusionHeightTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionHeight property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionBase Name: `fillExtrusionBase` Mapbox spec: [fill-extrusion-base](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-base) #### Description The height with which to extrude the base of this layer. Must be less than or equal to `fillExtrusionHeight`. #### Type `number` #### Default Value `0` #### Units `meters` #### Minimum `0` #### Requires `fillExtrusionHeight` #### Expression Parameters: `zoom, feature, feature-state` ___ ### fillExtrusionBaseTransition Name: `fillExtrusionBaseTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionBase property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionHeightAlignment Name: `fillExtrusionHeightAlignment` Mapbox spec: [fill-extrusion-height-alignment](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-height-alignment) #### Description Controls the behavior of fill extrusion height over terrain #### Type `enum` #### Default Value `flat` #### Supported Values **terrain** - The fill extrusion height follows terrain slope.
**flat** - The fill extrusion height is flat over terrain.
#### Requires `fillExtrusionHeight` ___ ### fillExtrusionBaseAlignment Name: `fillExtrusionBaseAlignment` Mapbox spec: [fill-extrusion-base-alignment](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-base-alignment) #### Description Controls the behavior of fill extrusion base over terrain #### Type `enum` #### Default Value `terrain` #### Supported Values **terrain** - The fill extrusion base follows terrain slope.
**flat** - The fill extrusion base is flat over terrain.
#### Requires `fillExtrusionBase` ___ ### fillExtrusionVerticalGradient Name: `fillExtrusionVerticalGradient` Mapbox spec: [fill-extrusion-vertical-gradient](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-vertical-gradient) #### Description Whether to apply a vertical gradient to the sides of a fillExtrusion layer. If true, sides will be shaded slightly darker farther down. #### Type `boolean` #### Default Value `true` #### Expression Parameters: `zoom` ___ ### fillExtrusionAmbientOcclusionIntensity Name: `fillExtrusionAmbientOcclusionIntensity` Mapbox spec: [fill-extrusion-ambient-occlusion-intensity](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-ambient-occlusion-intensity) #### Description Controls the intensity of shading near ground and concave angles between walls. Default value 0.0 disables ambient occlusion and values around 0.3 provide the most plausible results for buildings. #### Type `number` #### Default Value `0` #### Minimum `0` #### Maximum `1` #### Expression Parameters: `zoom` ___ ### fillExtrusionAmbientOcclusionIntensityTransition Name: `fillExtrusionAmbientOcclusionIntensityTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionAmbientOcclusionIntensity property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionAmbientOcclusionRadius Name: `fillExtrusionAmbientOcclusionRadius` Mapbox spec: [fill-extrusion-ambient-occlusion-radius](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-ambient-occlusion-radius) #### Description Shades area near ground and concave angles between walls where the radius defines only vertical impact. Default value 3.0 corresponds to height of one floor and brings the most plausible results for buildings. This property works only with legacy light. When 3D lights are enabled `fillExtrusionAmbientOcclusionWallRadius` and `fillExtrusionAmbientOcclusionGroundRadius` are used instead. #### Type `number` #### Default Value `3` #### Minimum `0` #### Requires `fillExtrusionEdgeRadius` #### Expression Parameters: `zoom` ___ ### fillExtrusionAmbientOcclusionRadiusTransition Name: `fillExtrusionAmbientOcclusionRadiusTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionAmbientOcclusionRadius property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionAmbientOcclusionWallRadius Name: `fillExtrusionAmbientOcclusionWallRadius` Mapbox spec: [fill-extrusion-ambient-occlusion-wall-radius](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-ambient-occlusion-wall-radius) #### Description Shades area near ground and concave angles between walls where the radius defines only vertical impact. Default value 3.0 corresponds to height of one floor and brings the most plausible results for buildings. #### Type `number` #### Default Value `3` #### Minimum `0` #### Requires `lights, fillExtrusionEdgeRadius` #### Expression Parameters: `zoom` ___ ### fillExtrusionAmbientOcclusionWallRadiusTransition Name: `fillExtrusionAmbientOcclusionWallRadiusTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionAmbientOcclusionWallRadius property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionAmbientOcclusionGroundRadius Name: `fillExtrusionAmbientOcclusionGroundRadius` Mapbox spec: [fill-extrusion-ambient-occlusion-ground-radius](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-ambient-occlusion-ground-radius) #### Description The extent of the ambient occlusion effect on the ground beneath the extruded buildings in meters. #### Type `number` #### Default Value `3` #### Minimum `0` #### Requires `lights` #### Expression Parameters: `zoom` ___ ### fillExtrusionAmbientOcclusionGroundRadiusTransition Name: `fillExtrusionAmbientOcclusionGroundRadiusTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionAmbientOcclusionGroundRadius property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionAmbientOcclusionGroundAttenuation Name: `fillExtrusionAmbientOcclusionGroundAttenuation` Mapbox spec: [fill-extrusion-ambient-occlusion-ground-attenuation](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-ambient-occlusion-ground-attenuation) #### Description Provides a control to futher fineTune the look of the ambient occlusion on the ground beneath the extruded buildings. Lower values give the effect a more solid look while higher values make it smoother. #### Type `number` #### Default Value `0.69` #### Minimum `0` #### Maximum `1` #### Requires `lights` #### Expression Parameters: `zoom` ___ ### fillExtrusionAmbientOcclusionGroundAttenuationTransition Name: `fillExtrusionAmbientOcclusionGroundAttenuationTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionAmbientOcclusionGroundAttenuation property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionFloodLightColor Name: `fillExtrusionFloodLightColor` Mapbox spec: [fill-extrusion-flood-light-color](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-flood-light-color) #### Description The color of the flood light effect on the walls of the extruded buildings. #### Type `color` #### Default Value `#ffffff` #### Requires `lights` #### Expression Parameters: `zoom, measure-light` ___ ### fillExtrusionFloodLightColorTransition Name: `fillExtrusionFloodLightColorTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionFloodLightColor property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionFloodLightIntensity Name: `fillExtrusionFloodLightIntensity` Mapbox spec: [fill-extrusion-flood-light-intensity](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-flood-light-intensity) #### Description The intensity of the flood light color. #### Type `number` #### Default Value `0` #### Minimum `0` #### Maximum `1` #### Requires `lights` #### Expression Parameters: `zoom, measure-light` ___ ### fillExtrusionFloodLightIntensityTransition Name: `fillExtrusionFloodLightIntensityTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionFloodLightIntensity property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionFloodLightWallRadius Name: `fillExtrusionFloodLightWallRadius` Mapbox spec: [fill-extrusion-flood-light-wall-radius](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-flood-light-wall-radius) #### Description The extent of the flood light effect on the walls of the extruded buildings in meters. #### Type `number` #### Default Value `0` #### Units `meters` #### Minimum `0` #### Requires `lights` #### Expression Parameters: `feature, feature-state` ___ ### fillExtrusionFloodLightWallRadiusTransition Name: `fillExtrusionFloodLightWallRadiusTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionFloodLightWallRadius property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionFloodLightGroundRadius Name: `fillExtrusionFloodLightGroundRadius` Mapbox spec: [fill-extrusion-flood-light-ground-radius](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-flood-light-ground-radius) #### Description The extent of the flood light effect on the ground beneath the extruded buildings in meters. Note: this experimental property is evaluated once per tile, during tile initialization. Changing the property value could trigger tile reload. The `featureState` styling is deprecated and will get removed soon. #### Type `number` #### Default Value `0` #### Units `meters` #### Requires `lights` #### Expression Parameters: `feature, feature-state` ___ ### fillExtrusionFloodLightGroundRadiusTransition Name: `fillExtrusionFloodLightGroundRadiusTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionFloodLightGroundRadius property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionFloodLightGroundAttenuation Name: `fillExtrusionFloodLightGroundAttenuation` Mapbox spec: [fill-extrusion-flood-light-ground-attenuation](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-flood-light-ground-attenuation) #### Description Provides a control to futher fineTune the look of the flood light on the ground beneath the extruded buildings. Lower values give the effect a more solid look while higher values make it smoother. #### Type `number` #### Default Value `0.69` #### Minimum `0` #### Maximum `1` #### Requires `lights` #### Expression Parameters: `zoom` ___ ### fillExtrusionFloodLightGroundAttenuationTransition Name: `fillExtrusionFloodLightGroundAttenuationTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionFloodLightGroundAttenuation property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionVerticalScale Name: `fillExtrusionVerticalScale` Mapbox spec: [fill-extrusion-vertical-scale](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-vertical-scale) #### Description A global multiplier that can be used to scale base, height, AO, and flood light of the fill extrusions. #### Type `number` #### Default Value `1` #### Minimum `0` #### Expression Parameters: `zoom` ___ ### fillExtrusionVerticalScaleTransition Name: `fillExtrusionVerticalScaleTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionVerticalScale property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionRoundedRoof Name: `fillExtrusionRoundedRoof` Mapbox spec: [fill-extrusion-rounded-roof](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-rounded-roof) #### Description Indicates whether top edges should be rounded when fillExtrusionEdgeRadius has a value greater than 0. If false, rounded edges are only applied to the sides. Default is true. #### Type `boolean` #### Default Value `true` #### Requires `fillExtrusionEdgeRadius` #### Expression Parameters: `zoom` ___ ### fillExtrusionCutoffFadeRange Name: `fillExtrusionCutoffFadeRange` Mapbox spec: [fill-extrusion-cutoff-fade-range](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-cutoff-fade-range) #### Description This parameter defines the range for the fadeOut effect before an automatic content cutoff on pitched map views. Fade out is implemented by scaling down and removing buildings in the fade range in a staggered fashion. Opacity is not changed. The fade range is expressed in relation to the height of the map view. A value of 1.0 indicates that the content is faded to the same extent as the map's height in pixels, while a value close to zero represents a sharp cutoff. When the value is set to 0.0, the cutoff is completely disabled. Note: The property has no effect on the map if terrain is enabled. #### Type `number` #### Default Value `0` #### Minimum `0` #### Maximum `1` #### Expression Parameters: `` ___ ### fillExtrusionEmissiveStrength Name: `fillExtrusionEmissiveStrength` Mapbox spec: [fill-extrusion-emissive-strength](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-emissive-strength) #### Description Controls the intensity of light emitted on the source features. #### Type `number` #### Default Value `0` #### Units `intensity` #### Minimum `0` #### Requires `lights` #### Expression Parameters: `zoom, measure-light, feature-state` ___ ### fillExtrusionEmissiveStrengthTransition Name: `fillExtrusionEmissiveStrengthTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionEmissiveStrength property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionLineWidth Name: `fillExtrusionLineWidth` Mapbox spec: [fill-extrusion-line-width](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-line-width) #### Description If a nonZero value is provided, it sets the fillExtrusion layer into wall rendering mode. The value is used to render the feature with the given width over the outlines of the geometry. Note: This property is experimental and some other fillExtrusion properties might not be supported with nonZero line width. #### Type `number` #### Default Value `0` #### Units `meters` #### Minimum `0` #### Expression Parameters: `zoom, feature, feature-state, measure-light` ___ ### fillExtrusionLineWidthTransition Name: `fillExtrusionLineWidthTransition` #### Description The transition affecting any changes to this layer’s fillExtrusionLineWidth property. #### Type `{ duration, delay }` #### Units `milliseconds` #### Default Value `{duration: 300, delay: 0}` ___ ### fillExtrusionCastShadows Name: `fillExtrusionCastShadows` Mapbox spec: [fill-extrusion-cast-shadows](https://docs.mapbox.com/style-spec/reference/layers/#paint-fill-extrusion-fill-extrusion-cast-shadows) #### Description Enable/Disable shadow casting for this layer #### Type `boolean` #### Default Value `true`