Skip to main content
ModelLayer is a style layer that renders 3D models 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.
​
slot
'bottom' | 'middle' | 'top'
The slot this layer is assigned to. v11 only
​
minZoomLevel
number
Minimum zoom level for layer visibility.
​
maxZoomLevel
number
Maximum zoom level for layer visibility.
​
filter
FilterExpression
Filters features based on a condition.
​
style
ModelLayerStyleProps
Customizable style attributes.

​
Style Properties

​
style.visibility
'visible' | 'none'
default:"visible"
Controls layer visibility.
​
style.modelId
string
default:""
Model to render. It can be either a string referencing an element in the models root property or an internal or external URL.
​
style.modelType
'common3d' | 'location-indicator'
default:"common3d"
Defines rendering behavior of the model in respect to other 3D scene objects.
​
style.modelOpacity
number
default:"1"
The opacity of the model layer. Range: 0-1.
​
style.modelRotation
number[]
default:"[0,0,0]"
The rotation of the model in euler angles [x, y, z] in degrees.
​
style.modelScale
number[]
default:"[1,1,1]"
The scale of the model along the [x, y, z] axis.
​
style.modelTranslation
number[]
default:"[0,0,0]"
The translation of the model in meters along [x, y, z] axis.
​
style.modelColor
string
default:"#ffffff"
The tint color of the model layer. Acts as a multiplier for the model’s color.
​
style.modelColorMixIntensity
number
default:"0"
Intensity of the model-color. Range: 0-1.
​
style.modelCastShadows
boolean
default:"true"
Enable/Disable shadow casting for this layer.
​
style.modelReceiveShadows
boolean
default:"true"
Enable/Disable shadow receiving for this layer.
​
style.modelEmissiveStrength
number
default:"0"
Strength of the emission. Minimum: 0

​
Example

import { MapView, ShapeSource, ModelLayer } from '@rnmapbox/maps';

const modelLocations = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-122.4, 37.8],
      },
      properties: {
        modelId: 'building-model',
      },
    },
  ],
};

function Map() {
  return (
    <MapView pitch={60}>
      <ShapeSource id="models" shape={modelLocations}>
        <ModelLayer
          id="3d-models"
          style={{
            modelId: ['get', 'modelId'],
            modelType: 'common3d',
            modelScale: [1, 1, 1.5],
            modelRotation: [0, 0, 90],
            modelOpacity: 1,
            modelCastShadows: true,
            modelReceiveShadows: true,
          }}
        />
      </ShapeSource>
    </MapView>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us