Update select-features example styles

examples/select-features.js

@@ -9,6 +9,7 @@ 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'})
@@ -18,23 +19,37 @@ var vector = new ol.layer.Vector({
   source: new ol.source.GeoJSON({
     projection: 'EPSG:3857',
     url: 'data/geojson/countries.geojson'
-  }),
-  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 styleCache = {};
 var select = new ol.interaction.Select({
-  style: new ol.style.Style({
-    fill: new ol.style.Fill({
-      color: 'rgba(255,255,255,0.5)'
-    })
-  })
+  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({