From 1072f6dfa7efdcd8e1b8186eb792eb69ee6f43dc Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 7 Feb 2014 10:43:19 -0700 Subject: [PATCH] Use style option in vector layer examples Providing a styleFunction option still works because the layer property is still named styleFunction. --- examples/drag-and-drop.js | 2 +- examples/draw-features.js | 34 +++++++++++++++------------------- examples/geojson.js | 2 +- examples/google-map.js | 23 +++++++++-------------- examples/gpx.js | 2 +- examples/igc.js | 2 +- examples/kml-earthquakes.html | 2 +- examples/kml-earthquakes.js | 2 +- examples/kml-timezones.js | 2 +- examples/modify-features.js | 2 +- examples/rtree.js | 6 ++---- examples/select-features.js | 4 +--- examples/synthetic-lines.js | 16 ++++++---------- examples/synthetic-points.js | 2 +- examples/topojson.js | 2 +- examples/vector-layer.js | 2 +- 16 files changed, 44 insertions(+), 61 deletions(-) diff --git a/examples/drag-and-drop.js b/examples/drag-and-drop.js index 4e39605838..aa3e6f2fa9 100644 --- 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 index 19415de98f..88a09399b5 100644 --- 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 index f8146d1000..9889d08d3e 100644 --- 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 index 83c18c7016..f6dd0a6994 100644 --- 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 index 438811d93c..b0f1c9294d 100644 --- 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/igc.js b/examples/igc.js index 7ab9d9fa49..a0fd613f60 100644 --- 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/kml-earthquakes.html b/examples/kml-earthquakes.html index 4d3f2386c9..73951c9226 100644 --- a/examples/kml-earthquakes.html +++ b/examples/kml-earthquakes.html @@ -55,7 +55,7 @@

Demonstrates the use of a Shape symbolizer to render earthquake locations.

- This example parses a KML file and renders the features as a vector layer. The layer is given a styleFunction 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 style that renders earthquake locations with a size relative to their magnitude.

See the kml-earthquakes.js source to see how this is done.

diff --git a/examples/kml-earthquakes.js b/examples/kml-earthquakes.js index d4edebcc3b..4bbc80716f 100644 --- 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 index 6211b4957d..2973b637d6 100644 --- 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 index 2ed0e6aa86..5d9fa52e32 100644 --- 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() { diff --git a/examples/rtree.js b/examples/rtree.js index 7a9f184753..43e8a3d10c 100644 --- 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 index d9d5a0ca37..27b76c63a4 100644 --- a/examples/select-features.js +++ b/examples/select-features.js @@ -35,9 +35,7 @@ var vector = new ol.layer.Vector({ projection: 'EPSG:3857', url: 'data/geojson/countries.geojson' }), - styleFunction: function(feature, resolution) { - return unselectedStyle; - } + style: unselectedStyle }); var select = new ol.interaction.Select({ diff --git a/examples/synthetic-lines.js b/examples/synthetic-lines.js index 9a5dd9e4ee..789a7c2571 100644 --- 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 index 7ebd447c4b..7246fbfda1 100644 --- 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 index 0cdde09c0c..d9eb762642 100644 --- 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 index 8b36ced3a3..979b8732fb 100644 --- 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({