OpenLayers v4.0.1 API - Namespace: style

# Namespace: style

This documentation is for OpenLayers v4.0.1. The latest is v.

## olx.style

### Type Definitions

#### olx.style.AtlasManagerOptions{Object}

  ##### Properties:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `initialSize` | number | undefined | <optional> | The size in pixels of the first atlas image. If no value is given the `ol.INITIAL_ATLAS_SIZE` compile-time constant will be used.
  `maxSize` | number | undefined | <optional> | The maximum size in pixels of atlas images. If no value is given then the `ol.MAX_ATLAS_SIZE` compile-time constant will be used. And if `ol.MAX_ATLAS_SIZE` is set to `-1` (the default) then `ol.WEBGL_MAX_TEXTURE_SIZE` will used if WebGL is supported. Otherwise 2048 is used.
  `space` | number | undefined | <optional> | The space in pixels between images (default: 1).

#### olx.style.CircleOptions{Object}

  ##### Properties:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `fill` | ol.style.Fill | undefined | <optional> | Fill style.
  `radius` | number |  | Circle radius. Required.
  `snapToPixel` | boolean | undefined | <optional> | If `true` integral numbers of pixels are used as the X and Y pixel coordinate when drawing the circle in the output canvas. If `false` fractional numbers may be used. Using `true` allows for "sharp" rendering (no blur), while using `false` allows for "accurate" rendering. Note that accuracy is important if the circle's position is animated. Without it, the circle may jitter noticeably. Default value is `true`.
  `stroke` | ol.style.Stroke | undefined | <optional> | Stroke style.
  `atlasManager` | ol.style.AtlasManager | undefined | <optional> | The atlas manager to use for this circle. When using WebGL it is recommended to use an atlas manager to avoid texture switching. If an atlas manager is given, the circle is added to an atlas. By default no atlas manager is used.

#### olx.style.FillOptions{Object}

  ##### Properties:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `color` | ol.Color | ol.ColorLike | undefined | <optional> | A color, gradient or pattern. See `ol.color` and `ol.colorlike` for possible formats. Default null; if null, the Canvas/renderer default black will be used.

#### olx.style.IconOptions{Object}

  ##### Properties:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `anchor` | Array.<number> | undefined | <optional> | Anchor. Default value is `[0.5, 0.5]` (icon center).
  `anchorOrigin` | ol.style.IconOrigin | undefined | <optional> | Origin of the anchor: `bottom-left`, `bottom-right`, `top-left` or `top-right`. Default is `top-left`.
  `anchorXUnits` | ol.style.IconAnchorUnits | undefined | <optional> | Units in which the anchor x value is specified. A value of `'fraction'` indicates the x value is a fraction of the icon. A value of `'pixels'` indicates the x value in pixels. Default is `'fraction'`.
  `anchorYUnits` | ol.style.IconAnchorUnits | undefined | <optional> | Units in which the anchor y value is specified. A value of `'fraction'` indicates the y value is a fraction of the icon. A value of `'pixels'` indicates the y value in pixels. Default is `'fraction'`.
  `color` | ol.Color | string | undefined | <optional> | Color to tint the icon. If not specified, the icon will be left as is.
  `crossOrigin` | null | string | undefined | <optional> | The `crossOrigin` attribute for loaded images. Note that you must provide a `crossOrigin` value if you are using the WebGL renderer or if you want to access pixel data with the Canvas renderer. See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.
  `img` | Image | HTMLCanvasElement | undefined | <optional> | Image object for the icon. If the `src` option is not provided then the provided image must already be loaded. And in that case, it is required to provide the size of the image, with the `imgSize` option.
  `offset` | Array.<number> | undefined | <optional> | Offset, which, together with the size and the offset origin, define the sub-rectangle to use from the original icon image. Default value is `[0, 0]`.
  `offsetOrigin` | ol.style.IconOrigin | undefined | <optional> | Origin of the offset: `bottom-left`, `bottom-right`, `top-left` or `top-right`. Default is `top-left`.
  `opacity` | number | undefined | <optional> | Opacity of the icon. Default is `1`.
  `scale` | number | undefined | <optional> | Scale.
  `snapToPixel` | boolean | undefined | <optional> | If `true` integral numbers of pixels are used as the X and Y pixel coordinate when drawing the icon in the output canvas. If `false` fractional numbers may be used. Using `true` allows for "sharp" rendering (no blur), while using `false` allows for "accurate" rendering. Note that accuracy is important if the icon's position is animated. Without it, the icon may jitter noticeably. Default value is `true`.
  `rotateWithView` | boolean | undefined | <optional> | Whether to rotate the icon with the view. Default is `false`.
  `rotation` | number | undefined | <optional> | Rotation in radians (positive rotation clockwise). Default is `0`.
  `size` | ol.Size | undefined | <optional> | Icon size in pixel. Can be used together with `offset` to define the sub-rectangle to use from the origin (sprite) icon image.
  `imgSize` | ol.Size | undefined | <optional> | Image size in pixels. Only required if `img` is set and `src` is not, and for SVG images in Internet Explorer 11. The provided `imgSize` needs to match the actual size of the image.
  `src` | string |  | Image source URI. Required.

#### olx.style.RegularShapeOptions{Object}

  Specify radius for regular polygons, or radius1 and radius2 for stars.

  ##### Properties:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `fill` | ol.style.Fill | undefined | <optional> | Fill style.
  `points` | number |  | Number of points for stars and regular polygons. In case of a polygon, the number of points is the number of sides. Required.
  `radius` | number | undefined | <optional> | Radius of a regular polygon.
  `radius1` | number | undefined | <optional> | Inner radius of a star.
  `radius2` | number | undefined | <optional> | Outer radius of a star.
  `angle` | number | undefined | <optional> | Shape's angle in radians. A value of 0 will have one of the shape's point facing up. Default value is 0.
  `snapToPixel` | boolean | undefined | <optional> | If `true` integral numbers of pixels are used as the X and Y pixel coordinate when drawing the shape in the output canvas. If `false` fractional numbers may be used. Using `true` allows for "sharp" rendering (no blur), while using `false` allows for "accurate" rendering. Note that accuracy is important if the shape's position is animated. Without it, the shape may jitter noticeably. Default value is `true`.
  `stroke` | ol.style.Stroke | undefined | <optional> | Stroke style.
  `rotation` | number | undefined | <optional> | Rotation in radians (positive rotation clockwise). Default is `0`.
  `rotateWithView` | boolean | undefined | <optional> | Whether to rotate the shape with the view. Default is `false`.
  `atlasManager` | ol.style.AtlasManager | undefined | <optional> | The atlas manager to use for this symbol. When using WebGL it is recommended to use an atlas manager to avoid texture switching. If an atlas manager is given, the symbol is added to an atlas. By default no atlas manager is used.

#### olx.style.StrokeOptions{Object}

  ##### Properties:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `color` | ol.Color | ol.ColorLike | undefined | <optional> | A color, gradient or pattern. See `ol.color` and `ol.colorlike` for possible formats. Default null; if null, the Canvas/renderer default black will be used.
  `lineCap` | string | undefined | <optional> | Line cap style: `butt`, `round`, or `square`. Default is `round`.
  `lineJoin` | string | undefined | <optional> | Line join style: `bevel`, `round`, or `miter`. Default is `round`.
  `lineDash` | Array.<number> | undefined | <optional> | Line dash pattern. Default is `undefined` (no dash). Please note that Internet Explorer 10 and lower do not support the `setLineDash` method on the `CanvasRenderingContext2D` and therefore this option will have no visual effect in these browsers.
  `lineDashOffset` | number | undefined | <optional> | Line dash offset. Default is '0'.
  `miterLimit` | number | undefined | <optional> | Miter limit. Default is `10`.
  `width` | number | undefined | <optional> | Width.

#### olx.style.StyleOptions{Object}

  ##### Properties:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `geometry` | undefined | string | ol.geom.Geometry | ol.StyleGeometryFunction | <optional> | Feature property or geometry or function returning a geometry to render for this style.
  `fill` | ol.style.Fill | undefined | <optional> | Fill style.
  `image` | ol.style.Image | undefined | <optional> | Image style.
  `stroke` | ol.style.Stroke | undefined | <optional> | Stroke style.
  `text` | ol.style.Text | undefined | <optional> | Text style.
  `zIndex` | number | undefined | <optional> | Z index.

#### olx.style.TextOptions{Object}

  ##### Properties:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `font` | string | undefined | <optional> | Font style as CSS 'font' value, see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font. Default is '10px sans-serif'
  `offsetX` | number | undefined | <optional> | Horizontal text offset in pixels. A positive will shift the text right. Default is `0`.
  `offsetY` | number | undefined | <optional> | Vertical text offset in pixels. A positive will shift the text down. Default is `0`.
  `scale` | number | undefined | <optional> | Scale.
  `rotateWithView` | boolean | undefined | <optional> | Whether to rotate the text with the view. Default is `false`.
  `rotation` | number | undefined | <optional> | Rotation in radians (positive rotation clockwise). Default is `0`.
  `text` | string | undefined | <optional> | Text content.
  `textAlign` | string | undefined | <optional> | Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'. Default is 'start'.
  `textBaseline` | string | undefined | <optional> | Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'. Default is 'alphabetic'.
  `fill` | ol.style.Fill | undefined | <optional> | Fill style. If none is provided, we'll use a dark fill-style (#333).
  `stroke` | ol.style.Stroke | undefined | <optional> | Stroke style.