Chevron DownAPI Reference

Explore BitmapLayer's API

autoHighlight: false
desaturate: 0
highlightColor: #000080
opacity: 1
pickable: false
tintColor: #ffffff
transparentColor: #000000
visible: true
wrapLongitude: false
View Code ↗


The BitmapLayer renders a bitmap at specified boundaries.

import DeckGL from '';
import {BitmapLayer} from '';

function App({data, viewState}) {
  const layer = new BitmapLayer({
    id: 'bitmap-layer',
    bounds: [-122.5190, 37.7045, -122.355, 37.829],
    image: ''

  return <DeckGL viewState={viewState} layers={[layer]} />;


To install the dependencies from NPM:

npm install
# or
npm install
import {BitmapLayer} from '';
new BitmapLayer({});

To use pre-bundled scripts:

<script src="^8.0.0/dist.min.js"></script>
<!-- or -->
<script src="^8.0.0/dist.min.js"></script>
<script src="^8.0.0/dist.min.js"></script>
new deck.BitmapLayer({});



image (String|Texture2D|Image|HTMLCanvasElement|HTMLVideoElement|ImageBitmap)
  • Default null.
bounds (Array)

Supported formats:

  • Coordinates of the bounding box of the bitmap [left, bottom, right, top]
  • Coordinates of four corners of the bitmap, should follow the sequence of [[left, bottom], [left, top], [right, top], [right, bottom]]. Each position could optionally contain a third component z.

left and right refers to the world longitude/x at the corresponding side of the image. top and bottom refers to the world latitude/y at the corresponding side of the image.

Render Options

desaturate (Number) transition-enabled
  • Default 0

The desaturation of the bitmap. Between [0, 1]. 0 being the original color and 1 being grayscale.

transparentColor (Array) transition-enabled
  • Default [0, 0, 0, 0]

The color to use for transparent pixels, in [r, g, b, a]. Each component is in the [0, 255] range.

tintColor (Array) transition-enabled
  • Default [255, 255, 255]

The color to tint the bitmap by, in [r, g, b]. Each component is in the [0, 255] range.