@ubilabs/outlined-path-layer

A Deck.gl layer to render paths with outlines. This layer extends the functionality of the PathLayer to include customizable outlines.

Installation

npm install @ubilabs/outlined-path-layer

Usage

import OutlinedPathLayer from '@ubilabs/outlined-path-layer';

const data = [
  {
    path: [
      [-122.45, 37.75],
      [-122.45, 37.8]
    ],
    color: [255, 0, 0]
  }
];

const layer = new OutlinedPathLayer({
  id: 'OutlinedPathLayer',
  data,
  getPath: (d) => d.path,
  getColor: (d) => d.color,
  getWidth: 5,
  getOutlineColor: [0, 0, 0, 255],
  getOutlineWidth: 2
});

Properties

The OutlinedPathLayer supports all properties of the PathLayer. In addition, it provides the following properties for outline customization, which can accept either a constant value or an accessor function, similar to getPath, getColor, and getWidth:

• getOutlineColor (Color | Accessor<DataT, Color>, optional): The rgba color of the outline in the format [r, g, b, [a]]. Can be a constant color or an accessor function that returns a color for each object. Default is [0, 0, 0, 255].
• getOutlineWidth (number | Accessor<DataT, number>, optional): The width of the outline. Can be a constant width or an accessor function that returns a width for each object. Default is 0.
• outlineWidthUnits (Unit, optional): The units of the outline width, one of 'meters', 'common', and 'pixels'. Default is 'pixels'.
• outlineMinPixels (number, optional): The minimum outline width in pixels. Default is 0.
• outlineMaxPixels (number, optional): The maximum outline width in pixels. Default is Number.MAX_SAFE_INTEGER.