Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/rnmapbox/maps/llms.txt

Use this file to discover all available pages before exploring further.

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

​
Props

​
id
string
required
A unique identifier for the layer.
​
existing
boolean
If true, references an existing layer in the style.
​
sourceID
string
default:"Mapbox.StyleSource.DefaultSourceID"
The source from which to obtain data.
​
sourceLayerID
string
Identifier of the layer within the source.
​
aboveLayerID
string
Inserts the layer above the specified layer ID.
​
belowLayerID
string
Inserts the layer below the specified layer ID.
​
minZoomLevel
number
required
Minimum zoom level for layer visibility.
​
maxZoomLevel
number
required
Maximum zoom level for layer visibility.
​
filter
FilterExpression
Filters features based on a condition.
​
style
FillExtrusionLayerStyleProps
Customizable style attributes.

​
Style Properties

​
style.visibility
'visible' | 'none'
default:"visible"
Controls layer visibility.
​
style.fillExtrusionOpacity
number
default:"1"
The opacity of the entire fill extrusion layer. Range: 0-1.
​
style.fillExtrusionColor
string
default:"#000000"
The base color of the extruded fill. Disabled by: fillExtrusionPattern
​
style.fillExtrusionHeight
number
default:"0"
The height with which to extrude this layer in meters. Minimum: 0
​
style.fillExtrusionBase
number
default:"0"
The height with which to extrude the base of this layer. Must be less than or equal to fillExtrusionHeight. Minimum: 0
​
style.fillExtrusionPattern
string
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>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us