issue with overrideStyleFunction on MVT layer (same style applied to all features)

[niconoe]

Hello,

To style individual features (based on the subject attribute of the feature), I wrote an overrideStyleFunction such as:

const overrideStyleFunctionSimple = (feature, currentStyle) => {
  const subject = feature.get("subject");
  
  let markerColor: string;

  if (subject === "MAN") {
    markerColor = "rgb(255, 0, 0)";
  } else {
    markerColor = "rgb(0, 255, 0)";
  }

  currentStyle.getImage().getFill().setColor(markerColor)

  return currentStyle;
}

Which is configured like this:

<ol-vector-tile-layer ref="simpleLayer" :minZoom="switchAtZoomLevel">
      <ol-source-vector-tile :format="mvtFormat"/>
      <ol-style :overrideStyleFunction="overrideStyleFunctionSimple">
        <ol-style-circle :radius="7"/>
      </ol-style>
 </ol-vector-tile-layer>

If I add console.log() statements, I can clearly see that overrideStyleFunctionSimple() is called multiple times and runs both branches of the if, depending on the value of subject. However, all drawn features have the same color (red or green). Sometimes everything is green, sometimes everything is red (I guess it applies the color from the last execution of the function to ALL features).

Thanks a lot!

[bitblitz4use]

Affected version: 11.2.1

Not sure if this is the same root cause but I am also having problems with setting the color of my features.
I try to pass it to the Icon class with no effect on Icon file:

const getMarkerStyle = (color) => {
return new Style({
image: new Icon({
anchor: [0.5, 1],
src: "/src/assets/map-marker.svg",
scale: 0.2,
color: color,
}),
});
};

If I log the features I also see that the color is correctly passed to the function.