Openlayers styles not applying correctly

So im trying to color some features in an openlayers vector, for that im using a function in the vectorlayer style property. Said function uses a constant style defined above as a starting point and according to the feature properties it should either apply the color the feature has stored or the default.

I understand that when I use the const reference im editing the same item in every call but what doesn´t make sense to me is that it works as expected.

But then when I toggle the colors off they keep the color from the last call. Why?

Starting point:

When first clicked, does what i want but shouldn't it instead apply only the last color?

When clicked again I wanted it to return to the starting point but instead it keeps the last color.

I have a working stackblitz here: https://stackblitz.com/edit/typescript-wc1d1o?file=index.ts

You don't change the color back to its initial value when showColor is false.

You can change the scope of geomStyle. In your code it is defined in the global scope. You can move the initialization of geomStyle into the setFeatureStyle function.

function setFeatureStyle(feature: FeatureLike): Style {
  const geomStyle = new Style({
    stroke: new Stroke({
      color: '#3399CC',
      width: 5,
    }),
  });

  const showColor = feature.get('showcolor');

  if (showColor) {
    const paramColor = feature.get('color');
    geomStyle.getStroke().setColor(paramColor);
  }
  
  return geomStyle;
}

The disadvantage on this approach is that multiple instances of Style are created.

You can also reset the stroke color to its initial value.

function setFeatureStyle(feature: FeatureLike): Style {
  const showColor = feature.get('showcolor');

  if (showColor) {
    const paramColor = feature.get('color');
    geomStyle.getStroke().setColor(paramColor);
  } else {
    geomStyle.getStroke().setColor("#3399CC");
  }

  return geomStyle;
}

The disadvantage on this approach is that you are having side effects which makes the styling unpredictable.

You can get the best of both solutions by changing your style function to something like this.

function createStyleFunction() {
  const geomStyle = new Style({
    stroke: new Stroke({
      width: 5,
    }),
  });
  const fallbackColor = '#3399CC';

  // Return the actual style function
  return (feature: FeatureLike) => {
    const showColor = feature.get('showcolor');

    if (showColor) {
      const paramColor = feature.get('color');
      geomStyle.getStroke().setColor(paramColor);
    } else {
      geomStyle.getStroke().setColor(fallbackColor);
    }

    return geomStyle;
  }
}

// Call the `createStyleFunction`
const map = new Map({
  layers: [
    new VectorLayer({
      source: new VectorSource(),
      style: createStyleFunction()
    })
  ]
});

In this approach you create a new scope where geomStyle is defined. It is only initialized ones and is then reused on each feature.