Styling and CSS

This document explains the styling systems in OpenLayers, covering both CSS styling of map components and the programmatic styling of vector layers. For information about vector feature styles using the Style class, see Style Objects.

CSS Classes in OpenLayers

OpenLayers uses a set of predefined CSS classes to control the appearance and behavior of map elements. These classes are defined as constants in the CSS module and are applied to various components throughout the library.

Predefined CSS Classes

The following CSS classes are defined in the CSS module:

CSS Class	Purpose	Usage
ol-hidden	Hides elements	Applied to features or elements that should be invisible
ol-selectable	Makes elements selectable	Applied to elements that should be user-selectable
ol-unselectable	Makes elements unselectable	Applied to elements where text selection should be disabled
ol-unsupported	Indicates unsupported features	Applied when a feature is not supported in the current browser
ol-control	Base class for controls	Applied to all map control elements
ol-collapsed	Indicates collapsed state	Applied to collapsible elements when collapsed

Font Utilities

The CSS module also provides utilities for parsing font specifications, useful for text styling:

const fontParams = getFontParameters('bold 12px Arial');
// Returns an object with font properties: style, variant, weight, size, etc.

This function parses CSS font shorthand syntax into individual components.

Styling Vector Layers

OpenLayers provides two primary approaches for styling vector data, particularly in WebGL:

1. Flat Styles: JavaScript objects that define style properties
2. Custom Shaders: Advanced styling using WebGL shaders

Flat Style Structure

Flat styles define the visual appearance of vector features through property-value pairs:

{
  'fill-color': 'rgba(255, 255, 255, 0.6)',
  'stroke-color': '#333',
  'stroke-width': 2,
  'circle-radius': 5,
  'circle-fill-color': '#FF0000'
}

Flat styles can include expressions that reference feature properties:

{
  'fill-color': ['get', 'color'],
  'stroke-width': ['*', ['get', 'importance'], 2],
  'circle-radius': ['min', 8, ['get', 'size']]
}

Style Rules and Filtering

Styles can be applied conditionally using style rules with filters:

[
  {
    filter: ['==', ['get', 'type'], 'highway'],
    style: {
      'stroke-color': '#FF0000',
      'stroke-width': 3
    }
  },
  {
    else: true,
    style: {
      'stroke-color': '#666666',
      'stroke-width': 1
    }
  }
]

This approach allows different styles to be applied to different features based on their attributes.

WebGL Vector Layer Styling

The WebGLVector and WebGLVectorTile layers provide high-performance rendering for large datasets using WebGL. These layers use a specialized styling system that converts flat styles into WebGL shaders.

How WebGL Styling Works

Let's look at the architecture of the WebGL styling system:

The styling process involves:

1. Style Parsing: Flat styles are parsed into shader components
2. Buffer Generation: Geometries are converted to WebGL buffers
3. Shader Compilation: GLSL shaders are compiled for rendering
4. Rendering: Styles are applied during the WebGL rendering process

Style Variables

Style variables provide a way to update certain style properties without recreating WebGL buffers, improving performance when animating or highlighting features:

// Define style with variables
const layer = new WebGLVectorLayer({
  source: vectorSource,
  style: {
    'fill-color': ['var', 'fillColor'],
    'stroke-color': ['var', 'strokeColor']
  },
  variables: {
    fillColor: 'rgba(255, 0, 0, 0.5)',
    strokeColor: '#000000'
  }
});

// Later, update variables to change styles
layer.updateStyleVariables({
  fillColor: 'rgba(0, 0, 255, 0.5)'
});

This approach is much more efficient than changing the entire style, as it only updates uniform values in WebGL shaders rather than regenerating buffers.

WebGL Vector Style Renderers

The core of the WebGL styling system is the VectorStyleRenderer class, which translates styles into WebGL shaders and manages buffer creation and rendering.

100%

Key Attributes and Properties

The style renderer system supports various visual properties:

• Fill styles: Color, pattern
• Stroke styles: Color, width, line cap, line join, pattern
• Symbol styles: Size, color, shape, image
• Text styles: Font, color, size, alignment

Each of these can be specified as a literal value or an expression that evaluates feature properties.

WebGL Style Processing

The process of converting a flat style to WebGL rendering involves several steps:

1. Parsing: The flat style is parsed into shader components
2. Buffer Creation: Geometries are processed into WebGL buffers
3. Shader Generation: GLSL shaders are generated from style expressions
4. Rendering: Shaders and buffers are used to render features

WebGL Worker

For better performance, buffer generation is offloaded to a WebGL worker:

100%

This approach keeps the main thread responsive during the processing of large datasets.

Hit Detection

WebGL layers support hit detection (checking which feature is under a clicked point), which is implemented using color-based encoding of feature IDs:

1. Features are rendered to an offscreen buffer with unique colors
2. When a point is clicked, the color at that point is read
3. The color is decoded to identify the feature

This allows for efficient hit detection even with thousands of features.

Layer-Specific CSS

When creating WebGL vector layers, you can specify a CSS class name to be applied to the layer's canvas element:

const layer = new WebGLVectorLayer({
  className: 'my-custom-layer',
  source: vectorSource,
  style: {...}
});

This allows for custom CSS styling of the layer's container.

Best Practices

1. Performance: Use style variables for properties that change frequently
2. Reusability: Define reusable style components that can be combined
3. Conditionals: Use filters to apply different styles based on feature properties
4. Expressions: Leverage expressions to compute style properties dynamically
5. Caching: For static styles, avoid recreating them unnecessarily

When styling thousands of features, WebGL layers with appropriate styling strategies can significantly outperform canvas-based rendering.