Skip to main content

FillStyleExtension

The FillStyleExtension adds selected features to layers that render a "fill", such as the PolygonLayer and ScatterplotLayer.

import {GeoJsonLayer} from '@deck.gl/layers';
import {FillStyleExtension} from '@deck.gl/extensions';

const layer = new GeoJsonLayer({
  id: 'geojson-layer',
  data: GEOJSON,

  // props from GeoJsonLayer
  getFillColor: [255, 0, 0],
  getLineColor: [0, 0, 0],
  getLineWidth: 10,

  // props added by FillStyleExtension
  fillPatternAtlas: './pattern.png',
  fillPatternMapping: './pattern.json',
  getFillPattern: f => 'hatch',
  getFillPatternScale: 1,
  getFillPatternOffset: [0, 0],

  // Define extensions
  extensions: [new FillStyleExtension({pattern: true})]
});

Installation​

To install the dependencies from NPM:

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

To use pre-bundled scripts:

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

Constructor​

new FillStyleExtension({pattern});
  • pattern (boolean) - if true, adds the ability to tile the filled area with a pattern.

Layer Properties​

When added to a layer via the extensions prop, the FillStyleExtension adds the following properties to the layer:

Fill Pattern​

The following properties are available if the pattern option is enabled.

fillPatternAtlas (Texture2D | String)​

Sprite image url or texture that packs all your patterns into one layout. You can create sprite images with tools such as TexturePacker.

fillPatternEnabled (boolean)​

  • Default: true

Whether to use pattern fill. If false, then the extension has no effect.

fillPatternMapping (object | String)​

Pattern names mapped to pattern definitions. Each pattern is defined with the following values:

  • x (number, required): x position of pattern on the atlas image
  • y (number, required): y position of pattern on the atlas image
  • width (number, required): width of pattern on the atlas image
  • height (number, required): height of pattern on the atlas image

fillPatternMask (boolean)​

  • Default: true

Whether to treat the patterns as transparency masks.

  • If true, user defined color (e.g. from getFillColor) is applied.
  • If false, pixel color from the image is applied.

getFillPattern (Accessor<string>)​

Called to retrieve the name of the pattern. Returns a string key from the fillPatternMapping object.

getFillPatternScale (Accessor<number>)​

  • Default: 1

The scale of the pattern, relative to the original size. If the pattern is 24 x 24 pixels, scale 1 roughly yields 24 meters.

  • If a number is provided, it is used as the pattern scale for all objects.
  • If a function is provided, it is called on each object to retrieve its pattern scale.

getFillPatternOffset (Accessor<number[2]>)​

  • Default: [0, 0]

The offset of the pattern, relative to the original size. Offset [0.5, 0.5] shifts the pattern alignment by half.

  • If an array is provided, it is used as the pattern offset for all objects.
  • If a function is provided, it is called on each object to retrieve its pattern offset.

Source​

modules/extensions/src/fill-style