Namespace: style

ol.style

Feature styles.

If no style is defined, the following default style is used:

 var fill = new ol.style.Fill({
   color: 'rgba(255,255,255,0.4)'
 });
 var stroke = new ol.style.Stroke({
   color: '#3399CC',
   width: 1.25
 });
 var styles = [
   new ol.style.Style({
     image: new ol.style.Circle({
       fill: fill,
       stroke: stroke,
       radius: 5
     }),
     fill: fill,
     stroke: stroke
   })
 ];

A separate editing style has the following defaults:

 var white = [255, 255, 255, 1];
 var blue = [0, 153, 255, 1];
 var width = 3;
 styles[ol.geom.GeometryType.POLYGON] = [
   new ol.style.Style({
     fill: new ol.style.Fill({
       color: [255, 255, 255, 0.5]
     })
   })
 ];
 styles[ol.geom.GeometryType.MULTI_POLYGON] =
     styles[ol.geom.GeometryType.POLYGON];
 styles[ol.geom.GeometryType.LINE_STRING] = [
   new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: white,
       width: width + 2
     })
   }),
   new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: blue,
       width: width
     })
   })
 ];
 styles[ol.geom.GeometryType.MULTI_LINE_STRING] =
     styles[ol.geom.GeometryType.LINE_STRING];
 styles[ol.geom.GeometryType.POINT] = [
   new ol.style.Style({
     image: new ol.style.Circle({
       radius: width * 2,
       fill: new ol.style.Fill({
         color: blue
       }),
       stroke: new ol.style.Stroke({
         color: white,
         width: width / 2
       })
     }),
     zIndex: Infinity
   })
 ];
 styles[ol.geom.GeometryType.MULTI_POINT] =
     styles[ol.geom.GeometryType.POINT];
 styles[ol.geom.GeometryType.GEOMETRY_COLLECTION] =
     styles[ol.geom.GeometryType.POLYGON].concat(
         styles[ol.geom.GeometryType.POINT]
     );

Classes

Circle
Fill
Icon
Image
Stroke
Style
Text

Type Definitions

ol.style.IconAnchorUnits{string} experimental

Icon anchor units. One of 'fraction', 'pixels'.

ol.style.IconOrigin{string} experimental

Icon origin. One of 'bottom-left', 'bottom-right', 'top-left', 'top-right'.

ol.style.StyleFunction() experimental

A function that takes an ol.Feature and a {number} representing the view's resolution. The function should return an array of ol.style.Style. This way e.g. a vector layer can be styled.