I continue working on the style classification of GeoJSON features based on the selection in a select html. The function that defines a general style classified by colors works without problem if i add the style to the vectPointLayer like a Style: …

// general style function based on a feature
var style = new Style({
    image: new CircleStyle({
        stroke: new Stroke({color: '#000000', width: 1}),
        fill: new Fill(),
        radius: 4,
    }),
});

var puntStyle = function(feature){
    var value = feature.get('sun');
    var color = value.includes('GARDEN') ? '#ffffff' :
                value.includes('HOUSE') ? '#ff7f7f' :
                value.includes('CHAPEL') ? '#ff0000' :
                value.includes('TOMB') ? '#7F0000' : '#3F0000';
    var fill = style.getImage().getFill();
    fill.setColor(color);
    style.getImage().setFill(fill);
    return style;
}

The problem comes when I call the defined style function, with the different classifications, from the “ALL” option from the select HTML, for the other features I defined several styles… I tried this:

// SELECT HTML
<select id="hit">
    <option value="ALL">ALL</option>
    <option value="GARDEN">Garden</option>
    <option value="HOUSE">House</option>
    <option value="CHAPEL" selected>Chapel</option>
    <option value="TOMB">Tomb</option>
</select>

// JS
const vectPointLayer = new VectorLayer({
    source: new VectorSource({
        url: 'geo_points.json',
        format: new GeoJSON(),
    }),
    //style: puntStyle,
    visible:true,
    active:true,
    projection: 'EPSG:3857',
    style: function(feature){
        if(feature.get('sun') === selecthit.value){
            if(selecthit.value === 'GARDEN'){
                return gStyle;
            }else if(selecthit.value === 'HOUSE'){
                return hStyle
            }else if(selecthit.value === 'CHAPEL'){
                return cStyle
            }else if(selecthit.value === 'TOMB'){
                return tStyle
            }
        }else{
            if(selecthit.value === 'ALL'){
                return puntStyle
            }
        }
    },
});

selecthit.addEventListener('change', function(){
    vectPointLayer.changed();
}); 

that’s when I get the error. Error:

vector.js:113 Uncaught 
TypeError: style.getImage is not a function
    at renderFeature (vector.js:113:28)
    at CanvasVectorLayerRenderer.renderFeature (VectorLayer.js:810:17)
    at render (VectorLayer.js:721:30)
    at CanvasVectorLayerRenderer.prepareFrame (VectorLayer.js:741:7)
    at VectorLayer.render (Layer.js:370:23)
    at CompositeMapRenderer.renderFrame (Composite.js:131:29)
    at Map.renderFrame_ (Map.js:1570:20)
    at Map.animationDelay_ (Map.js:1424:10)

I don’t know if a single function solves this, but I wasn’t able to do it.