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: efficiently filter on feature properties.

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

The main benefit of using a ParameterizedPointPainter instead of a regular FeaturePainter is that a ParameterizedPointPainter can efficiently perform style updates. Through expression-based styling, you can 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. Using those expressions, you can style features based on their properties. The expressions are automatically evaluated for you for each feature. 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.