Use closure for styles & fix case

examples/modify-features.js

@@ -21,58 +21,52 @@ var raster = new ol.layer.Tile({
   })
 });
 
-var image = new ol.style.Circle({
+var styleFunction = (function() {
-  radius: 5,
+  var styles = {};
-  fill: null,
+  var image = new ol.style.Circle({
-  stroke: new ol.style.Stroke({color: 'orange', width: 2})
+    radius: 5,
-});
+    fill: null,
-
+    stroke: new ol.style.Stroke({color: 'orange', width: 2})
-var styleFunction = function(feature) {
+  });
-  switch (feature.getGeometry().getType()) {
+  styles['Point'] = [new ol.style.Style({image: image})];
-    case 'Point':
+  styles['Polygon'] = [new ol.style.Style({
-      return [new ol.style.Style({
+    stroke: new ol.style.Stroke({
-        image: image
+      color: 'blue',
-      })];
+      width: 3
-    case 'Polygon':
+    }),
-      return [new ol.style.Style({
+    fill: new ol.style.Fill({
-        stroke: new ol.style.Stroke({
+      color: 'rgba(0, 0, 255, 0.1)'
-          color: 'blue',
+    })
-          width: 3
+  })];
-        }),
+  styles['MultiLinestring'] = [new ol.style.Style({
-        fill: new ol.style.Fill({
+    stroke: new ol.style.Stroke({
-          color: 'rgba(0, 0, 255, 0.1)'
+      color: 'green',
-        })
+      width: 3
-      })];
+    })
-    case 'MultiLineString':
+  })];
-      return [new ol.style.Style({
+  styles['MultiPolygon'] = [new ol.style.Style({
-        stroke: new ol.style.Stroke({
+    stroke: new ol.style.Stroke({
-          color: 'green',
+      color: 'yellow',
-          width: 3
+      width: 1
-        })
+    }),
-      })];
+    fill: new ol.style.Fill({
-    case 'MultiPolygon':
+      color: 'rgba(255, 255, 0, 0.1)'
-      return [new ol.style.Style({
+    })
-        stroke: new ol.style.Stroke({
+  })];
-          color: 'yellow',
+  styles['default'] = [new ol.style.Style({
-          width: 1
+    stroke: new ol.style.Stroke({
-        }),
+      color: 'red',
-        fill: new ol.style.Fill({
+      width: 3
-          color: 'rgba(255, 255, 0, 0.1)'
+    }),
-        })
+    fill: new ol.style.Fill({
-      })];
+      color: 'rgba(255, 0, 0, 0.1)'
-    default:
+    }),
-      return [new ol.style.Style({
+    image: image
-        stroke: new ol.style.Stroke({
+  })];
-          color: 'red',
+  return function(feature, resolution) {
-          width: 3
+    return styles[feature.getGeometry().getType()] || styles['default'];
-        }),
+  };
-        fill: new ol.style.Fill({
+})();
-          color: 'rgba(255, 0, 0, 0.1)'
-        }),
-        image: image
-      })];
-  }
-};
 
 var vectorSource = new ol.source.GeoJSON(
     /** @type {olx.source.GeoJSONOptions} */ ({
@@ -165,7 +159,7 @@ var vectorLayer = new ol.layer.Vector({
 
 var overlayStyle = (function() {
   var styles = {};
-  styles['polygon'] = [
+  styles['Polygon'] = [
     new ol.style.Style({
       fill: new ol.style.Fill({
         color: [255, 255, 255, 0.5]
@@ -184,9 +178,9 @@ var overlayStyle = (function() {
       })
     })
   ];
-  styles['multipolygon'] = styles['polygon'];
+  styles['MultiPolygon'] = styles['Polygon'];
 
-  styles['linestring'] = [
+  styles['LineString'] = [
     new ol.style.Style({
       stroke: new ol.style.Stroke({
         color: [255, 255, 255, 1],
@@ -200,9 +194,9 @@ var overlayStyle = (function() {
       })
     })
   ];
-  styles['multilinestring'] = styles['linestring'];
+  styles['MultiLineString'] = styles['LineString'];
 
-  styles['point'] = [
+  styles['Point'] = [
     new ol.style.Style({
       image: new ol.style.Circle({
         radius: 7,
@@ -217,9 +211,9 @@ var overlayStyle = (function() {
       zIndex: 100000
     })
   ];
-  styles['multipoint'] = styles['point'];
+  styles['MultiPoint'] = styles['Point'];
 
-  styles['geometrycollection'] = styles['polygon'].concat(styles['point']);
+  styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);
 
   return function(feature, resolution) {
     return styles[feature.getGeometry().getType()];