JavaScript – How to Change the Color of Highlighted Feature in OpenLayers 5

geodjangojavascriptopenlayersstyle

I've made a little script to highlight a feature on hover the mouse My inspiration comes from here. Now I would like to change the color of the highlighted feature. I can do this using style function with a vector layer but if I use ol.style.Style nothing change but the highlight run fine.

var highlightMouseOnHover = function() {
    selected_feature = new ol.interaction.Select({
      condition: ol.events.condition.pointerMove
    });
    map.addInteraction(selected_feature);
    selected_feature.on('select', function(e) {
      style: new ol.style.Style({
              stroke: new ol.style.Stroke({
                  color: 'rgba(121,121,125,1.0)',
                  lineDash: null,
                  lineCap: 'butt',
                  lineJoin: 'miter',
                  width: 0,
              }),
              fill: new ol.style.Fill({
                color: '#0d0887',
              }),
          });
    });
};

highlightMouseOnHover();

How I can solve this?
I'm not an expert of javascript

Best Answer

As long as you are styling unselected features with the layer style you can set a style for selected features as an option for the interaction. But just like a layer style it will not override styles set directly on a feature.

selected_feature = new ol.interaction.Select({
  condition: ol.events.condition.pointerMove,
  style: new ol.style.Style({
          stroke: new ol.style.Stroke({
              color: 'rgba(121,121,125,1.0)',
              lineDash: null,
              lineCap: 'butt',
              lineJoin: 'miter',
              width: 0,
          }),
          fill: new ol.style.Fill({
            color: '#0d0887',
          }),
      });
});
Related Question