Class TrajectoryPainter

Creates a new TrajectoryPainter.

Examples

Specifying filtering and styling based on feature properties

You can specify simple expressions to determine the visibility and color based on feature properties. Use a null color to hide features.

// Create a painter, specify that we will filter on "airline" and "destination"
const trajectoryPainter = new TrajectoryPainter({
  properties: ["airline", "destination"],
  defaultColor: "rgb(255, 255, 255)"
});

// At runtime, immediately change styling and filtering
trajectoryPainter.propertyColorExpressions = [
  {property: "destination", value: "Brussels", color: "rgb(255, 0, 0")},  // Destination Brussels = red
  {property: "destination", value: "London", color: "rgb(0, 255, 0")}     // Destination London = green
];
trajectoryPainter.defaultColor = null;                                       // Hide all the rest

// At runtime, immediately change styling and filtering
trajectoryPainter.propertyColorExpressions = [
  {property: "airline", value: "Brussels Airlines", color: "rgb(255, 0, 0")},  // Brussels Airlines = red
];
trajectoryPainter.defaultColor = "rgb(0, 0, 255)";                                // All the rest = blue
Copy

Specifying per-point time and continuously change time window

// Create a painter, specify a provider that can calculate time per point of a line
const trajectoryPainter = new TrajectoryPainter({
  lineWidth: 1,
  timeProvider: function(feature, shape, pointIndex) {
    return feature.properties.timestamps[pointIndex];
  },
  timeWindow: [0, 3600]
});

// Update the painter when the users updates the time window in the UI (e.g. on slider drag)
timeSlider.onChange(function(startTime, endTime) {
  trajectoryPainter.timeWindow = [startTime, endTime];
});
Copy

The default line color of trajectories, represented as a CSS color string.

If no color can be determined using the propertyColorExpressions, this color is used to paint the trajectory.

Use null to hide features that do not match any propertyColorExpressions.

You can only use two different colors in propertyColorExpressions or defaultColor. You can re-use the same color multiple times though.

Default

<code>rgb(255, 255, 255)</code> (white) when {@link TrajectoryPainterConstructorOptions.defaultColor} is not defined.
Copy

Set or get the density painting settings on this painter. Use null to disable density painting.

The setting affects all features in the layer associated with this painter.

The density settings object has one property: colorMap, the color map used to map density values to color.

The density at a particular location is the sum of the value of alpha channel for all overlapping objects. So for a single opaque object you would get a density value of 1.0, for 2 opaque objects 2.0, etc.
Example:

  var painter = new FeaturePainter();
  painter.paintBody = ... // customize painter as usual
  painter.density = {
    colorMap: ColorMap.createGradientColorMap([
      {level:  0, color: "rgba(  0,   0,   0, 0.0)"}, // no objects       -> Transparent
      {level:  1, color: "rgba(  0, 255,   0, 0.5)"}, // 1 opaque object  -> Transparent green
      {level: 10, color: "rgba(255, 255, 255, 1.0)"}  //10 opaque objects -> White
    ])
  };
Copy

Notes when using density painting:

• Density painting works for all kinds of objects: points/icons, lines and areas.
• The color aspect of the styling provided in paintBody is ignored. The alpha value of the color is used as a per-feature weight.
• If you paint icons, you can leave out the icon image. You will automatically get a gradient icon. You can still adapt the size with the width and height style properties.

This property is only supported on a WebGLMap, and is ignored otherwise.

Do not override this property.

The weight of parts of lines that are outside of the configured time windows.

Use 0 to completely discard these parts, so that they don't count in the density.

Use a number > 0 (for example 0.05) to let these parts add to the density. They will form a hazy image of all the lines, whether "active" or not.

Note that numbers lower than 0.004 are treated as 0 (they map to 0 when representing it as a single byte).

Default

<code>0.01</code> (1%)
Copy

An array of objects describing a mapping of property values to colors.

Each object in the array describes a single entry in the map and has the following structure:

• property The name of the property as a string.
• value The value of the property. Can be any type.
• color The color as a CSS color string, or null to hide features.

The mapping can be read as: if property x equals value y, use color z. Else if property p equals value v use color c....

When multiple entries result in a color for a trajectory, the first entry of the possible entries in the array will be used.

Note that any property used in the expressions must be specified in the constructor parameter TrajectoryPainterConstructorOptions.properties.

You can only use two different colors in propertyColorExpressions or defaultColor. You can re-use the same color multiple times though.

Default

<code>[]</code> (no expressions, defaultColor is used)
Copy

The color to paint selected trajectories with, represented as a CSS color string.

For selected objects, selectionColor overrides the color determined by the propertyColorExpressions.

Default

<code>rgb(255, 0, 0)</code> (red) when {@link TrajectoryPainterConstructorOptions.selectionColor} is not defined.
Copy

The start / end values for the window of the time filter.

This setting only has effect if you have set a timeProvider in the constructor.

This must be an array with two values.

The end value should be larger than the start value.

Default

<code>[0, Number.MAX_VALUE]</code>
Copy

Do not override this method.

Not applicable for TrajectoryPainter

Not applicable for TrajectoryPainter

Not applicable for TrajectoryPainter