Layers and Overlays

Compose images, wiggles, scalar curves, points and annotations using public core providers.

Navigate linked panes

Pan either pane or zoom with the wheel. Both share a Y window; their X windows stay independent.

Preparing view…

Pane A · Camera APane B · Camera B

const unlink = linkAxes([cameraA, cameraB], 'y')
// Call unlink() when the linked group is removed.

Choose a data layer, then add axes and annotations to the same pane with pane.add(item).

Match the Layer to the Data

Data or annotation	Layer	Visual role
Seismic / array grid	`ImageTileLayer`	Color maps each cell’s value
Seismic traces	`WiggleLayer`	Waveform and variable-area fill
Scalar well curve	`CurveLayer`	Line with gap handling and min/max envelopes
Coordinate arrays	`PointsLayer`	Markers with color/size values
Formation tops	`MarkerLayer`	Labeled horizontal markers
Ticks / grid / titles	`AxesOverlay`	Coordinate reference
Value scale	`ColorbarOverlay`	Color-to-value key
Pointer position	`CrosshairOverlay`	Hover reference

Draw an In-Memory Image

import { arrayImage, ImageTileLayer, type Pane } from '@bs/outkrop-core'

export function addImage(pane: Pane, values: Float32Array, traces: number, samples: number) {
  const image = arrayImage(values, traces, samples)
  return pane.add(new ImageTileLayer({ image, colormap: 'Seismic', clip: [-1, 1] }))
}

The array is trace-major: one trace’s samples are consecutive. Set the camera to its trace/sample coordinates and choose a clip range appropriate to your amplitudes. For files, use providers instead of allocating a whole-file array.

Add a Well Curve

import { CurveLayer, wellCurves, type DataSource, type Pane, type WellInfo } from '@bs/outkrop-core'

export function addCurve(
  pane: Pane,
  source: DataSource,
  well: WellInfo,
  frameId: string,
  mnemonic: string,
) {
  return pane.add(
    new CurveLayer({
      source: wellCurves(source, well, frameId),
      curve: mnemonic,
      color: '#3e8d70',
      width: 1.5,
    }),
  )
}

Use a frame ID and mnemonic from WellInfo. Align the camera with the frame index and value range. Missing values create gaps; envelopes retain narrow peaks when zoomed out.

Compose and Update

flowchart TD
  accTitle: Compose a plot with data and annotations
  accDescr: Choose a data provider, add a matching layer, then add axes and markers to the pane.
  Data[Data provider] --> Layer[Image, curve or points]
  Layer --> Pane[Pane and camera]
  Axes[Axes and markers] --> Pane

Use a curve’s scale for independent ranges within a track; fill, crossover and dash control its presentation.
Image and wiggle layers can share a tiled source. Keep arrays/providers stable while in use.
COLORMAP_NAMES and colorAt expose image colors; crossplots use Plotly-style color scales.
Remove a layer with pane.remove(layer.id), or dispose the engine. Request a frame after direct drawing-state changes.

Local LAS supplies scalar curves, not array-channel tiles. Keep units visible in track headers or axes.