The TrajectoryPainter serves to visualize the trajectories of vessels and aircraft.

The Property-based styling and filtering of lines article describes a more general ParameterizedLinePainter. It also allows for property-based filtering and styling on the GPU.

LuciadRIA hardware-accelerated maps support fast GPU-based visualization, styling, and filtering of lines, including:

  • Property filtering: efficiently filter on feature properties.

  • Property styling: efficiently choose and switch colors based on feature properties.

  • Time filtering: filter parts of a line based on a time range.

  • Density: automatically paint overlapping trajectories with more intense color.

  • Trajectory head and trail highlighting: emphasize the part of the line close to the current time range end, and fade out the tail.

Figure 1. Trajectories with two colors, time filtering and head highlighting.

At runtime, you can efficiently change two things:

  • Styling expressions: instead of overriding paintBody, you must configure a set of expressions that apply to all features, based on their properties. These expressions are automatically evaluated for each feature.

  • Time range: you can configure a time window, and a function to provide a time value for each point along your lines. Only the parts of your lines that correspond to the time window are painted.

Program: Using a TrajectoryPainter
//Create a painter which uses
//* the airline and destination property for styling
//* a time provider to enable time filtering
const painter = new TrajectoryPainter({
  properties: ["airline", "destination"],
  timeProvider: function(feature, shape, pointIndex): number {
    return ( as any).timestamps[pointIndex];

// At runtime, change expressions:
//   Brussels -> red
//   London   -> blue
//   Others   -> hide
painter.propertyColorExpressions = [{
  property: "destination",
  value: "Brussels",
  color: "rgb(255, 0, 0)"
}, {
  property: "destination",
  value: "London",
  color: "rgb(0, 255, 0)"
painter.defaultColor = null;

//Configure a time window on the painter
//Only the trajectories in this window will be visualized
painter.timeWindow = [startTime, endTime];

Refer to the API documentation of TrajectoryPainter for more details and examples, and see the Trajectories sample for an example.