title: OpenLayers MVT layers and setting a style
body: <p>How do you style a feature on a feature in an MVT tile layer? </p>
  
  <p>I tried a ton of stuff that work on geoJSON layers (like if I simply change to geoJSON) but the MVT equivalent doesn't which is no good because the geoJSON layer is 89MB and the MVT is 3MB.</p>
  
  <p>Here's what I did: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> var stySimple = new ol.style.Style({
        fill: new ol.style.Fill({
         color: 'transparent' //#ADD8E6'
        }),
        stroke: new ol.style.Stroke({
         color: '#880000',
         width: 1
        })
       });
       
       var styleClick = new ol.style.Style({
        fill: new ol.style.Fill({
         color: '#ADD8E6'
        }),
        stroke: new ol.style.Stroke({
         color: '#008800',
         width: 2
        })
       });
          
          
            var layer = 'aw:gis_hucs';
       var huclayer = new ol.layer.VectorTile({
        style: stySimple,
        source: new ol.source.VectorTile({
  
  
         tilePixelRatio: 1, // oversampling when &gt; 1
         tileGrid: ol.tilegrid.createXYZ({
          maxZoom: 19
         }),
         format: new ol.format.MVT({featureClass: ol.Feature}),
         url: 'http://geo.host.org:8080/geoserver/gwc/service/tms/1.0.0/' + layer + '@EPSG%3A' + projection_epsg_no + '@pbf/{z}/{x}/{-y}.pbf'
        })
       });
          
           var map = new ol.Map({
        target: 'map',
        layers: [
        huclayer
        ],
        view: new ol.View({
         center: ol.proj.fromLonLat([-84.32470703125, 33.8799896240234]),
         zoom: 7
        })
       });
          
          
           hoverInteraction = new ol.interaction.Select({
        condition: ol.events.condition.pointerMove,
        layers: [huclayer], 
        style: styleClick /****** NO BUENO 1 */
       });
      
      map.on('click', function(e) {
         var features = [];
        
        map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
         features.push(feature);
        });
         
       features.forEach(function(cv)
        {
        cv.setStyle(styleClick); /****** NO BUENO 2 */
        }
       );
      });
       
      
       map.addInteraction(hoverInteraction);
       hoverInteraction.on('select', function(e) {
        
        
       
        if (e.deselected) e.deselected.forEach(function(cv) {
          cv.setStyle(null);
         });
        if (e.selected) e.selected.forEach(function(cv) {
          cv.setStyle(styleClick); /****** NO BUENO 3 */
         });
        console.log(e);
       });
          
         </code></pre>
  </div>
  </div>
  </p>
  
  <p>I am pretty dejected, depressed and frustrated. How are you supposed to set the style on features on an MVT layer?</p>
  
  <p>OL is 4.1.12
  Geoserver is 2.11</p>
  
  <p>I get a good representation of the layer I am trying to interact with but absolutely no dynamic styling on a feature by feature basis. I see no way that I can do it dynamically despite posts suggesting otherwise. There are also posts that suggest you can't set a style on a feature that is on an MVT layer but no documentation that references it. I don't get any errors, I have done quite a bit of simplifying my code above to make it easy to see but a jsfiddle would require a live MVT layer which I can't produce and don't know where one lives. </p>
  
  <p>The selection interaction does give me a good list of active and inactive features. What's the point if you can't make it show what is selected?</p>