Attaching style to feature after drawing

Question

I am using ol.Interaction.Draw to draw polygons atop a map. I want to style the individual features after they're drawn.

When I detect a DRAWEND event, I try to attach a style to the last feature drawn, but only the general layer styling appears onscreen, although I see it when I search in the feature itself via the debugger.

map.addInteraction( drawInter = new ol.interaction.Draw({           
                features: drawLayer.getFeatures(),                      
                type: "Polygon" 
                })                                                  
            );

drawInter.on('drawend', function(e) {                           
    var style = new ol.style.Style({                                    
        fill: new ol.style.Fill({ color: newColor })
        });

    var features = drawLayer.getFeatures().getArray();                  
    var last = features.length-1;
    features[last].setStyle(style); 
});

Gamy

Answer 1

The feature you call setStyle on is not the one that was just drawn. This is why the feature that was just drawn doesn't have the expected style. (And given your code I am actually surprised the feature persists on the map when the drawing is finished.)

Your code is incorrect/strange in multiple ways:

• Reading your code it sounds like you think that each call to getFeatures on the vector layer returns the same array. It's not the case. Each call to getFeatures actually returns a new array.

• You pass an array of features to the Draw interaction (through the features option). This is incorrect. The features option should an ol.Collection.

• In the drawend callback the event object (e in your code) includes a reference to the drawn feature (e.feature).

So, if you want to persist the drawn features into a vector layer, you can use the following:

var draw = new ol.interaction.Draw({
  type: 'Polygon',
  source: drawLayer.getSource()
});

draw.on('drawend', function(e) {
  var style = new ol.style.Style({
    // ...
  });
  e.feature.setStyle(style);
});

map.addInteraction(draw);

Aoristic

I was working off off the Draw and modify features example on the site, and have defined my layer like this: drawLayer=new ol.FeatureOverlay({ source: new ol.source.Vector() } ); and this yields an error using the 'source: drawLayer.getSource() method. – Gamy

UPDATE: I changed the drawlayer initialization to: drawLayer=new ol.layer.Vector({ source: new ol.source.Vector() }); map.addLayer(this.drawLayer) and I can style the feature now, but when I add the modifyInteraction: map.addInteraction( this.modifyInter=new ol.interaction.Modify({y source: drawLayer.getSource() I get an error whenever this code is loaded: Uncaught TypeError: Cannot read property 'forEach' of undefined at ol-debug.js:90285 – Gamy

This is a different problem. The Modify interaction requires an ol.Collection, specified through the features option. This collection includes the candidates for modification. – Aoristic