Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface LayerStyle

This is an interface to describe how certain features should be rendered within a layer.

example
{
 styleGroups: {
   "myLineStyle": [
     {zIndex: 0, type: "Line", opacity: 1, stroke: "#BE6B65", strokeWidth: 16},
     {zIndex: 1, type: "Line", opacity: 1, stroke: "#E6A08C", strokeWidth: 12},
     {zIndex: 2, type: "Text", fill: "#000000", "textRef": "properties.name"}
   ]
 },
 assign: function(feature: Feature, zoomlevel: number){
   return "myLineStyle";
 }
}

Hierarchy

  • LayerStyle

Index

Properties

Properties

Optional assign

assign: (feature: Feature, zoomlevel: number) => string | null | undefined

The function returns a key that is defined in the styleGroups map. This function will be called for each feature being rendered by the display. The display expects this method to return the key for the styleGroup of how the feature should be rendered for the respective zoomlevel.

If assign is not defined, the Style.filter property must be used to determine whether the feature should be rendered.

param

the feature to which style is applied

param

the zoomlevel of the tile the feature should be rendered in

returns

the key/identifier of the styleGroup in the styleGroupMap, or null/undefined if the feature should not be rendered.

Type declaration

    • (feature: Feature, zoomlevel: number): string | null | undefined

    • Parameters

      • feature: Feature
      • zoomlevel: number

      Returns string | null | undefined

Optional backgroundColor

backgroundColor: Color | StyleZoomRange<Color> | ((zoomlevel: number) => Color) | StyleExpression<Color>

Specifies the background color of the layer.

This property can accept different types of values to determine the background color:

  • A fixed Color.
  • A StyleZoomRange<Color> object to define color based on zoom levels.
  • A function (zoomlevel: number) => Color to compute the color dynamically based on the zoom level.
  • A StyleExpression<Color> to compute the color using a style expression.

Optional definitions

definitions: {}

Option LayerStyle definitions that can be references and reused by Styles within the Layer.

Type declaration

  • [definitionName: string]: boolean | number | StyleExpression | any[] | null

Optional lights

lights: {}

The lights property specifies a collection of light sources that can be used to illuminate features within the layer. It is a map where each key is a unique light group name, and the value is an array of light objects. Lights can be of various types, including AmbientLight and DirectionalLight, and can be used to create different lighting effects.

The lights property allows you to define and organize multiple light sources that influence the rendering of features in the layer.

Structure
  • Key (string): A unique identifier for the light group.
  • Value (array): An array of light objects, which can be of type AmbientLight or DirectionalLight.

Relation to Style.light
  • Style.light: Specifies which single light group to use for illuminating a specific feature. This property must reference a key defined in LayerStyle.lights.
  • Default Light: If a FeatureStyle does not specify a light, the light group associated with the "defaultLight" key in LayerStyle.lights will be used. If "defaultLight" is not defined, a default light will be automatically provided.
  • Only One Light Group: Only one light group is used to illuminate a feature. This is either the group specified in FeatureStyle.light, or if not specified, the "defaultLight" group from LayerStyle.lights.
  • Override Default Light: To override the default light, set it explicitly in LayerStyle.lights under the key "defaultLight".

Examples

 
{
  lights: {
     // Define a light group named "default" to override the default lighting for the layer
   "defaultLight": [{
       type: 'ambient',
       color: '#fff',
       intensity: 0.3
   }, {
       type: 'directional',
       color: '#fff',
       direction: [0, 0, 1],
       intensity: 1.0
   }, {
       type: 'directional',
       color: '#fff',
       direction: [-1, 0, 0],
       intensity: 0.2
   }],
   // Define a light group named "buildingLights" for specific features
    "buildingLights": [
      { type: "ambient", color: "#fff", intensity: 1.0 } // A simple ambient light source for buildings
    ]
  }
}

In the example above:

  • "defaultLight" is a light group that overrides the standard lighting configuration. It includes both an ambient and a directional light source and is used for all illuminated FeatureStyle instances where the light property is not explicitly set.
  • "buildingLights" is a light group containing only an ambient light source. This group will only be used for features where Style.light is set to "buildingLights".
  • Each light source can be customized with properties such as color, intensity, and, for DirectionalLight, a direction vector.

The lights specified here will be applied to the rendering of features within the layer. However, only one light group will be used for each feature:

  • If Style.light is defined, it will reference a specific light group in LayerStyle.lights.
  • If Style.light is not defined, the "defaultLight" light group (if specified) will be used.
  • If no "defaultLight" light group is set, an automatic default light will be provided.

Type declaration

Optional skyColor

skyColor: Color | StyleZoomRange<Color> | ((zoomlevel: number) => Color) | StyleExpression<Color> | LinearGradient

Defines the sky color of the map.

  • The sky becomes visible when the map is pitched to higher angles.
  • When multiple layers with different sky colors are used, the sky color from the bottommost layer is applied.
  • Supports various formats, including:
    • Color: A single color applied across all zoom levels.
    • StyleZoomRange<Color>: Specifies a range of colors based on zoom levels.
    • (zoomlevel: number) => Color: A function that dynamically determines the color based on the current zoom level.
    • StyleExpression<Color>: An expression to compute color based on style parameters.
    • LinearGradient: Applies a gradient effect for smooth transitions in sky color.
      • When using LinearGradient, stops at 0 represent the color near the horizon (close to the ground), and stops at 1 represent the color in the sky at the top of the screen.
      • The full gradient (0 to 1) becomes fully visible only when the map pitch is set to maximum (85 degrees).

styleGroups

styleGroups: {}

This object contains key/styleGroup pairs. A styleGroup is an array of Style, that exactly defines how a feature should be rendered.

Type declaration

  • [key: string]: Array<Style>

Optional zLayer

zLayer: number

Indicates the global drawing order across multiple layers. This value acts as a fallback for the Style.zLayer property if not explicitly defined there. Styles with higher zLayer values are rendered on top of those with lower values. If no zLayer is defined, the display layer order is used by default.

Generated using TypeDoc