Options
All
  • Public
  • Public/Protected
  • All
Menu

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 paintBody, unlike the usual 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

Implements

Overview

Constructors

constructor

  • 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

Events

on

  • (event: "InvalidateAll", callback: () => void, context?: any): Handle
  • (event: "Invalidate", callback: (feature: Feature) => void, context?: any): Handle
  • (event: "InvalidateById", callback: (id: string | number) => void, context?: any): Handle
  • Registers a callback function for the "InvalidateAll" event, that notifies a listener that the all features are invalidated.

    since

    2020.1

    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.

    Returns Handle

  • Registers a callback function for the "Invalidate" event, that notifies a listener that a given feature is invalidated.

    since

    2020.1

    Parameters

    • event: "Invalidate"

      Always set to "Invalidate" for this event type.

    • callback: (feature: 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.

    Returns Handle

  • Registers a callback function for the "InvalidateById" event, that notifies a listener that a feature with the given id is invalidated.

    since

    2020.1

    Parameters

    • event: "InvalidateById"

      Always set to "InvalidateById" for this event type.

    • callback: (id: string | number) => void

      The callback function to be executed when the event is emitted

        • (id: string | number): void
        • Parameters

          • id: string | number

          Returns void

    • Optional context: any

      The context in which the function should be invoked.

    Returns Handle

Accessors

defaultColor

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

    default

    rgb(0, 0, 255) (Opaque blue)

    Returns string | null

  • The default line color, represented as a CSS color string. If no color can be determined using the propertyColorExpressions, this color is used.

    default

    rgb(0, 0, 255) (Opaque blue)

    Parameters

    • defaultColor: string | null

    Returns any

density

  • 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 ColorMap | null

  • 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.

    Parameters

    Returns any

propertyColorExpressions

  • 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.

    default

    []

    Returns 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.

    default

    []

    Parameters

    Returns any

rangeColorMap

  • get rangeColorMap(): ColorMap | null
  • set rangeColorMap(rangeColorMap: ColorMap | null): void
  • 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.
    default

    null

    Returns ColorMap | null

  • 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.
    default

    null

    Parameters

    Returns any

rangeWindow

  • get rangeWindow(): [number, number]
  • set rangeWindow(range: [number, number]): void
  • 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.

    default

    [0, Number.MAX_VALUE]

    Returns [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.

    default

    [0, Number.MAX_VALUE]

    Parameters

    • range: [number, number]

    Returns any

selectionColor

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

    default

    rgb(255, 0, 0) (Opaque red)

    Returns string | null

  • The color to paint selected lines with, represented as a CSS color string. For selected objects, selectionColor overrides the color determined by the propertyColorExpressions.

    default

    rgb(255, 0, 0) (Opaque red)

    Parameters

    • selectionColor: string | null

    Returns any

Methods

getDetailLevelScales

  • 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.

    see

    FeaturePainter#paintBody

    see

    FeaturePainter#paintLabel

    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 number[] | null

    the switch scales for each level of detail

invalidate

  • 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 paintBody() and paintLabel() will be called for the given feature during the next map render.

    Parameters

    • feature: Feature

      the model feature whose representation has changed

    Returns void

invalidateAll

  • (): 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 paintBody() and paintLabel() will be called for all objects in the layer during the next map render.

    Returns void

invalidateById

  • (featureId: string | number): 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 paintBody() and paintLabel() will be called for the given object during the next map render.

    Parameters

    • featureId: string | number

      The id of the feature. It corresponds to Feature.id.

    Returns void

paintBody

Optional paintBorderBody

  • (): void

Optional paintBorderLabel

  • (): void

Optional paintLabel

  • (): void

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method