Separate stroke and fill

examples/getfeatureinfo.js

@@ -6,7 +6,7 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.GeoJSON');
 goog.require('ol.source.TiledWMS');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Polygon');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Rule');
 goog.require('ol.style.Style');
 
@@ -26,8 +26,8 @@ var vector = new ol.layer.Vector({
   style: new ol.style.Style({rules: [
     new ol.style.Rule({
       symbolizers: [
-        new ol.style.Polygon({
-          strokeColor: '#bada55'
+        new ol.style.Fill({
+          color: '#bada55'
         })
       ]
     })

examples/gml.js

@@ -6,7 +6,7 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.ogc.GML_v3');
 goog.require('ol.source.MapQuestOpenAerial');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Polygon');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Rule');
 goog.require('ol.style.Style');
 
@@ -22,8 +22,8 @@ var vector = new ol.layer.Vector({
   style: new ol.style.Style({rules: [
     new ol.style.Rule({
       symbolizers: [
-        new ol.style.Polygon({
-          strokeColor: '#bada55'
+        new ol.style.Fill({
+          color: '#bada55'
         })
       ]
     })

examples/kml-timezones.js

@@ -7,8 +7,9 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.KML');
 goog.require('ol.source.Stamen');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Polygon');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Rule');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
@@ -43,10 +44,12 @@ ol.expr.register('getOpacity', function() {
 var style = new ol.style.Style({rules: [
   new ol.style.Rule({
     symbolizers: [
-      new ol.style.Polygon({
-        strokeColor: '#ffffff',
-        fillColor: '#ffff33',
-        fillOpacity: ol.expr.parse('getOpacity()')
+      new ol.style.Fill({
+        color: '#ffff33',
+        opacity: ol.expr.parse('getOpacity()')
+      }),
+      new ol.style.Stroke({
+        color: '#ffffff',
       })
     ]
   })

examples/style-rules.js

@@ -7,9 +7,10 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.GeoJSON');
 goog.require('ol.proj');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Line');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Rule');
 goog.require('ol.style.Shape');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 goog.require('ol.style.Text');
 
@@ -18,25 +19,25 @@ var style = new ol.style.Style({rules: [
   new ol.style.Rule({
     filter: 'where == "outer"',
     symbolizers: [
-      new ol.style.Line({
-        strokeColor: ol.expr.parse('color'),
-        strokeWidth: 4,
-        strokeOpacity: 1
+      new ol.style.Stroke({
+        color: ol.expr.parse('color'),
+        width: 4,
+        opacity: 1
       })
     ]
   }),
   new ol.style.Rule({
     filter: 'where == "inner"',
     symbolizers: [
-      new ol.style.Line({
-        strokeColor: '#013',
-        strokeWidth: 4,
-        strokeOpacity: 1
+      new ol.style.Stroke({
+        color: '#013',
+        width: 4,
+        opacity: 1
       }),
-      new ol.style.Line({
-        strokeColor: ol.expr.parse('color'),
-        strokeWidth: 2,
-        strokeOpacity: 1
+      new ol.style.Stroke({
+        color: ol.expr.parse('color'),
+        width: 2,
+        opacity: 1
       })
     ]
   }),
@@ -45,7 +46,7 @@ var style = new ol.style.Style({rules: [
     symbolizers: [
       new ol.style.Shape({
         size: 40,
-        fillColor: '#013'
+        fill: new ol.style.Fill({color: '#013'})
       }),
       new ol.style.Text({
         color: '#bada55',

examples/topojson.js

@@ -6,8 +6,9 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.TopoJSON');
 goog.require('ol.source.TileJSON');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Polygon');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Rule');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
@@ -25,12 +26,14 @@ var vector = new ol.layer.Vector({
   style: new ol.style.Style({rules: [
     new ol.style.Rule({
       symbolizers: [
-        new ol.style.Polygon({
-          fillColor: '#BADA55',
-          fillOpacity: 0.5,
-          strokeColor: '#FFF',
-          strokeOpacity: 1,
-          strokeWidth: 1.5
+        new ol.style.Fill({
+          color: '#BADA55',
+          opacity: 0.5
+        }),
+        new ol.style.Stroke({
+          color: '#FFF',
+          opacity: 1,
+          width: 1.5
         })
       ]
     })

examples/vector-layer.js

@@ -7,8 +7,9 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.GeoJSON');
 goog.require('ol.source.MapQuestOpenAerial');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Polygon');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Rule');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 goog.require('ol.style.Text');
 
@@ -30,11 +31,13 @@ var vector = new ol.layer.Vector({
   style: new ol.style.Style({rules: [
     new ol.style.Rule({
       symbolizers: [
-        new ol.style.Polygon({
-          strokeColor: '#319FD3',
-          strokeOpacity: 1,
-          fillColor: '#ffffff',
-          fillOpacity: 0.6
+        new ol.style.Fill({
+          color: '#ffffff',
+          opacity: 0.6
+        }),
+        new ol.style.Stroke({
+          color: '#319FD3',
+          opacity: 1
         })
       ]
     }),