<!--
{
  "availability" : [
    "MapKit JS: 5.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "MapKitJS",
  "identifier" : "/documentation/MapKitJS/Style",
  "metadataVersion" : "0.1.0",
  "role" : "Class",
  "symbol" : {
    "kind" : "Class",
    "modules" : [
      "MapKit JS"
    ],
    "preciseIdentifier" : "cl/mapkit.Style"
  },
  "title" : "Style"
}
-->

# Style

A set of observable style properties for overlays, including the color and opacity of strokes and fills, and line styles.

```
class Style
```

## Overview

You can assign a `mapkit.Style` object to an overlay to customize its appearance, such as changing the opacity of the fill or the thickness of the stroke. Style properties are observable, so MapKit JS automatically reflects any change to a style property on the corresponding overlays.

## Topics

### Creating a style

[`constructor(options?: StyleConstructorOptions);`](/documentation/MapKitJS/Style/StyleConstructor)

Creates and initializes a style object.

[`interface StyleConstructorOptions`](/documentation/MapKitJS/StyleConstructorOptions)

Initial values of options for applying style to overlays.

### Styling fills

[`get fillColor(): string;
set fillColor(fillColor: string);`](/documentation/MapKitJS/Style/fillColor)

The fill color of a shape.

[`get fillOpacity(): number;
set fillOpacity(fillOpacity: number);`](/documentation/MapKitJS/Style/fillOpacity)

The opacity of the fill color.

[`get fillRule(): "evenodd" | "nonzero";
set fillRule(fillRule: "evenodd" | "nonzero");`](/documentation/MapKitJS/Style/fillRule)

A rule for determining whether a point is inside or outside a polygon.

### Styling lines

[`get lineCap(): "square" | "butt" | "round";
set lineCap(lineCap: "square" | "butt" | "round");`](/documentation/MapKitJS/Style/lineCap)

The style to use when drawing line endings.

[`get lineDash(): number[];
set lineDash(lineDash: number[]);`](/documentation/MapKitJS/Style/lineDash)

An array of line and gap lengths for creating a dashed line.

[`get lineDashOffset(): number;
set lineDashOffset(lineDashOffset: number);`](/documentation/MapKitJS/Style/lineDashOffset)

The number of CSS pixels to use as an offset when drawing a line’s dash pattern.

[`get lineJoin(): "round" | "bevel" | "miter";
set lineJoin(lineJoin: "round" | "bevel" | "miter");`](/documentation/MapKitJS/Style/lineJoin)

The corner style to apply when joining line segments.

[`get lineWidth(): number;
set lineWidth(lineWidth: number);`](/documentation/MapKitJS/Style/lineWidth)

The width of a line’s stroke, in CSS pixels.

[`get lineGradient(): LineGradient | null;
set lineGradient(lineGradient: LineGradient | null);`](/documentation/MapKitJS/Style/lineGradient)

The gradient to apply along the line.

[`class LineGradient`](/documentation/MapKitJS/LineGradient)

A line that displays with a gradient along the length of the line.

### Styling strokes

[`get strokeColor(): string;
set strokeColor(strokeColor: string);`](/documentation/MapKitJS/Style/strokeColor)

The stroke color of a line.

[`get strokeOpacity(): number;
set strokeOpacity(strokeOpacity: number);`](/documentation/MapKitJS/Style/strokeOpacity)

The opacity of the stroke color.

[`get strokeStart(): number;
set strokeStart(strokeStart: number);`](/documentation/MapKitJS/Style/strokeStart)

The unit distance along the line where a stroke begins.

[`get strokeEnd(): number;
set strokeEnd(strokeEnd: number);`](/documentation/MapKitJS/Style/strokeEnd)

The unit distance along the line where a stroke ends.

### Instance Methods

[`toString(): string;`](/documentation/MapKitJS/Style/toString)

Returns a string representation of the style object.

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)