diff --git a/examples/modify-features.js b/examples/modify-features.js
index 0c93c7bc93..7e00bdcb5a 100644
--- a/examples/modify-features.js
+++ b/examples/modify-features.js
@@ -8,9 +8,6 @@ goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.MapQuest');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
var raster = new ol.layer.Tile({
@@ -19,27 +16,15 @@ var raster = new ol.layer.Tile({
})
});
-var source = new ol.source.GeoJSON({
- projection: 'EPSG:3857',
- url: 'data/geojson/countries.geojson'
-});
-
var vector = new ol.layer.Vector({
- source: source
-});
-
-var select = new ol.interaction.Select({
- style: new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: '#3399CC',
- width: 2.5
- }),
- fill: new ol.style.Fill({
- color: 'rgba(255,255,255,0.6)'
- })
+ source: new ol.source.GeoJSON({
+ projection: 'EPSG:3857',
+ url: 'data/geojson/countries.geojson'
})
});
+var select = new ol.interaction.Select();
+
var modify = new ol.interaction.Modify({
features: select.getFeatures()
});
diff --git a/examples/select-features.js b/examples/select-features.js
index cb4cb3b3d4..b4a4dcfdd7 100644
--- a/examples/select-features.js
+++ b/examples/select-features.js
@@ -6,10 +6,6 @@ goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.MapQuest');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
-goog.require('ol.style.Text');
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
@@ -22,35 +18,7 @@ var vector = new ol.layer.Vector({
})
});
-var styleCache = {};
-var select = new ol.interaction.Select({
- style: function(feature, resolution) {
- var text = feature.get('name');
- if (!styleCache[text]) {
- styleCache[text] = [new ol.style.Style({
- fill: new ol.style.Fill({
- color: 'rgba(255,0,0,0.3)'
- }),
- stroke: new ol.style.Stroke({
- color: 'rgba(255,0,0,1)',
- size: 2
- }),
- text: new ol.style.Text({
- font: '12px Calibri,sans-serif',
- text: text,
- fill: new ol.style.Fill({
- color: '#000'
- }),
- stroke: new ol.style.Stroke({
- color: '#fff',
- width: 3
- })
- })
- })];
- }
- return styleCache[text];
- }
-});
+var select = new ol.interaction.Select({});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select]),
diff --git a/src/ol/feature.js b/src/ol/feature.js
index debcf9d43b..e9b1e968f7 100644
--- a/src/ol/feature.js
+++ b/src/ol/feature.js
@@ -7,6 +7,7 @@ goog.require('goog.events.EventType');
goog.require('goog.functions');
goog.require('ol.Object');
goog.require('ol.geom.Geometry');
+goog.require('ol.geom.GeometryType');
goog.require('ol.style.Circle');
goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
@@ -344,3 +345,68 @@ ol.feature.createStyleFunction = function(obj) {
}
return styleFunction;
};
+
+
+/**
+ * Default styles for editing features.
+ * @return {Object.
>} Styles
+ * @todo stability experimental
+ */
+ol.feature.createDefaultEditingStyles = function() {
+ /** @type {Object.>} */
+ var styles = {};
+ 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]
+ );
+
+ return styles;
+};
diff --git a/src/ol/interaction/drawinteraction.js b/src/ol/interaction/drawinteraction.js
index 226b95bf27..d7ea269531 100644
--- a/src/ol/interaction/drawinteraction.js
+++ b/src/ol/interaction/drawinteraction.js
@@ -10,6 +10,7 @@ goog.require('ol.FeatureOverlay');
goog.require('ol.Map');
goog.require('ol.MapBrowserEvent');
goog.require('ol.MapBrowserEvent.EventType');
+goog.require('ol.feature');
goog.require('ol.geom.GeometryType');
goog.require('ol.geom.LineString');
goog.require('ol.geom.MultiLineString');
@@ -19,10 +20,6 @@ goog.require('ol.geom.Point');
goog.require('ol.geom.Polygon');
goog.require('ol.interaction.Pointer');
goog.require('ol.source.Vector');
-goog.require('ol.style.Circle');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
/**
@@ -194,53 +191,7 @@ goog.inherits(ol.interaction.Draw, ol.interaction.Pointer);
* @return {ol.feature.StyleFunction} Styles.
*/
ol.interaction.Draw.getDefaultStyleFunction = function() {
- /** @type {Object.>} */
- var styles = {};
- 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: [255, 255, 255, 1],
- width: 5
- })
- }),
- new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: [0, 153, 255, 1],
- width: 3
- })
- })
- ];
- 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: 7,
- fill: new ol.style.Fill({
- color: [0, 153, 255, 1]
- }),
- stroke: new ol.style.Stroke({
- color: [255, 255, 255, 0.75],
- width: 1.5
- })
- }),
- zIndex: 100000
- })
- ];
- styles[ol.geom.GeometryType.MULTI_POINT] =
- styles[ol.geom.GeometryType.POINT];
-
+ var styles = ol.feature.createDefaultEditingStyles();
return function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
diff --git a/src/ol/interaction/modifyinteraction.js b/src/ol/interaction/modifyinteraction.js
index 9912e44ea4..d133822d22 100644
--- a/src/ol/interaction/modifyinteraction.js
+++ b/src/ol/interaction/modifyinteraction.js
@@ -11,6 +11,7 @@ goog.require('ol.MapBrowserEvent.EventType');
goog.require('ol.ViewHint');
goog.require('ol.coordinate');
goog.require('ol.extent');
+goog.require('ol.feature');
goog.require('ol.geom.GeometryType');
goog.require('ol.geom.LineString');
goog.require('ol.geom.MultiLineString');
@@ -101,7 +102,8 @@ ol.interaction.Modify = function(options) {
* @private
*/
this.overlay_ = new ol.FeatureOverlay({
- style: options.style
+ style: (goog.isDef(options.style)) ? options.style :
+ ol.interaction.Modify.getDefaultStyleFunction()
});
/**
@@ -743,3 +745,14 @@ ol.interaction.Modify.prototype.updateSegmentIndices_ = function(
}
});
};
+
+
+/**
+ * @return {ol.feature.StyleFunction} Styles.
+ */
+ol.interaction.Modify.getDefaultStyleFunction = function() {
+ var style = ol.feature.createDefaultEditingStyles();
+ return function(feature, resolution) {
+ return style[ol.geom.GeometryType.POINT];
+ };
+};
diff --git a/src/ol/interaction/selectinteraction.js b/src/ol/interaction/selectinteraction.js
index 9e133b100d..beca54baba 100644
--- a/src/ol/interaction/selectinteraction.js
+++ b/src/ol/interaction/selectinteraction.js
@@ -5,6 +5,8 @@ goog.require('goog.functions');
goog.require('ol.Feature');
goog.require('ol.FeatureOverlay');
goog.require('ol.events.condition');
+goog.require('ol.feature');
+goog.require('ol.geom.GeometryType');
goog.require('ol.interaction.Interaction');
@@ -85,7 +87,8 @@ ol.interaction.Select = function(options) {
* @type {ol.FeatureOverlay}
*/
this.featureOverlay_ = new ol.FeatureOverlay({
- style: options.style
+ style: (goog.isDef(options.style)) ? options.style :
+ ol.interaction.Select.getDefaultStyleFunction()
});
};
@@ -177,3 +180,19 @@ ol.interaction.Select.prototype.setMap = function(map) {
goog.base(this, 'setMap', map);
this.featureOverlay_.setMap(map);
};
+
+
+/**
+ * @return {ol.feature.StyleFunction} Styles.
+ */
+ol.interaction.Select.getDefaultStyleFunction = function() {
+ var styles = ol.feature.createDefaultEditingStyles();
+ goog.array.extend(styles[ol.geom.GeometryType.POLYGON],
+ styles[ol.geom.GeometryType.LINE_STRING]);
+ goog.array.extend(styles[ol.geom.GeometryType.GEOMETRY_COLLECTION],
+ styles[ol.geom.GeometryType.LINE_STRING]);
+
+ return function(feature, resolution) {
+ return styles[feature.getGeometry().getType()];
+ };
+};