A ParameterizedLinePainter allows you to visualize line datasets with dynamic styling and filtering, as well as per-pixel styling.

This painter uses the graphics hardware to efficiently switch styling and filtering.

Highlights

  • Property filtering: efficiently filter on propertyColorExpressions.
  • Property styling: efficiently choose and switch colors based on propertyColorExpressions.
  • Range filtering: filter parts of a line based on a range.
  • Per-pixel coloring: per-pixel color along a line based on a varying property with a rangeColorMap.
  • Density: this painter can be combined with FeaturePainter.density. Note that in this case, the alpha value of the final color is used as a weight in the density. The color itself is discarded.

Note that this painter does not allow overriding of FeaturePainter. All styling is configured by setting this object's properties.

See also TrajectoryPainter for a painter with similar capabilities.

Limitations:

  • This painter can only be used on a WebGLMap.
  • This painter does not support labels. You should not override paintLabel.

Hierarchy

Constructors

  • Creates a new ParameterizedLinePainter.

    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 linePainter = new ParameterizedLinePainter({
    properties: ["airline", "destination"],
    defaultColor: "rgb(255, 255, 255)"
    });

    // At runtime, immediately change styling and filtering
    linePainter.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
    ];
    linePainter.defaultColor = null; // Hide all the rest

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

    Specifying per-point range value and continuously change range window

    // Create a painter, specify a provider that can calculate a value per point of a line
    const linePainter = new ParameterizedLinePainter({
    lineWidth: 2,
    rangePropertyProvider: function(feature, shape, pointIndex) {
    return feature.properties.fuelconsumptions[pointIndex];
    },
    rangeColorMap: ColorMap.createGradientColorMap([
    {level: 0, color: "rgba(0, 0, 255, 0.0)"}, // 0..100: blue
    {level: 100, color: "rgba(0, 0, 255, 1)"}, // 100..500: blue to green
    {level: 500, color: "rgba(0, 255, 0, 1)"}, // 500..1000: green to red
    {level: 1000, color: "rgba(255, 0, 0, 1)"}]), // 1000+: red
    rangeWindow: [0, 5000]
    });

    // Update the painter when the user updates the min/max fuel consumption window in the UI (e.g. on slider drag)
    fuelConsumptionSlider.onChange(function(min, max) {
    linePainter.rangeWindow = [min, max];
    });

    Parameters

    Returns ParameterizedLinePainter

Accessors

  • get defaultColor(): null | string
  • The default line color, represented as a CSS color string. If no color can be determined using the propertyColorExpressions, this color is used.

    Returns null | string

    Default

    <code>rgb(0, 0, 255)</code> (Opaque blue)
    
  • set defaultColor(defaultColor): void
  • Parameters

    • defaultColor: null | string

    Returns void

  • get density(): null | DensitySettings
  • 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
    ])
    };

    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.

    Returns null | DensitySettings

  • set density(value): void
  • Parameters

    Returns void

  • get propertyColorExpressions(): PropertyColorExpression[]
  • An array of objects describing a mapping of property values to colors. 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 an object, the first entry of the possible entries in the array will be used.

    Returns PropertyColorExpression[]

    Default

    <code>[]</code>
    
  • set propertyColorExpressions(propertyColorExpression): void
  • Parameters

    Returns void

  • get rangeColorMap(): null | ColorMap
  • The ColorMap that for each pixel in a line maps its range value to a color.

    This allows you to change the color along the line based on a varying property, such a fuel consumption.

    The resulting color is a modulation color: it is "multiplied" with the defaultColor, or color based on the propertyColorExpressions. Typically, either the normal color is white and the range color is not, or vice-versa:

    • If the normal color is white, the range color becomes the final color.
    • If the range color is white, it's opacity (alpha) value is used together with the normal color.
    • If neither are white, the final color is a multiplication of the two colors.
    Set a falsy value to disable color modulation over the range window.

    Returns null | ColorMap

    Default

    <code>null</code>
    
  • set rangeColorMap(rangeColorMap): void
  • Parameters

    Returns void

  • get rangeWindow(): [number, number]
  • The start / end values for the window of the range property filter.

    Parts of a line whose range values are outside this range window are not painted.

    This must be an array with two values. The end value should be larger than the start value.

    Returns [number, number]

    Default

    <code>[0, Number.MAX_VALUE]</code>
    
  • set rangeWindow(range): void
  • Parameters

    • range: [number, number]

    Returns void

  • get selectionColor(): null | string
  • The color to paint selected lines with, represented as a CSS color string. For selected objects, selectionColor overrides the color determined by the propertyColorExpressions.

    Returns null | string

    Default

    <code>rgb(255, 0, 0)</code> (Opaque red)
    
  • set selectionColor(selectionColor): void
  • Parameters

    • selectionColor: null | string

    Returns void

Methods

  • Returns an array of map scales that determine when this painter should switch from one level-of-detail to the next. This can be used to advertise that this painter supports multiple level-of-details for a given object. The current level-of-detail that is used is determined by the map and is passed back to this FeaturePainter via the state.level property that is passed to the paint methods. The default implementation of this method returns null indicating the level-of-detail is not supported.

    Parameters

    • Optional layer: FeatureLayer

      the layer for which the detail level scales are being requested

    • Optional map: Map

      the map for which the detail level scales are being requested

    Returns null | number[]

    the switch scales for each level of detail

    See

    A visual example of the relation between the scale switching points and the paint levels. The example uses 3 different switching scales, hence resulting with 4 paint levels.

    // Scale:           1 : 100 000          1 : 10 000            1 : 1000
    // (zoomed out) -------- | ----------------- | ----------------- | -------- (zoomed in)
    // level 0 | level 1 | level 2 | level 3

    getDetailLevelScales(): number[] {
    return [1 / 100000, 1 / 10000, 1 / 1000];
    }
  • Invalidates this painter for a specific feature. Call this method when any state that determines the rendering of a specific feature has been changed. Calling this method refreshes this FeaturePainter's layer and guarantees that () and () will be called for the given feature during the next map render.

    Parameters

    Returns void

  • Invalidates this painter for all objects. Call this method when any state that determines the rendering of objects has been changed. Calling this method refreshes the FeaturePainter's layer and guarantees that () and () will be called for all objects in the layer during the next map render.

    Returns void

  • Invalidates this painter for a specific object by id. Call this method when any state that determines the rendering of a specific object has been changed. Calling this method refreshes this FeaturePainter's layer and guarantees that () and () will be called for the given object during the next map render.

    Parameters

    Returns void

Events

"InvalidateAll" event

  • on("InvalidateAll", callback: (() => void), context?: any) : Handle
  • Registers a callback function for the "InvalidateAll" event, that notifies a listener that the all features are invalidated.

    Parameters

    • event: "InvalidateAll"

      Always set to "InvalidateAll" for this event type.

    • callback: (() => void)

      The callback function to be executed when the event is emitted

        • (): void
        • Returns void

    • Optional context: any

      The context in which the function should be invoked.

      "InvalidateAll"

    Returns Handle

    Since

    2020.1

"Invalidate" event

  • on("Invalidate", callback: ((feature) => void), context?: any) : Handle
  • Registers a callback function for the "Invalidate" event, that notifies a listener that a given feature is invalidated.

    Parameters

    • event: "Invalidate"

      Always set to "Invalidate" for this event type.

    • callback: ((feature) => void)

      The callback function to be executed when the event is emitted

    • Optional context: any

      The context in which the function should be invoked.

      "Invalidate"

    Returns Handle

    Since

    2020.1

"InvalidateById" event

  • on("InvalidateById", callback: ((id) => void), context?: any) : Handle
  • Registers a callback function for the "InvalidateById" event, that notifies a listener that a feature with the given id is invalidated.

    Parameters

    • event: "InvalidateById"

      Always set to "InvalidateById" for this event type.

    • callback: ((id) => void)

      The callback function to be executed when the event is emitted

        • (id): void
        • Parameters

          Returns void

    • Optional context: any

      The context in which the function should be invoked.

      "InvalidateById"

    Returns Handle

    Since

    2020.1