Merge pull request #1690 from tschaub/style

Accept a style option and provide setStyle and getStyle methods.
openlayers · Feb 14, 2014 · a549df4 · a549df4
2 parents d71ccf6 + e9b4e42
commit a549df4
Show file tree

Hide file tree

Showing 31 changed files with 575 additions and 190 deletions.
diff --git a/examples/drag-and-drop-image-vector.js b/examples/drag-and-drop-image-vector.js
@@ -121,7 +121,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
   map.getLayers().push(new ol.layer.Image({
     source: new ol.source.ImageVector({
       source: vectorSource,
-      styleFunction: styleFunction
+      style: styleFunction
     })
   }));
   var view2D = map.getView().getView2D();

diff --git a/examples/drag-and-drop.js b/examples/drag-and-drop.js
@@ -118,7 +118,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
   });
   map.getLayers().push(new ol.layer.Vector({
     source: vectorSource,
-    styleFunction: styleFunction
+    style: styleFunction
   }));
   var view2D = map.getView().getView2D();
   view2D.fitExtent(vectorSource.getExtent(), map.getSize());

diff --git a/examples/draw-features.js b/examples/draw-features.js
@@ -15,29 +15,25 @@ var raster = new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'sat'})
 });
 
-var styleArray = [new ol.style.Style({
-  fill: new ol.style.Fill({
-    color: 'rgba(255, 255, 255, 0.2)'
-  }),
-  stroke: new ol.style.Stroke({
-    color: '#ffcc33',
-    width: 2
-  }),
-  image: new ol.style.Circle({
-    radius: 7,
-    fill: new ol.style.Fill({
-      color: '#ffcc33'
-    })
-  })
-})];
-
 var source = new ol.source.Vector();
 
 var vector = new ol.layer.Vector({
   source: source,
-  styleFunction: function(feature, resolution) {
-    return styleArray;
-  }
+  style: new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 255, 255, 0.2)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#ffcc33',
+      width: 2
+    }),
+    image: new ol.style.Circle({
+      radius: 7,
+      fill: new ol.style.Fill({
+        color: '#ffcc33'
+      })
+    })
+  })
 });
 
 var map = new ol.Map({

diff --git a/examples/geojson.js b/examples/geojson.js
@@ -177,7 +177,7 @@ vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
 
 var vectorLayer = new ol.layer.Vector({
   source: vectorSource,
-  styleFunction: styleFunction
+  style: styleFunction
 });
 
 var map = new ol.Map({

diff --git a/examples/google-map.js b/examples/google-map.js
@@ -34,20 +34,15 @@ google.maps.event.addListenerOnce(gmap, 'tilesloaded', function() {
       url: 'data/geojson/countries.geojson',
       projection: 'EPSG:3857'
     }),
-    styleFunction: (function() {
-      var styleArray = [new ol.style.Style({
-        fill: new ol.style.Fill({
-          color: 'rgba(255, 255, 255, 0.6)'
-        }),
-        stroke: new ol.style.Stroke({
-          color: '#319FD3',
-          width: 1
-        })
-      })];
-      return function(feature, resolution) {
-        return styleArray;
-      };
-    }())
+    style: new ol.style.Style({
+      fill: new ol.style.Fill({
+        color: 'rgba(255, 255, 255, 0.6)'
+      }),
+      stroke: new ol.style.Stroke({
+        color: '#319FD3',
+        width: 1
+      })
+    })
   });
 
   var center = gmap.getCenter();

diff --git a/examples/gpx.js b/examples/gpx.js
@@ -48,7 +48,7 @@ var vector = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/gpx/fells_loop.gpx'
   }),
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     return style[feature.getGeometry().getType()];
   }
 });

diff --git a/examples/icon.js b/examples/icon.js
@@ -18,19 +18,17 @@ var iconFeature = new ol.Feature({
   rainfall: 500
 });
 
-var styleArray = [new ol.style.Style({
+var iconStyle = new ol.style.Style({
   image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
     src: 'data/icon.png'
   }))
-})];
-
-iconFeature.setStyleFunction(function(resolution) {
-  return styleArray;
 });
 
+iconFeature.setStyle(iconStyle);
+
 var vectorSource = new ol.source.Vector({
   features: [iconFeature]
 });

diff --git a/examples/igc.js b/examples/igc.js
@@ -63,7 +63,7 @@ var map = new ol.Map({
     }),
     new ol.layer.Vector({
       source: vectorSource,
-      styleFunction: styleFunction
+      style: styleFunction
     })
   ],
   renderer: 'canvas',

diff --git a/examples/image-vector-layer.js b/examples/image-vector-layer.js
@@ -11,16 +11,6 @@ goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
-var styleArray = [new ol.style.Style({
-  fill: new ol.style.Fill({
-    color: 'rgba(255, 255, 255, 0.6)'
-  }),
-  stroke: new ol.style.Stroke({
-    color: '#319FD3',
-    width: 1
-  })
-})];
-
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
@@ -32,9 +22,15 @@ var map = new ol.Map({
           projection: 'EPSG:3857',
           url: 'data/geojson/countries.geojson'
         }),
-        styleFunction: function(feature, resolution) {
-          return styleArray;
-        }
+        style: new ol.style.Style({
+          fill: new ol.style.Fill({
+            color: 'rgba(255, 255, 255, 0.6)'
+          }),
+          stroke: new ol.style.Stroke({
+            color: '#319FD3',
+            width: 1
+          })
+        })
       })
     })
   ],
@@ -46,21 +42,17 @@ var map = new ol.Map({
   })
 });
 
-var highlightStyleArray = [new ol.style.Style({
-  stroke: new ol.style.Stroke({
-    color: '#f00',
-    width: 1
-  }),
-  fill: new ol.style.Fill({
-    color: 'rgba(255,0,0,0.1)'
-  })
-})];
-
 var featureOverlay = new ol.FeatureOverlay({
   map: map,
-  styleFunction: function(feature, resolution) {
-    return highlightStyleArray;
-  }
+  style: new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#f00',
+      width: 1
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(255,0,0,0.1)'
+    })
+  })
 });
 
 var highlight;

diff --git a/examples/kml-earthquakes.html b/examples/kml-earthquakes.html
@@ -55,7 +55,7 @@ <h4 id="title">Earthquakes in KML</h4>
           <p id="shortdesc">Demonstrates the use of a Shape symbolizer to render earthquake locations.</p>
           <div id="docs">
             <p>
-              This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>styleFunction</code> that renders earthquake locations with a size relative to their magnitude.
+              This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>style</code> that renders earthquake locations with a size relative to their magnitude.
             </p>
             <p>See the <a href="kml-earthquakes.js" target="_blank">kml-earthquakes.js source</a> to see how this is done.</p>
           </div>

diff --git a/examples/kml-earthquakes.js b/examples/kml-earthquakes.js
@@ -42,7 +42,7 @@ var vector = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/kml/2012_Earthquakes_Mag5.kml'
   }),
-  styleFunction: styleFunction
+  style: styleFunction
 });
 
 var raster = new ol.layer.Tile({

diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js
@@ -49,7 +49,7 @@ var vector = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/kml/timezones.kml'
   }),
-  styleFunction: styleFunction
+  style: styleFunction
 });
 
 var raster = new ol.layer.Tile({

diff --git a/examples/modify-features.js b/examples/modify-features.js
@@ -161,7 +161,7 @@ var vectorSource = new ol.source.GeoJSON(
 
 var vectorLayer = new ol.layer.Vector({
   source: vectorSource,
-  styleFunction: styleFunction
+  style: styleFunction
 });
 
 var overlayStyle = (function() {
@@ -228,7 +228,7 @@ var overlayStyle = (function() {
 })();
 
 var overlay = new ol.FeatureOverlay({
-  styleFunction: overlayStyle
+  style: overlayStyle
 });
 
 var modify = new ol.interaction.Modify({ featureOverlay: overlay });

diff --git a/examples/rtree.js b/examples/rtree.js
@@ -83,16 +83,14 @@ for (i = 0, ii = extentsByDepth.length; i < ii; ++i) {
 
 var vector = new ol.layer.Vector({
   source: vectorSource,
-  styleFunction: function(feature, resolution) {
-    return styleArray;
-  }
+  style: styleArray
 });
 
 var rtree = new ol.layer.Vector({
   source: new ol.source.Vector({
     features: rtreeExtentFeatures
   }),
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     return feature.get('styleArray');
   }
 });

diff --git a/examples/select-features.js b/examples/select-features.js
@@ -15,36 +15,28 @@ var raster = new ol.layer.Tile({
   source: new ol.source.MapQuest({layer: 'sat'})
 });
 
-var unselectedStyle = [new ol.style.Style({
-  fill: new ol.style.Fill({
-    color: 'rgba(255,255,255,0.25)'
-  }),
-  stroke: new ol.style.Stroke({
-    color: '#6666ff'
-  })
-})];
-
-var selectedStyle = [new ol.style.Style({
-  fill: new ol.style.Fill({
-    color: 'rgba(255,255,255,0.5)'
-  })
-})];
-
 var vector = new ol.layer.Vector({
   source: new ol.source.GeoJSON({
     projection: 'EPSG:3857',
     url: 'data/geojson/countries.geojson'
   }),
-  styleFunction: function(feature, resolution) {
-    return unselectedStyle;
-  }
+  style: new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255,255,255,0.25)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#6666ff'
+    })
+  })
 });
 
 var select = new ol.interaction.Select({
   featureOverlay: new ol.FeatureOverlay({
-    styleFunction: function(feature, resolution) {
-      return selectedStyle;
-    }
+    style: new ol.style.Style({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,255,255,0.5)'
+      })
+    })
   })
 });
 

diff --git a/examples/synthetic-lines.js b/examples/synthetic-lines.js
@@ -36,20 +36,16 @@ for (i = 0; i < count; ++i) {
   startPoint = endPoint;
 }
 
-var styleArray = [new ol.style.Style({
-  stroke: new ol.style.Stroke({
-    color: '#666666',
-    width: 1
-  })
-})];
-
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
     features: features
   }),
-  styleFunction: function(feature, resolution) {
-    return styleArray;
-  }
+  style: new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#666666',
+      width: 1
+    })
+  })
 });
 
 var view = new ol.View2D({

diff --git a/examples/synthetic-points.js b/examples/synthetic-points.js
@@ -46,7 +46,7 @@ var vectorSource = new ol.source.Vector({
 });
 var vector = new ol.layer.Vector({
   source: vectorSource,
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     return styles[feature.get('size')];
   }
 });

diff --git a/examples/topojson.js b/examples/topojson.js
@@ -30,7 +30,7 @@ var vector = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/topojson/world-110m.json'
   }),
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     // don't want to render the full world polygon, which repeats all countries
     return feature.getId() !== undefined ? styleArray : null;
   }

diff --git a/examples/vector-layer.js b/examples/vector-layer.js
@@ -17,7 +17,7 @@ var vectorLayer = new ol.layer.Vector({
     projection: 'EPSG:3857',
     url: 'data/geojson/countries.geojson'
   }),
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     var text = resolution < 5000 ? feature.get('name') : '';
     if (!styleCache[text]) {
       styleCache[text] = [new ol.style.Style({
@@ -64,7 +64,7 @@ var highlightStyleCache = {};
 
 var featureOverlay = new ol.FeatureOverlay({
   map: map,
-  styleFunction: function(feature, resolution) {
+  style: function(feature, resolution) {
     var text = resolution < 5000 ? feature.get('name') : '';
     if (!highlightStyleCache[text]) {
       highlightStyleCache[text] = [new ol.style.Style({