Share editing default styles

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({
+var vector = new ol.layer.Vector({
+  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)'
-    })
   })
 });
 
+var select = new ol.interaction.Select();
+
 var modify = new ol.interaction.Modify({
   features: select.getFeatures()
 });

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({});
-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 map = new ol.Map({
   interactions: ol.interaction.defaults().extend([select]),

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.<ol.geom.GeometryType, Array.<ol.style.Style>>} Styles
+ * @todo stability experimental
+ */
+ol.feature.createDefaultEditingStyles = function() {
+  /** @type {Object.<ol.geom.GeometryType, Array.<ol.style.Style>>} */
+  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;
+};

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.<ol.geom.GeometryType, Array.<ol.style.Style>>} */
+  var styles = ol.feature.createDefaultEditingStyles();
-  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];
-
   return function(feature, resolution) {
     return styles[feature.getGeometry().getType()];
   };

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];
+  };
+};

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()];
+  };
+};