Skip to main content
RasterParticleLayer renders a particle animation driven by velocity data from a raster array source. This is typically used to visualize wind patterns, ocean currents, or other directional flow data. Experimental: This component requires Mapbox Maps SDK v11.4.0 or later. 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
RasterParticleLayerStyleProps
required
Customizable style attributes.

​
Style Properties

​
style.visibility
'visible' | 'none'
default:"visible"
Controls layer visibility.
​
style.rasterParticleArrayBand
string
Displayed band of raster array source layer.
​
style.rasterParticleCount
number
default:"512"
Defines the amount of particles per tile. Minimum: 1
​
style.rasterParticleColor
string
Defines a color map by which to colorize a raster particle layer, parameterized by the rasterParticleSpeed expression.
​
style.rasterParticleMaxSpeed
number
default:"1"
Defines the maximum speed for particles. Velocities with magnitudes equal to or exceeding this value are clamped to the max value. Minimum: 1
​
style.rasterParticleSpeedFactor
number
default:"0.2"
Defines a coefficient for the speed of particles’ motion. Range: 0-1.
​
style.rasterParticleFadeOpacityFactor
number
default:"0.98"
Defines the opacity coefficient applied to the faded particles in each frame. In practice, this property controls the length of the particle tail. Range: 0-1.
​
style.rasterParticleResetRateFactor
number
default:"0.8"
Defines a coefficient for a time period at which particles will restart at a random position, to avoid degeneration (empty areas without particles). Range: 0-1.

​
Example

import { MapView, RasterSource, RasterParticleLayer } from '@rnmapbox/maps';

function Map() {
  return (
    <MapView>
      <RasterSource
        id="wind-data"
        url="mapbox://wind-velocity-data"
      >
        <RasterParticleLayer
          id="wind-particles"
          style={{
            rasterParticleCount: 1024,
            rasterParticleMaxSpeed: 20,
            rasterParticleSpeedFactor: 0.3,
            rasterParticleColor: [
              'interpolate',
              ['linear'],
              ['raster-particle-speed'],
              0, 'rgba(0,0,255,0.5)',
              10, 'rgba(255,255,0,0.5)',
              20, 'rgba(255,0,0,0.5)',
            ],
          }}
        />
      </RasterSource>
    </MapView>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us