Use FeaturesOverlay in vector-layer example

This demonstrates how to use ol.FeaturesOverlay for feature highlighting.

examples/vector-layer.html

@@ -36,7 +36,7 @@
           <div id="docs">
             <p>See the <a href="vector-layer.js" target="_blank">vector-layer.js source</a> to see how this is done.</p>
           </div>
-          <div id="tags">vector, geojson, style</div>
+          <div id="tags">vector, geojson, style, features overlay</div>
         </div>
         <div class="span4 offset4">
           <div id="info" class="alert alert-success">

examples/vector-layer.js

@@ -3,6 +3,7 @@ goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
+goog.require('ol.render.FeaturesOverlay');
 goog.require('ol.source.GeoJSON');
 goog.require('ol.source.MapQuestOpenAerial');
 goog.require('ol.style.Fill');
@@ -44,9 +45,25 @@ var map = new ol.Map({
   })
 });
 
+var highlightStyleArray = [new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    color: '#f00',
+    width: 1
+  }),
+  fill: new ol.style.Fill({
+    color: 'rgba(255,0,0,0.1)'
+  })
+})];
+
+var featuresOverlay = new ol.render.FeaturesOverlay({
+  map: map,
+  styleFunction: function(feature, resolution) {
+    return highlightStyleArray;
+  }
+});
+
 var highlight;
 var displayFeatureInfo = function(pixel) {
-  var oldHighlight = highlight;
 
   var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
     return feature;
@@ -59,11 +76,16 @@ var displayFeatureInfo = function(pixel) {
     info.innerHTML = ' ';
   }
 
-  highlight = feature;
-
-  if (highlight !== oldHighlight) {
-    map.requestRenderFrame();
+  if (feature !== highlight) {
+    if (highlight) {
+      featuresOverlay.removeFeature(highlight);
+    }
+    if (feature) {
+      featuresOverlay.addFeature(feature);
+    }
+    highlight = feature;
   }
+
 };
 
 $(map.getViewport()).on('mousemove', function(evt) {
@@ -75,20 +97,3 @@ map.on('singleclick', function(evt) {
   var pixel = evt.getPixel();
   displayFeatureInfo(pixel);
 });
-
-var highlightStyle = new ol.style.Style({
-  stroke: new ol.style.Stroke({
-    color: '#f00',
-    width: 1
-  }),
-  fill: new ol.style.Fill({
-    color: 'rgba(255,0,0,0.1)'
-  })
-});
-
-map.on('postcompose', function(evt) {
-  if (highlight) {
-    var render = evt.getRender();
-    render.drawFeature(highlight, highlightStyle);
-  }
-});