Get rid of extra style arrays in examples

examples/cluster.js

@@ -38,7 +38,7 @@ var clusters = new ol.layer.Vector({
     var size = feature.get('features').length;
     var style = styleCache[size];
     if (!style) {
-      style = [new ol.style.Style({
+      style = new ol.style.Style({
         image: new ol.style.Circle({
           radius: 10,
           stroke: new ol.style.Stroke({
@@ -54,7 +54,7 @@ var clusters = new ol.layer.Vector({
             color: '#fff'
           })
         })
-      })];
+      });
       styleCache[size] = style;
     }
     return style;

examples/drag-and-drop-image-vector.js

@@ -19,7 +19,7 @@ goog.require('ol.style.Style');
 
 
 var defaultStyle = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,255,0,0.5)'
@@ -30,14 +30,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
+  }),
-  'LineString': [new ol.style.Style({
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#f00',
       width: 3
     })
-  })],
+  }),
-  'Polygon': [new ol.style.Style({
+  'Polygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,255,255,0.5)'
     }),
@@ -45,8 +45,8 @@ var defaultStyle = {
       color: '#0ff',
       width: 1
     })
-  })],
+  }),
-  'MultiPoint': [new ol.style.Style({
+  'MultiPoint': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,0,255,0.5)'
@@ -57,14 +57,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
+  }),
-  'MultiLineString': [new ol.style.Style({
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#0f0',
       width: 3
     })
-  })],
+  }),
-  'MultiPolygon': [new ol.style.Style({
+  'MultiPolygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,0,255,0.5)'
     }),
@@ -72,7 +72,7 @@ var defaultStyle = {
       color: '#00f',
       width: 1
     })
-  })]
+  })
 };
 
 var styleFunction = function(feature, resolution) {

examples/drag-and-drop.js

@@ -18,7 +18,7 @@ goog.require('ol.style.Style');
 
 
 var defaultStyle = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,255,0,0.5)'
@@ -29,14 +29,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
+  }),
-  'LineString': [new ol.style.Style({
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#f00',
       width: 3
     })
-  })],
+  }),
-  'Polygon': [new ol.style.Style({
+  'Polygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,255,255,0.5)'
     }),
@@ -44,8 +44,8 @@ var defaultStyle = {
       color: '#0ff',
       width: 1
     })
-  })],
+  }),
-  'MultiPoint': [new ol.style.Style({
+  'MultiPoint': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,0,255,0.5)'
@@ -56,14 +56,14 @@ var defaultStyle = {
         width: 1
       })
     })
-  })],
+  }),
-  'MultiLineString': [new ol.style.Style({
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#0f0',
       width: 3
     })
-  })],
+  }),
-  'MultiPolygon': [new ol.style.Style({
+  'MultiPolygon': new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(0,0,255,0.5)'
     }),
@@ -71,7 +71,7 @@ var defaultStyle = {
       color: '#00f',
       width: 1
     })
-  })]
+  })
 };
 
 var styleFunction = function(feature, resolution) {

examples/earthquake-clusters.js

@@ -84,7 +84,7 @@ function styleFunction(feature, resolution) {
   var style;
   var size = feature.get('features').length;
   if (size > 1) {
-    style = [new ol.style.Style({
+    style = new ol.style.Style({
       image: new ol.style.Circle({
         radius: feature.get('radius'),
         fill: new ol.style.Fill({
@@ -96,10 +96,10 @@ function styleFunction(feature, resolution) {
         fill: textFill,
         stroke: textStroke
       })
-    })];
+    });
   } else {
     var originalFeature = feature.get('features')[0];
-    style = [createEarthquakeStyle(originalFeature)];
+    style = createEarthquakeStyle(originalFeature);
   }
   return style;
 }

examples/feature-move-animation.js

@@ -115,9 +115,9 @@ var vectorLayer = new ol.layer.Vector({
   style: function(feature, resolution) {
     // hide geoMarker if animation is active
     if (animating && feature.get('type') === 'geoMarker') {
-      return [];
+      return null;
     }
-    return [styles[feature.get('type')]];
+    return styles[feature.get('type')];
   }
 });
 

examples/geojson.js

@@ -21,25 +21,25 @@ var image = new ol.style.Circle({
 });
 
 var styles = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: image
-  })],
+  }),
-  'LineString': [new ol.style.Style({
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'green',
       width: 1
     })
-  })],
+  }),
-  'MultiLineString': [new ol.style.Style({
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'green',
       width: 1
     })
-  })],
+  }),
-  'MultiPoint': [new ol.style.Style({
+  'MultiPoint': new ol.style.Style({
     image: image
-  })],
+  }),
-  'MultiPolygon': [new ol.style.Style({
+  'MultiPolygon': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'yellow',
       width: 1
@@ -47,8 +47,8 @@ var styles = {
     fill: new ol.style.Fill({
       color: 'rgba(255, 255, 0, 0.1)'
     })
-  })],
+  }),
-  'Polygon': [new ol.style.Style({
+  'Polygon': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'blue',
       lineDash: [4],
@@ -57,8 +57,8 @@ var styles = {
     fill: new ol.style.Fill({
       color: 'rgba(0, 0, 255, 0.1)'
     })
-  })],
+  }),
-  'GeometryCollection': [new ol.style.Style({
+  'GeometryCollection': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'magenta',
       width: 2
@@ -73,8 +73,8 @@ var styles = {
         color: 'magenta'
       })
     })
-  })],
+  }),
-  'Circle': [new ol.style.Style({
+  'Circle': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'red',
       width: 2
@@ -82,7 +82,7 @@ var styles = {
     fill: new ol.style.Fill({
       color: 'rgba(255,0,0,0.2)'
     })
-  })]
+  })
 };
 
 var styleFunction = function(feature, resolution) {

examples/gpx.js

@@ -21,7 +21,7 @@ var raster = new ol.layer.Tile({
 });
 
 var style = {
-  'Point': [new ol.style.Style({
+  'Point': new ol.style.Style({
     image: new ol.style.Circle({
       fill: new ol.style.Fill({
         color: 'rgba(255,255,0,0.4)'
@@ -32,19 +32,19 @@ var style = {
         width: 1
       })
     })
-  })],
+  }),
-  'LineString': [new ol.style.Style({
+  'LineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#f00',
       width: 3
     })
-  })],
+  }),
-  'MultiLineString': [new ol.style.Style({
+  'MultiLineString': new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: '#0f0',
       width: 3
     })
-  })]
+  })
 };
 
 var vector = new ol.layer.Vector({

examples/igc.js

@@ -27,17 +27,17 @@ var colors = {
 var styleCache = {};
 var styleFunction = function(feature, resolution) {
   var color = colors[feature.get('PLT')];
-  var styleArray = styleCache[color];
+  var style = styleCache[color];
-  if (!styleArray) {
+  if (!style) {
-    styleArray = [new ol.style.Style({
+    style = new ol.style.Style({
       stroke: new ol.style.Stroke({
         color: color,
         width: 3
       })
-    })];
+    });
-    styleCache[color] = styleArray;
+    styleCache[color] = style;
   }
-  return styleArray;
+  return style;
 };
 
 var vectorSource = new ol.source.Vector();

examples/kml-earthquakes.js

@@ -21,7 +21,7 @@ var styleFunction = function(feature, resolution) {
   var radius = 5 + 20 * (magnitude - 5);
   var style = styleCache[radius];
   if (!style) {
-    style = [new ol.style.Style({
+    style = new ol.style.Style({
       image: new ol.style.Circle({
         radius: radius,
         fill: new ol.style.Fill({
@@ -32,7 +32,7 @@ var styleFunction = function(feature, resolution) {
           width: 1
         })
       })
-    })];
+    });
     styleCache[radius] = style;
   }
   return style;

examples/kml-timezones.js

@@ -35,14 +35,14 @@ var styleFunction = function(feature, resolution) {
     delta = 24 - delta;
   }
   var opacity = 0.75 * (1 - delta / 12);
-  return [new ol.style.Style({
+  return new ol.style.Style({
     fill: new ol.style.Fill({
       color: [0xff, 0xff, 0x33, opacity]
     }),
     stroke: new ol.style.Stroke({
       color: '#ffffff'
     })
-  })];
+  });
 };
 
 var vector = new ol.layer.Vector({

examples/layer-z-index.js

@@ -13,7 +13,7 @@ goog.require('ol.style.Style');
 var stroke = new ol.style.Stroke({color: 'black', width: 1});
 
 var styles = {
-  'square': [new ol.style.Style({
+  'square': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: new ol.style.Fill({color: 'blue'}),
       stroke: stroke,
@@ -21,8 +21,8 @@ var styles = {
       radius: 80,
       angle: Math.PI / 4
     })
-  })],
+  }),
-  'triangle': [new ol.style.Style({
+  'triangle': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: new ol.style.Fill({color: 'red'}),
       stroke: stroke,
@@ -31,8 +31,8 @@ var styles = {
       rotation: Math.PI / 4,
       angle: 0
     })
-  })],
+  }),
-  'star': [new ol.style.Style({
+  'star': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: new ol.style.Fill({color: 'green'}),
       stroke: stroke,
@@ -41,13 +41,13 @@ var styles = {
       radius2: 4,
       angle: 0
     })
-  })]
+  })
 };
 
 
-function createLayer(coordinates, styles, zIndex) {
+function createLayer(coordinates, style, zIndex) {
   var feature = new ol.Feature(new ol.geom.Point(coordinates));
-  feature.setStyle(styles);
+  feature.setStyle(style);
 
   var source = new ol.source.Vector({
     features: [feature]

examples/modify-test.js

@@ -19,8 +19,8 @@ var styleFunction = (function() {
     fill: null,
     stroke: new ol.style.Stroke({color: 'orange', width: 2})
   });
-  styles['Point'] = [new ol.style.Style({image: image})];
+  styles['Point'] = new ol.style.Style({image: image});
-  styles['Polygon'] = [new ol.style.Style({
+  styles['Polygon'] = new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'blue',
       width: 3
@@ -28,14 +28,14 @@ var styleFunction = (function() {
     fill: new ol.style.Fill({
       color: 'rgba(0, 0, 255, 0.1)'
     })
-  })];
+  });
-  styles['MultiLinestring'] = [new ol.style.Style({
+  styles['MultiLinestring'] = new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'green',
       width: 3
     })
-  })];
+  });
-  styles['MultiPolygon'] = [new ol.style.Style({
+  styles['MultiPolygon'] = new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'yellow',
       width: 1
@@ -43,8 +43,8 @@ var styleFunction = (function() {
     fill: new ol.style.Fill({
       color: 'rgba(255, 255, 0, 0.1)'
     })
-  })];
+  });
-  styles['default'] = [new ol.style.Style({
+  styles['default'] = new ol.style.Style({
     stroke: new ol.style.Stroke({
       color: 'red',
       width: 3
@@ -53,7 +53,7 @@ var styleFunction = (function() {
       color: 'rgba(255, 0, 0, 0.1)'
     }),
     image: image
-  })];
+  });
   return function(feature, resolution) {
     return styles[feature.getGeometry().getType()] || styles['default'];
   };

examples/regularshape.js

@@ -14,7 +14,7 @@ var stroke = new ol.style.Stroke({color: 'black', width: 2});
 var fill = new ol.style.Fill({color: 'red'});
 
 var styles = {
-  'square': [new ol.style.Style({
+  'square': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: fill,
       stroke: stroke,
@@ -22,8 +22,8 @@ var styles = {
       radius: 10,
       angle: Math.PI / 4
     })
-  })],
+  }),
-  'triangle': [new ol.style.Style({
+  'triangle': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: fill,
       stroke: stroke,
@@ -32,8 +32,8 @@ var styles = {
       rotation: Math.PI / 4,
       angle: 0
     })
-  })],
+  }),
-  'star': [new ol.style.Style({
+  'star': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: fill,
       stroke: stroke,
@@ -42,8 +42,8 @@ var styles = {
       radius2: 4,
       angle: 0
     })
-  })],
+  }),
-  'cross': [new ol.style.Style({
+  'cross': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: fill,
       stroke: stroke,
@@ -52,8 +52,8 @@ var styles = {
       radius2: 0,
       angle: 0
     })
-  })],
+  }),
-  'x': [new ol.style.Style({
+  'x': new ol.style.Style({
     image: new ol.style.RegularShape({
       fill: fill,
       stroke: stroke,
@@ -62,7 +62,7 @@ var styles = {
       radius2: 0,
       angle: Math.PI / 4
     })
-  })]
+  })
 };
 
 

examples/synthetic-points.js

@@ -24,20 +24,20 @@ for (var i = 0; i < count; ++i) {
 }
 
 var styles = {
-  '10': [new ol.style.Style({
+  '10': new ol.style.Style({
     image: new ol.style.Circle({
       radius: 5,
       fill: new ol.style.Fill({color: '#666666'}),
       stroke: new ol.style.Stroke({color: '#bada55', width: 1})
     })
-  })],
+  }),
-  '20': [new ol.style.Style({
+  '20': new ol.style.Style({
     image: new ol.style.Circle({
       radius: 10,
       fill: new ol.style.Fill({color: '#666666'}),
       stroke: new ol.style.Stroke({color: '#bada55', width: 1})
     })
-  })]
+  })
 };
 
 var vectorSource = new ol.source.Vector({

examples/topojson.js

@@ -16,7 +16,7 @@ var raster = new ol.layer.Tile({
   })
 });
 
-var styleArray = [new ol.style.Style({
+var style = new ol.style.Style({
   fill: new ol.style.Fill({
     color: 'rgba(255, 255, 255, 0.6)'
   }),
@@ -24,7 +24,7 @@ var styleArray = [new ol.style.Style({
     color: '#319FD3',
     width: 1
   })
-})];
+});
 
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
@@ -33,7 +33,7 @@ var vector = new ol.layer.Vector({
   }),
   style: function(feature, resolution) {
     // don't want to render the full world polygon, which repeats all countries
-    return feature.getId() !== undefined ? styleArray : null;
+    return feature.getId() !== undefined ? style : null;
   }
 });
 

examples/vector-esri.js

@@ -20,50 +20,42 @@ var layer = '0';
 var esrijsonFormat = new ol.format.EsriJSON();
 
 var styleCache = {
-  'ABANDONED': [
+  'ABANDONED': new ol.style.Style({
-    new ol.style.Style({
+    fill: new ol.style.Fill({
-      fill: new ol.style.Fill({
+      color: 'rgba(225, 225, 225, 255)'
-        color: 'rgba(225, 225, 225, 255)'
+    }),
-      }),
+    stroke: new ol.style.Stroke({
-      stroke: new ol.style.Stroke({
+      color: 'rgba(0, 0, 0, 255)',
-        color: 'rgba(0, 0, 0, 255)',
+      width: 0.4
-        width: 0.4
-      })
     })
-  ],
+  }),
-  'GAS': [
+  'GAS': new ol.style.Style({
-    new ol.style.Style({
+    fill: new ol.style.Fill({
-      fill: new ol.style.Fill({
+      color: 'rgba(255, 0, 0, 255)'
-        color: 'rgba(255, 0, 0, 255)'
+    }),
-      }),
+    stroke: new ol.style.Stroke({
-      stroke: new ol.style.Stroke({
+      color: 'rgba(110, 110, 110, 255)',
-        color: 'rgba(110, 110, 110, 255)',
+      width: 0.4
-        width: 0.4
-      })
     })
-  ],
+  }),
-  'OIL': [
+  'OIL': new ol.style.Style({
-    new ol.style.Style({
+    fill: new ol.style.Fill({
-      fill: new ol.style.Fill({
+      color: 'rgba(56, 168, 0, 255)'
-        color: 'rgba(56, 168, 0, 255)'
+    }),
-      }),
+    stroke: new ol.style.Stroke({
-      stroke: new ol.style.Stroke({
+      color: 'rgba(110, 110, 110, 255)',
-        color: 'rgba(110, 110, 110, 255)',
+      width: 0
-        width: 0
-      })
     })
-  ],
+  }),
-  'OILGAS': [
+  'OILGAS': new ol.style.Style({
-    new ol.style.Style({
+    fill: new ol.style.Fill({
-      fill: new ol.style.Fill({
+      color: 'rgba(168, 112, 0, 255)'
-        color: 'rgba(168, 112, 0, 255)'
+    }),
-      }),
+    stroke: new ol.style.Stroke({
-      stroke: new ol.style.Stroke({
+      color: 'rgba(110, 110, 110, 255)',
-        color: 'rgba(110, 110, 110, 255)',
+      width: 0.4
-        width: 0.4
-      })
     })
-  ]
+  })
 };
 
 var vectorSource = new ol.source.Vector({

examples/vector-labels.js

@@ -107,75 +107,66 @@ var createTextStyle = function(feature, resolution, dom) {
 
 
 // Polygons
-var createPolygonStyleFunction = function() {
+function polygonStyleFunction(feature, resolution) {
-  return function(feature, resolution) {
+  return new ol.style.Style({
-    var style = new ol.style.Style({
+    stroke: new ol.style.Stroke({
-      stroke: new ol.style.Stroke({
+      color: 'blue',
-        color: 'blue',
+      width: 1
-        width: 1
+    }),
-      }),
+    fill: new ol.style.Fill({
-      fill: new ol.style.Fill({
+      color: 'rgba(0, 0, 255, 0.1)'
-        color: 'rgba(0, 0, 255, 0.1)'
+    }),
-      }),
+    text: createTextStyle(feature, resolution, myDom.polygons)
-      text: createTextStyle(feature, resolution, myDom.polygons)
+  });
-    });
+}
-    return [style];
-  };
-};
 
 var vectorPolygons = new ol.layer.Vector({
   source: new ol.source.Vector({
     url: 'data/geojson/polygon-samples.geojson',
     format: new ol.format.GeoJSON()
   }),
-  style: createPolygonStyleFunction()
+  style: polygonStyleFunction
 });
 
 
 // Lines
-var createLineStyleFunction = function() {
+function lineStyleFunction(feature, resolution) {
-  return function(feature, resolution) {
+  return new ol.style.Style({
-    var style = new ol.style.Style({
+    stroke: new ol.style.Stroke({
-      stroke: new ol.style.Stroke({
+      color: 'green',
-        color: 'green',
+      width: 2
-        width: 2
+    }),
-      }),
+    text: createTextStyle(feature, resolution, myDom.lines)
-      text: createTextStyle(feature, resolution, myDom.lines)
+  });
-    });
+}
-    return [style];
-  };
-};
 
 var vectorLines = new ol.layer.Vector({
   source: new ol.source.Vector({
     url: 'data/geojson/line-samples.geojson',
     format: new ol.format.GeoJSON()
   }),
-  style: createLineStyleFunction()
+  style: lineStyleFunction
 });
 
 
 // Points
-var createPointStyleFunction = function() {
+function pointStyleFunction(feature, resolution) {
-  return function(feature, resolution) {
+  return new ol.style.Style({
-    var style = new ol.style.Style({
+    image: new ol.style.Circle({
-      image: new ol.style.Circle({
+      radius: 10,
-        radius: 10,
+      fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
-        fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
+      stroke: new ol.style.Stroke({color: 'red', width: 1})
-        stroke: new ol.style.Stroke({color: 'red', width: 1})
+    }),
-      }),
+    text: createTextStyle(feature, resolution, myDom.points)
-      text: createTextStyle(feature, resolution, myDom.points)
+  });
-    });
+}
-    return [style];
-  };
-};
 
 var vectorPoints = new ol.layer.Vector({
   source: new ol.source.Vector({
     url: 'data/geojson/point-samples.geojson',
     format: new ol.format.GeoJSON()
   }),
-  style: createPointStyleFunction()
+  style: pointStyleFunction
 });
 
 var map = new ol.Map({
@@ -195,15 +186,15 @@ var map = new ol.Map({
 });
 
 $('#refresh-points').click(function() {
-  vectorPoints.setStyle(createPointStyleFunction());
+  vectorPoints.setStyle(pointStyleFunction);
 });
 
 $('#refresh-lines').click(function() {
-  vectorLines.setStyle(createLineStyleFunction());
+  vectorLines.setStyle(lineStyleFunction);
 });
 
 $('#refresh-polygons').click(function() {
-  vectorPolygons.setStyle(createPolygonStyleFunction());
+  vectorPolygons.setStyle(polygonStyleFunction);
 });
 
 

examples/vector-layer.js

@@ -30,7 +30,6 @@ var style = new ol.style.Style({
     })
   })
 });
-var styles = [style];
 
 var vectorLayer = new ol.layer.Vector({
   source: new ol.source.Vector({
@@ -39,7 +38,7 @@ var vectorLayer = new ol.layer.Vector({
   }),
   style: function(feature, resolution) {
     style.getText().setText(resolution < 5000 ? feature.get('name') : '');
-    return styles;
+    return style;
   }
 });
 
@@ -65,7 +64,7 @@ var featureOverlay = new ol.layer.Vector({
   style: function(feature, resolution) {
     var text = resolution < 5000 ? feature.get('name') : '';
     if (!highlightStyleCache[text]) {
-      highlightStyleCache[text] = [new ol.style.Style({
+      highlightStyleCache[text] = new ol.style.Style({
         stroke: new ol.style.Stroke({
           color: '#f00',
           width: 1
@@ -84,7 +83,7 @@ var featureOverlay = new ol.layer.Vector({
             width: 3
           })
         })
-      })];
+      });
     }
     return highlightStyleCache[text];
   }

examples/vector-osm.js

@@ -15,75 +15,63 @@ goog.require('ol.style.Style');
 
 var styles = {
   'amenity': {
-    'parking': [
+    'parking': new ol.style.Style({
-      new ol.style.Style({
+      stroke: new ol.style.Stroke({
-        stroke: new ol.style.Stroke({
+        color: 'rgba(170, 170, 170, 1.0)',
-          color: 'rgba(170, 170, 170, 1.0)',
+        width: 1
-          width: 1
+      }),
-        }),
+      fill: new ol.style.Fill({
-        fill: new ol.style.Fill({
+        color: 'rgba(170, 170, 170, 0.3)'
-          color: 'rgba(170, 170, 170, 0.3)'
-        })
       })
-    ]
+    })
   },
   'building': {
-    '.*': [
+    '.*': new ol.style.Style({
-      new ol.style.Style({
+      zIndex: 100,
-        zIndex: 100,
+      stroke: new ol.style.Stroke({
-        stroke: new ol.style.Stroke({
+        color: 'rgba(246, 99, 79, 1.0)',
-          color: 'rgba(246, 99, 79, 1.0)',
+        width: 1
-          width: 1
+      }),
-        }),
+      fill: new ol.style.Fill({
-        fill: new ol.style.Fill({
+        color: 'rgba(246, 99, 79, 0.3)'
-          color: 'rgba(246, 99, 79, 0.3)'
-        })
       })
-    ]
+    })
   },
   'highway': {
-    'service': [
+    'service': new ol.style.Style({
-      new ol.style.Style({
+      stroke: new ol.style.Stroke({
-        stroke: new ol.style.Stroke({
+        color: 'rgba(255, 255, 255, 1.0)',
-          color: 'rgba(255, 255, 255, 1.0)',
+        width: 2
-          width: 2
-        })
       })
-    ],
+    }),
-    '.*': [
+    '.*': new ol.style.Style({
-      new ol.style.Style({
+      stroke: new ol.style.Stroke({
-        stroke: new ol.style.Stroke({
+        color: 'rgba(255, 255, 255, 1.0)',
-          color: 'rgba(255, 255, 255, 1.0)',
+        width: 3
-          width: 3
-        })
       })
-    ]
+    })
   },
   'landuse': {
-    'forest|grass|allotments': [
+    'forest|grass|allotments': new ol.style.Style({
-      new ol.style.Style({
+      stroke: new ol.style.Stroke({
-        stroke: new ol.style.Stroke({
+        color: 'rgba(140, 208, 95, 1.0)',
-          color: 'rgba(140, 208, 95, 1.0)',
+        width: 1
-          width: 1
+      }),
-        }),
+      fill: new ol.style.Fill({
-        fill: new ol.style.Fill({
+        color: 'rgba(140, 208, 95, 0.3)'
-          color: 'rgba(140, 208, 95, 0.3)'
-        })
       })
-    ]
+    })
   },
   'natural': {
-    'tree': [
+    'tree': new ol.style.Style({
-      new ol.style.Style({
+      image: new ol.style.Circle({
-        image: new ol.style.Circle({
+        radius: 2,
-          radius: 2,
+        fill: new ol.style.Fill({
-          fill: new ol.style.Fill({
+          color: 'rgba(140, 208, 95, 1.0)'
-            color: 'rgba(140, 208, 95, 1.0)'
+        }),
-          }),
+        stroke: null
-          stroke: null
-        })
       })
-    ]
+    })
   }
 };