Openlayers Set property to KML vector layer markers?

Question

I'm quite new to all of this and am sorry if this is painfully obvious, but I looked around for a solution as best I could and so nevertheless:

I am loading various KML files into a map, including ones of markers, none of which cause problems. I would like to have these markers change when the cursor hovers over them, which I was able to figure out as done by adapting these examples .

However, both use just one style, while I would like different styles for different KML layers. I tried defining and then calling the different styles that I would like to use as per this question .

But I wasn't returned the style that my parameters defined. n00b that I am it took me a while to trial and error what was going on, but console logging in my 'hoverStyler' function (where the styles would be chosen) my style parameter was being returned 'undefined', no matter where I tried defining it. Knowing that, I went into the KML itself and added extended data of my parameter ('hoverstyle'), and the function then worked for whatever marker (or route) I added that to.

The issue that I would like resolved is that it is a bit cumbersome to have to go into the KML and define this for every marker, and I assume that same as they're all loaded together that there must be a way to assign them all this property together, too.

I just have no idea what that is. Any advise is greatly appreciated!

Code:

(there is a certain deliberate redundancy in styles to better give me feedback as to what was and wasn't working)

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })
    ],
    target: 'map',
    view: new ol.View({
    center: ol.proj.fromLonLat([132.4903, 34.0024]),
    zoom: 4
    })
});

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/summer3.kml',
        format: new ol.format.KML({
            extractStyles: false
        })
    }),
    style: function(feature) {
        return routeStyle;
    },
});
map.addLayer(vectorLayer);

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/testmoo3.kml',
        format: new ol.format.KML({
            extractStyles: false,
        }),
    }),
    style: function(feature) {
        return iconStyle;
    },
});
map.addLayer(vectorLayer);

var hoverStyles = {
    'moo': new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/mooinb.png',
    }),
    'moo2': new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/moo2.png'
    }),
    'route1': new ol.style.Stroke({
        color: 'rgba(236, 26, 201, 0.5)',
        width: 5
    })
};

var routeStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(209,14,14,.6)',
        width: 4
    })
});

var defaultRouteStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(130,188,35,.6)',
        width: 4
    })
});

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/moo7.png',                
    }),
});

var defaultIconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/moo.png'
    }),
});

var hoverStyleCache = {}
function hoverStyler(feature, resolution) {
    var hover = feature.get('hoverstyle');
    var geometry = feature.getGeometry().getType();
    console.log(hover);
    while (geometry === 'Point') {
        if (!hover || !hoverStyles[hover]) {
            return [defaultIconStyle];
        }
        if (!hoverStyleCache[hover]) {
            hoverStyleCache[hover] = new ol.style.Style({
                image:hoverStyles[hover],
            })
        }
        return [hoverStyleCache[hover]];
    }
    while (geometry === 'LineString') {
        if (!hover || !hoverStyles[hover]) {
            return [defaultRouteStyle];
        }
        if (!hoverStyleCache[hover]) {
            hoverStyleCache[hover] = new ol.style.Style({
                stroke: hoverStyles[hover]
            })
        }
        return [hoverStyleCache[hover]];
    }
}


var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: map,
    style: hoverStyler
});

var highlight;
var hover = function(pixel) {

var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
    return feature;
});

    if (feature !== highlight) {
        if (highlight) {
        featureOverlay.getSource().removeFeature(highlight);
        }
        if (feature) {
        featureOverlay.getSource().addFeature(feature);
        }
        highlight = feature;
    }

};

Answer 1

You can set properties as the features are loaded

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/summer3.kml',
        format: new ol.format.KML({
            extractStyles: false
        })
    }),
    style: function(feature) {
        return routeStyle;
    },
});
vectorLayer.getSource().on('addfeature', function(event) {
  event.feature.set(('hoverstyle', 'moo');
});
map.addLayer(vectorLayer);