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

  • Expression-based styling: efficiently choose and switch color, icon or scale.

  • Expression-based filtering: efficient filter on feature properties.

  • Property-based behavior: expressions allow you to configure behavior based on feature properties.

The main benefit of using a ParameterizedPointPainter instead of a regular FeaturePainter is that a ParameterizedPointPainter can perform style updates very efficiently: expression-based styling allows you to style each point differently without degrading performance.

plots screenshot
Figure 1. Points with varying color and scale depending on their attributes.

At runtime, you can efficiently change:

  • Styling expressions: instead of overriding paintBody, you configure a set of expressions that apply to all features. Those expressions allow you to style features based on their properties. The expressions are evaluated for you for each feature automatically. You can use this to color points based on their properties, for example.

  • Density: you can enable density using FeaturePainter.density. See Density painting on a WebGLMap for more information.

Program: Using a ParameterizedPointPainter
//The parameters and expressions in this snippet are all created using the factory methods
//provided by the ExpressionFactory module

//Define a threshold parameter that can be efficiently updated later on.
const threshold = numberParameter(0.0);

//Base the color of a point on an attribute of that point:
//if the attribute value is less than the threshold, color it green, otherwise color it red.
const colorExpression = ifThenElse(
    lt(attribute("someAttribute"), threshold),
    color("rgba(0, 255, 0, 1)"),
    color("rgba(255, 0, 0, 1)")
);

const yellow = color("rgba(255, 255, 0, 1)");

//Configure the ParameterizedPointPainter.
//Specify that the attribute is derived from the ATTRIBUTE property of the features.
const parameterizedPointPainter = new ParameterizedPointPainter({
  regular: {
    colorExpression: color,
  },
  selected: {
    colorExpression: yellow
  },
  attributes: {
    someAttribute: "ATTRIBUTE"
  }
});

//At runtime, the threshold value can be updated
//For example by syncing it with a slider UI element
threshold.value = newThresholdValue;

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