Mapbox spec: fill-extrusion
import { FillExtrusionLayer } from '@rnmapbox/maps';
FillExtrusionLayerFillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.
stringrequired A string that uniquely identifies the layer in the style to which it is added.
booleanThe id refers to an existing layer in the style. Does not create a new layer.
stringThe 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
stringIdentifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
stringInserts a layer above aboveLayerID.
stringInserts a layer below belowLayerID
numberInserts a layer at a specified index
FilterExpressionFilter only the features in the source layer that satisfy a condition that you define
numberrequired The minimum zoom level at which the layer gets parsed and appears.
numberrequired The maximum zoom level at which the layer gets parsed and appears.
FillExtrusionLayerStylePropsCustomizable style attributes
- 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
Name: visibility
Mapbox spec: visibility
Whether this layer is displayed.
enum
visible
visible - The layer is shown.
none - The layer is not shown.
Parameters: ``
Name: fillExtrusionEdgeRadius
Mapbox spec: fill-extrusion-edge-radius
Radius of a fill extrusion edge in meters. If not zero, rounds extrusion edges for a smoother appearance.
number
0
0
1
Parameters: ``
Name: fillExtrusionOpacity
Mapbox spec: fill-extrusion-opacity
The opacity of the entire fill extrusion layer. This is rendered on a perLayer, not perFeature, basis, and dataDriven styling is not available.
number
1
0
1
Parameters: zoom
Name: fillExtrusionOpacityTransition
The transition affecting any changes to this layer’s fillExtrusionOpacity property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionColor
Mapbox spec: fill-extrusion-color
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.
color
#000000
fillExtrusionPattern
Parameters: zoom, feature, feature-state, measure-light
Name: fillExtrusionColorTransition
The transition affecting any changes to this layer’s fillExtrusionColor property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionTranslate
Mapbox spec: fill-extrusion-translate
The geometry's offset. Values are [x, y] where negatives indicate left and up (on the flat plane), respectively.
array<number>
[0,0]
pixels
Parameters: zoom
Name: fillExtrusionTranslateTransition
The transition affecting any changes to this layer’s fillExtrusionTranslate property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionTranslateAnchor
Mapbox spec: fill-extrusion-translate-anchor
Controls the frame of reference for fillExtrusionTranslate.
enum
map
map - The fill extrusion is translated relative to the map.
viewport - The fill extrusion is translated relative to the viewport.
fillExtrusionTranslate
Parameters: zoom
Name: fillExtrusionPattern
Mapbox spec: fill-extrusion-pattern
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.
resolvedImage
Parameters: zoom, feature
Name: fillExtrusionPatternCrossFade
Mapbox spec: fill-extrusion-pattern-cross-fade
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).
number
0
0
1
linePattern
Parameters: zoom, measure-light
Name: fillExtrusionHeight
Mapbox spec: fill-extrusion-height
The height with which to extrude this layer.
number
0
meters
0
Parameters: zoom, feature, feature-state
Name: fillExtrusionHeightTransition
The transition affecting any changes to this layer’s fillExtrusionHeight property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionBase
Mapbox spec: fill-extrusion-base
The height with which to extrude the base of this layer. Must be less than or equal to fillExtrusionHeight.
number
0
meters
0
fillExtrusionHeight
Parameters: zoom, feature, feature-state
Name: fillExtrusionBaseTransition
The transition affecting any changes to this layer’s fillExtrusionBase property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionHeightAlignment
Mapbox spec: fill-extrusion-height-alignment
Controls the behavior of fill extrusion height over terrain
enum
flat
terrain - The fill extrusion height follows terrain slope.
flat - The fill extrusion height is flat over terrain.
fillExtrusionHeight
Name: fillExtrusionBaseAlignment
Mapbox spec: fill-extrusion-base-alignment
Controls the behavior of fill extrusion base over terrain
enum
terrain
terrain - The fill extrusion base follows terrain slope.
flat - The fill extrusion base is flat over terrain.
fillExtrusionBase
Name: fillExtrusionVerticalGradient
Mapbox spec: fill-extrusion-vertical-gradient
Whether to apply a vertical gradient to the sides of a fillExtrusion layer. If true, sides will be shaded slightly darker farther down.
boolean
true
Parameters: zoom
Name: fillExtrusionAmbientOcclusionIntensity
Mapbox spec: fill-extrusion-ambient-occlusion-intensity
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.
number
0
0
1
Parameters: zoom
Name: fillExtrusionAmbientOcclusionIntensityTransition
The transition affecting any changes to this layer’s fillExtrusionAmbientOcclusionIntensity property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionAmbientOcclusionRadius
Mapbox spec: fill-extrusion-ambient-occlusion-radius
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.
number
3
0
fillExtrusionEdgeRadius
Parameters: zoom
Name: fillExtrusionAmbientOcclusionRadiusTransition
The transition affecting any changes to this layer’s fillExtrusionAmbientOcclusionRadius property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionAmbientOcclusionWallRadius
Mapbox spec: fill-extrusion-ambient-occlusion-wall-radius
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.
number
3
0
lights, fillExtrusionEdgeRadius
Parameters: zoom
Name: fillExtrusionAmbientOcclusionWallRadiusTransition
The transition affecting any changes to this layer’s fillExtrusionAmbientOcclusionWallRadius property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionAmbientOcclusionGroundRadius
Mapbox spec: fill-extrusion-ambient-occlusion-ground-radius
The extent of the ambient occlusion effect on the ground beneath the extruded buildings in meters.
number
3
0
lights
Parameters: zoom
Name: fillExtrusionAmbientOcclusionGroundRadiusTransition
The transition affecting any changes to this layer’s fillExtrusionAmbientOcclusionGroundRadius property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionAmbientOcclusionGroundAttenuation
Mapbox spec: fill-extrusion-ambient-occlusion-ground-attenuation
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.
number
0.69
0
1
lights
Parameters: zoom
Name: fillExtrusionAmbientOcclusionGroundAttenuationTransition
The transition affecting any changes to this layer’s fillExtrusionAmbientOcclusionGroundAttenuation property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionFloodLightColor
Mapbox spec: fill-extrusion-flood-light-color
The color of the flood light effect on the walls of the extruded buildings.
color
#ffffff
lights
Parameters: zoom, measure-light
Name: fillExtrusionFloodLightColorTransition
The transition affecting any changes to this layer’s fillExtrusionFloodLightColor property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionFloodLightIntensity
Mapbox spec: fill-extrusion-flood-light-intensity
The intensity of the flood light color.
number
0
0
1
lights
Parameters: zoom, measure-light
Name: fillExtrusionFloodLightIntensityTransition
The transition affecting any changes to this layer’s fillExtrusionFloodLightIntensity property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionFloodLightWallRadius
Mapbox spec: fill-extrusion-flood-light-wall-radius
The extent of the flood light effect on the walls of the extruded buildings in meters.
number
0
meters
0
lights
Parameters: feature, feature-state
Name: fillExtrusionFloodLightWallRadiusTransition
The transition affecting any changes to this layer’s fillExtrusionFloodLightWallRadius property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionFloodLightGroundRadius
Mapbox spec: fill-extrusion-flood-light-ground-radius
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.
number
0
meters
lights
Parameters: feature, feature-state
Name: fillExtrusionFloodLightGroundRadiusTransition
The transition affecting any changes to this layer’s fillExtrusionFloodLightGroundRadius property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionFloodLightGroundAttenuation
Mapbox spec: fill-extrusion-flood-light-ground-attenuation
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.
number
0.69
0
1
lights
Parameters: zoom
Name: fillExtrusionFloodLightGroundAttenuationTransition
The transition affecting any changes to this layer’s fillExtrusionFloodLightGroundAttenuation property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionVerticalScale
Mapbox spec: fill-extrusion-vertical-scale
A global multiplier that can be used to scale base, height, AO, and flood light of the fill extrusions.
number
1
0
Parameters: zoom
Name: fillExtrusionVerticalScaleTransition
The transition affecting any changes to this layer’s fillExtrusionVerticalScale property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionRoundedRoof
Mapbox spec: fill-extrusion-rounded-roof
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.
boolean
true
fillExtrusionEdgeRadius
Parameters: zoom
Name: fillExtrusionCutoffFadeRange
Mapbox spec: fill-extrusion-cutoff-fade-range
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.
number
0
0
1
Parameters: ``
Name: fillExtrusionEmissiveStrength
Mapbox spec: fill-extrusion-emissive-strength
Controls the intensity of light emitted on the source features.
number
0
intensity
0
lights
Parameters: zoom, measure-light, feature-state
Name: fillExtrusionEmissiveStrengthTransition
The transition affecting any changes to this layer’s fillExtrusionEmissiveStrength property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: fillExtrusionLineWidth
Mapbox spec: fill-extrusion-line-width
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.
number
0
meters
0
Parameters: zoom, feature, feature-state, measure-light
Name: fillExtrusionLineWidthTransition
The transition affecting any changes to this layer’s fillExtrusionLineWidth property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}