0
# Styling System
1

2
Comprehensive styling system for customizing the visual appearance of vector features including fill, stroke, text, and image styles with support for dynamic styling functions.
3

4
## Capabilities
5

6
### Style Class
7

8
Main style class that combines fill, stroke, image, and text styles for complete feature styling.
9

10
```typescript { .api }
11
/**
12
 * Complete style definition for vector features
13
 * @param options - Style configuration options
14
 */
15
class Style {
16
  constructor(options?: StyleOptions);
17
  
18
  /** Get the fill style */
19
  getFill(): Fill | null;
20
  /** Set the fill style */
21
  setFill(fill: Fill): void;
22
  
23
  /** Get the stroke style */
24
  getStroke(): Stroke | null;
25
  /** Set the stroke style */
26
  setStroke(stroke: Stroke): void;
27
  
28
  /** Get the image style */
29
  getImage(): Image | null;
30
  /** Set the image style */
31
  setImage(image: Image): void;
32
  
33
  /** Get the text style */
34
  getText(): Text | null;
35
  /** Set the text style */
36
  setText(text: Text): void;
37
  
38
  /** Get the z-index */
39
  getZIndex(): number | undefined;
40
  /** Set the z-index */
41
  setZIndex(zIndex: number): void;
42
  
43
  /** Get the renderer function */
44
  getRenderer(): RenderFunction | null;
45
  /** Set a custom renderer function */
46
  setRenderer(renderer: RenderFunction): void;
47
  
48
  /** Clone the style */
49
  clone(): Style;
50
}
51

52
interface StyleOptions {
53
  /** Geometry to style (overrides feature geometry) */
54
  geometry?: Geometry | GeometryFunction;
55
  /** Fill style for polygons */
56
  fill?: Fill;
57
  /** Stroke style for lines and polygon outlines */
58
  stroke?: Stroke;
59
  /** Image style for points */
60
  image?: Image;
61
  /** Text style for labels */
62
  text?: Text;
63
  /** Z-index for rendering order */
64
  zIndex?: number;
65
  /** Custom renderer function */
66
  renderer?: RenderFunction;
67
}
68
```
69

70
### Fill Style
71

72
Style for filling polygon areas and shape interiors.
73

74
```typescript { .api }
75
/**
76
 * Fill style for polygon areas
77
 * @param options - Fill configuration options
78
 */
79
class Fill {
80
  constructor(options?: FillOptions);
81
  
82
  /** Get the fill color */
83
  getColor(): Color | ColorLike | null;
84
  /** Set the fill color */
85
  setColor(color: Color | ColorLike): void;
86
  
87
  /** Clone the fill style */
88
  clone(): Fill;
89
}
90

91
interface FillOptions {
92
  /** Fill color as CSS color, color array, or pattern */
93
  color?: Color | ColorLike;
94
}
95
```
96

97
### Stroke Style
98

99
Style for drawing lines and polygon outlines.
100

101
```typescript { .api }
102
/**
103
 * Stroke style for lines and outlines
104
 * @param options - Stroke configuration options
105
 */
106
class Stroke {
107
  constructor(options?: StrokeOptions);
108
  
109
  /** Get the stroke color */
110
  getColor(): Color | ColorLike | null;
111
  /** Set the stroke color */
112
  setColor(color: Color | ColorLike): void;
113
  
114
  /** Get the line dash pattern */
115
  getLineDash(): number[] | null;
116
  /** Set the line dash pattern */
117
  setLineDash(lineDash: number[]): void;
118
  
119
  /** Get the line dash offset */
120
  getLineDashOffset(): number | undefined;
121
  /** Set the line dash offset */
122
  setLineDashOffset(lineDashOffset: number): void;
123
  
124
  /** Get the line cap style */
125
  getLineCap(): CanvasLineCap | undefined;
126
  /** Set the line cap style */
127
  setLineCap(lineCap: CanvasLineCap): void;
128
  
129
  /** Get the line join style */
130
  getLineJoin(): CanvasLineJoin | undefined;
131
  /** Set the line join style */
132
  setLineJoin(lineJoin: CanvasLineJoin): void;
133
  
134
  /** Get the miter limit */
135
  getMiterLimit(): number | undefined;
136
  /** Set the miter limit */
137
  setMiterLimit(miterLimit: number): void;
138
  
139
  /** Get the stroke width */
140
  getWidth(): number | undefined;
141
  /** Set the stroke width */
142
  setWidth(width: number): void;
143
  
144
  /** Clone the stroke style */
145
  clone(): Stroke;
146
}
147

148
interface StrokeOptions {
149
  /** Stroke color */
150
  color?: Color | ColorLike;
151
  /** Line cap style */
152
  lineCap?: CanvasLineCap;
153
  /** Line join style */
154
  lineJoin?: CanvasLineJoin;
155
  /** Line dash pattern */
156
  lineDash?: number[];
157
  /** Line dash offset */
158
  lineDashOffset?: number;
159
  /** Miter limit */
160
  miterLimit?: number;
161
  /** Stroke width in pixels */
162
  width?: number;
163
}
164
```
165

166
### Image Styles
167

168
Base class and implementations for point styling with icons and shapes.
169

170
```typescript { .api }
171
/**
172
 * Base image style class
173
 */
174
abstract class Image {
175
  constructor();
176
  
177
  /** Get the image opacity */
178
  getOpacity(): number;
179
  /** Set the image opacity */
180
  setOpacity(opacity: number): void;
181
  
182
  /** Get whether rotation follows view rotation */
183
  getRotateWithView(): boolean;
184
  /** Set whether rotation follows view rotation */
185
  setRotateWithView(rotateWithView: boolean): void;
186
  
187
  /** Get the rotation angle */
188
  getRotation(): number;
189
  /** Set the rotation angle */
190
  setRotation(rotation: number): void;
191
  
192
  /** Get the scale factor */
193
  getScale(): number | Size;
194
  /** Set the scale factor */
195
  setScale(scale: number | Size): void;
196
  
197
  /** Get the displacement offset */
198
  getDisplacement(): number[];
199
  /** Set the displacement offset */
200
  setDisplacement(displacement: number[]): void;
201
}
202

203
/**
204
 * Icon image style for displaying images as point symbols
205
 * @param options - Icon configuration options
206
 */
207
class Icon extends Image {
208
  constructor(options?: IconOptions);
209
  
210
  /** Get the icon anchor */
211
  getAnchor(): number[];
212
  /** Get the icon image */
213
  getImage(): HTMLImageElement | HTMLCanvasElement;
214
  /** Get the icon origin */
215
  getOrigin(): number[];
216
  /** Get the icon size */
217
  getSize(): Size;
218
  /** Get the icon source URL */
219
  getSrc(): string | undefined;
220
  
221
  /** Set the icon anchor */
222
  setAnchor(anchor: number[]): void;
223
  /** Load the icon */
224
  load(): void;
225
  
226
  /** Clone the icon style */
227
  clone(): Icon;
228
}
229

230
interface IconOptions extends ImageOptions {
231
  /** Anchor point for positioning */
232
  anchor?: number[];
233
  /** Anchor origin (bottom-left, bottom-right, top-left, top-right) */
234
  anchorOrigin?: IconOrigin;
235
  /** Anchor units (fraction or pixels) */
236
  anchorXUnits?: IconAnchorUnits;
237
  /** Anchor Y units (fraction or pixels) */
238
  anchorYUnits?: IconAnchorUnits;
239
  /** Color to tint the icon */
240
  color?: Color | string;
241
  /** Cross origin attribute for image loading */
242
  crossOrigin?: string | null;
243
  /** Image object or canvas */
244
  img?: HTMLImageElement | HTMLCanvasElement;
245
  /** Image size for sprite icons */
246
  imgSize?: Size;
247
  /** Image source URL */
248
  src?: string;
249
  /** Offset for sprite icons */
250
  offset?: number[];
251
  /** Offset origin for sprite icons */
252
  offsetOrigin?: IconOrigin;
253
  /** Icon size */
254
  size?: Size;
255
}
256

257
/**
258
 * Circle image style for simple circular point symbols
259
 * @param options - Circle configuration options
260
 */
261
class Circle extends RegularShape {
262
  constructor(options: CircleOptions);
263
}
264

265
interface CircleOptions extends RegularShapeOptions {
266
  /** Circle radius in pixels */
267
  radius: number;
268
}
269

270
/**
271
 * Regular shape style for geometric point symbols
272
 * @param options - Regular shape configuration options
273
 */
274
class RegularShape extends Image {
275
  constructor(options: RegularShapeOptions);
276
  
277
  /** Get the shape angle */
278
  getAngle(): number;
279
  /** Get the fill style */
280
  getFill(): Fill | null;
281
  /** Get the number of points */
282
  getPoints(): number;
283
  /** Get the radius */
284
  getRadius(): number;
285
  /** Get the second radius (for stars) */
286
  getRadius2(): number | undefined;
287
  /** Get the stroke style */
288
  getStroke(): Stroke | null;
289
  
290
  /** Clone the regular shape style */
291
  clone(): RegularShape;
292
}
293

294
interface RegularShapeOptions extends ImageOptions {
295
  /** Fill style for the shape interior */
296
  fill?: Fill;
297
  /** Number of points for the shape */
298
  points: number;
299
  /** Outer radius of the shape */
300
  radius?: number;
301
  /** Inner radius for star shapes */
302
  radius2?: number;
303
  /** Angle offset in radians */
304
  angle?: number;
305
  /** Stroke style for the shape outline */
306
  stroke?: Stroke;
307
}
308
```
309

310
**Usage Examples:**
311

312
```typescript
313
import { Style, Fill, Stroke, Circle, Icon } from 'ol/style';
314

315
// Simple circle style
316
const circleStyle = new Style({
317
  image: new Circle({
318
    radius: 8,
319
    fill: new Fill({
320
      color: 'rgba(255, 0, 0, 0.8)'
321
    }),
322
    stroke: new Stroke({
323
      color: 'white',
324
      width: 2
325
    })
326
  })
327
});
328

329
// Icon style
330
const iconStyle = new Style({
331
  image: new Icon({
332
    src: 'path/to/icon.png',
333
    scale: 0.5,
334
    anchor: [0.5, 1],
335
    anchorXUnits: 'fraction',
336
    anchorYUnits: 'fraction'
337
  })
338
});
339

340
// Polygon style with fill and stroke
341
const polygonStyle = new Style({
342
  fill: new Fill({
343
    color: 'rgba(0, 255, 0, 0.3)'
344
  }),
345
  stroke: new Stroke({
346
    color: 'green',
347
    width: 2,
348
    lineDash: [5, 5]
349
  })
350
});
351
```
352

353
### Text Style
354

355
Style for rendering text labels on features.
356

357
```typescript { .api }
358
/**
359
 * Text style for feature labels
360
 * @param options - Text configuration options
361
 */
362
class Text {
363
  constructor(options?: TextOptions);
364
  
365
  /** Get the font specification */
366
  getFont(): string | undefined;
367
  /** Set the font specification */
368
  setFont(font: string): void;
369
  
370
  /** Get the maximum angle for text on line */
371
  getMaxAngle(): number;
372
  /** Set the maximum angle for text on line */
373
  setMaxAngle(maxAngle: number): void;
374
  
375
  /** Get the text offset */
376
  getOffsetX(): number;
377
  /** Set the X offset */
378
  setOffsetX(offsetX: number): void;
379
  
380
  /** Get the Y offset */
381
  getOffsetY(): number;
382
  /** Set the Y offset */
383
  setOffsetY(offsetY: number): void;
384
  
385
  /** Get overflow behavior */
386
  getOverflow(): boolean;
387
  /** Set overflow behavior */
388
  setOverflow(overflow: boolean): void;
389
  
390
  /** Get text placement */
391
  getPlacement(): TextPlacement;
392
  /** Set text placement */
393
  setPlacement(placement: TextPlacement): void;
394
  
395
  /** Get repeat interval for line text */
396
  getRepeat(): number | undefined;
397
  /** Set repeat interval for line text */
398
  setRepeat(repeat: number): void;
399
  
400
  /** Get the scale factor */
401
  getScale(): number | Size | undefined;
402
  /** Set the scale factor */
403
  setScale(scale: number | Size): void;
404
  
405
  /** Get whether rotation follows view rotation */
406
  getRotateWithView(): boolean;
407
  /** Set whether rotation follows view rotation */
408
  setRotateWithView(rotateWithView: boolean): void;
409
  
410
  /** Get the rotation angle */
411
  getRotation(): number;
412
  /** Set the rotation angle */
413
  setRotation(rotation: number): void;
414
  
415
  /** Get the text content */
416
  getText(): string | undefined;
417
  /** Set the text content */
418
  setText(text: string): void;
419
  
420
  /** Get the text alignment */
421
  getTextAlign(): CanvasTextAlign | undefined;
422
  /** Set the text alignment */
423
  setTextAlign(textAlign: CanvasTextAlign): void;
424
  
425
  /** Get the text baseline */
426
  getTextBaseline(): CanvasTextBaseline | undefined;
427
  /** Set the text baseline */
428
  setTextBaseline(textBaseline: CanvasTextBaseline): void;
429
  
430
  /** Get the fill style */
431
  getFill(): Fill | null;
432
  /** Set the fill style */
433
  setFill(fill: Fill): void;
434
  
435
  /** Get the stroke style */
436
  getStroke(): Stroke | null;
437
  /** Set the stroke style */
438
  setStroke(stroke: Stroke): void;
439
  
440
  /** Get the background fill */
441
  getBackgroundFill(): Fill | null;
442
  /** Set the background fill */
443
  setBackgroundFill(backgroundFill: Fill): void;
444
  
445
  /** Get the background stroke */
446
  getBackgroundStroke(): Stroke | null;
447
  /** Set the background stroke */
448
  setBackgroundStroke(backgroundStroke: Stroke): void;
449
  
450
  /** Get the padding */
451
  getPadding(): number[] | null;
452
  /** Set the padding */
453
  setPadding(padding: number[]): void;
454
  
455
  /** Clone the text style */
456
  clone(): Text;
457
}
458

459
interface TextOptions {
460
  /** Font specification (CSS font property) */
461
  font?: string;
462
  /** Maximum angle between characters for line placement */
463
  maxAngle?: number;
464
  /** X offset in pixels */
465
  offsetX?: number;
466
  /** Y offset in pixels */
467
  offsetY?: number;
468
  /** Allow overflow outside feature geometry */
469
  overflow?: boolean;
470
  /** Text placement strategy */
471
  placement?: TextPlacement;
472
  /** Repeat interval for line text */
473
  repeat?: number;
474
  /** Scale factor */
475
  scale?: number | Size;
476
  /** Rotate with view */
477
  rotateWithView?: boolean;
478
  /** Rotation angle in radians */
479
  rotation?: number;
480
  /** Text content */
481
  text?: string;
482
  /** Text alignment */
483
  textAlign?: CanvasTextAlign;
484
  /** Text baseline */
485
  textBaseline?: CanvasTextBaseline;
486
  /** Text fill style */
487
  fill?: Fill;
488
  /** Text stroke/outline style */
489
  stroke?: Stroke;
490
  /** Background fill */
491
  backgroundFill?: Fill;
492
  /** Background stroke */
493
  backgroundStroke?: Stroke;
494
  /** Background padding */
495
  padding?: number[];
496
}
497
```
498

499
**Usage Examples:**
500

501
```typescript
502
import { Style, Text, Fill, Stroke } from 'ol/style';
503

504
// Basic text style
505
const textStyle = new Style({
506
  text: new Text({
507
    text: 'Label Text',
508
    font: '12px Arial, sans-serif',
509
    fill: new Fill({
510
      color: 'black'
511
    }),
512
    stroke: new Stroke({
513
      color: 'white',
514
      width: 2
515
    }),
516
    offsetY: -15
517
  })
518
});
519

520
// Text with background
521
const backgroundTextStyle = new Style({
522
  text: new Text({
523
    text: 'Background Label',
524
    font: 'bold 14px Arial',
525
    fill: new Fill({
526
      color: 'white'
527
    }),
528
    backgroundFill: new Fill({
529
      color: 'rgba(0, 0, 0, 0.7)'
530
    }),
531
    padding: [2, 4, 2, 4]
532
  })
533
});
534
```
535

536
### Dynamic Styling
537

538
Functions for creating dynamic styles based on feature properties and context.
539

540
```typescript { .api }
541
/**
542
 * Style function for dynamic styling based on feature properties
543
 */
544
type StyleFunction = (feature: FeatureLike, resolution: number) => Style | Style[] | void;
545

546
/**
547
 * Style-like type that can be a Style, Style array, or function
548
 */
549
type StyleLike = Style | Style[] | StyleFunction;
550

551
/**
552
 * Geometry function for dynamic geometry selection
553
 */
554
type GeometryFunction = (feature: FeatureLike) => Geometry | null;
555

556
/**
557
 * Render function for custom rendering
558
 */
559
type RenderFunction = (coordinates: Coordinate | Coordinate[] | Coordinate[][], state: State) => void;
560
```
561

562
**Usage Examples:**
563

564
```typescript
565
import { Style, Fill, Circle } from 'ol/style';
566

567
// Dynamic styling based on feature properties
568
const styleFunction = (feature, resolution) => {
569
  const population = feature.get('population');
570
  let radius = 5;
571
  let color = 'blue';
572
  
573
  if (population > 100000) {
574
    radius = 15;
575
    color = 'red';
576
  } else if (population > 50000) {
577
    radius = 10;
578
    color = 'orange';
579
  }
580
  
581
  return new Style({
582
    image: new Circle({
583
      radius: radius,
584
      fill: new Fill({
585
        color: color
586
      })
587
    })
588
  });
589
};
590

591
// Apply to layer
592
vectorLayer.setStyle(styleFunction);
593

594
// Conditional styling
595
const conditionalStyle = (feature, resolution) => {
596
  const type = feature.get('type');
597
  
598
  switch (type) {
599
    case 'city':
600
      return cityStyle;
601
    case 'town':
602
      return townStyle;
603
    default:
604
      return defaultStyle;
605
  }
606
};
607
```
608

609
### Color Utilities
610

611
Helper functions for working with colors in styling.
612

613
```typescript { .api }
614
/** RGBA color array [red, green, blue, alpha] */
615
type Color = [number, number, number, number];
616

617
/** Color-like values: Color array, CSS string, or CanvasGradient/CanvasPattern */
618
type ColorLike = Color | string | CanvasGradient | CanvasPattern;
619

620
/** Convert color-like value to Color array */
621
function asArray(color: ColorLike): Color;
622

623
/** Convert Color array to CSS color string */
624
function asString(color: Color): string;
625

626
/** Parse CSS color string to Color array */
627
function fromString(color: string): Color;
628

629
/** Normalize color values to [0-1] range */
630
function normalize(color: Color): Color;
631

632
/** Check if value is a CSS color string */
633
function isStringColor(s: any): boolean;
634
```
635

636
## Types
637

638
```typescript { .api }
639
type IconOrigin = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
640
type IconAnchorUnits = 'fraction' | 'pixels';
641
type TextPlacement = 'point' | 'line';
642
type Size = [number, number];
643
```