Chevron DownAPI Reference
BitmapLayer
i

Explore BitmapLayer's API


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

BitmapLayer

The BitmapLayer renders a bitmap at specified boundaries.

import DeckGL from '@deck.gl/react';
import {BitmapLayer} from '@deck.gl/layers';

function App({data, viewState}) {
  const layer = new BitmapLayer({
    id: 'bitmap-layer',
    bounds: [-122.5190, 37.7045, -122.355, 37.829],
    image: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png'
  });

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

Installation

To install the dependencies from NPM:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers
import {BitmapLayer} from '@deck.gl/layers';
new BitmapLayer({});

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^8.0.0/dist.min.js"></script>
new deck.BitmapLayer({});

Properties

Data

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.

Source

modules/layers/src/bitmap-layer