Skip to main content

FillExtrusionLayer

Mapbox spec: fill-extrusion

import { FillExtrusionLayer } from '@rnmapbox/maps';

FillExtrusionLayer

FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.

props​

id​

string

required A string that uniquely identifies the layer in the style to which it is added.

existing​

boolean

The id refers to an existing layer in the style. Does not create a new layer.

sourceID​

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​

string

Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.

aboveLayerID​

string

Inserts a layer above aboveLayerID.

belowLayerID​

string

Inserts a layer below belowLayerID

layerIndex​

number

Inserts a layer at a specified index

filter​

FilterExpression

Filter only the features in the source layer that satisfy a condition that you define

minZoomLevel​

number

required The minimum zoom level at which the layer gets parsed and appears.

maxZoomLevel​

number

required The maximum zoom level at which the layer gets parsed and appears.

style​

FillExtrusionLayerStyleProps

Customizable style attributes

styles​

visibility​

Name: visibility

Mapbox spec: 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

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

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

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

Description​

The geometry's offset. Values are [x, y] where negatives indicate left and up (on the flat plane), respectively.

Type​

array<number>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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}