title: Dynamically styling vector layer Style in Openlayers without refreshing map
body: <p>I am trying to dynamically change the color of a GeoJSON layer in my map, using a HTML <code>&lt;input type="color"&gt;</code> element. My code works, but the color parameter of the layer Fill object only refreshes when I move my map or zoom in/out. Is there any way of doing this on the fly? I am using the setColor() function to edit the value of the color property.</p>
  
  <pre><code>//Change Vector Layer Color 
  //Hex to RGB
  function hexToRgb(hex) {
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
          r: parseInt(result[1], 16),
          g: parseInt(result[2], 16),
          b: parseInt(result[3], 16)
      } : null;
  }
  
  let layerColorInput1 = document.getElementById('layerColorInput_1')
  let layerColorInput2 = document.getElementById('layerColorInput_2')
  let layerColorInput3 = document.getElementById('layerColorInput_3')
  let layerColorInput4 = document.getElementById('layerColorInput_4')
  let layerColorInput5 = document.getElementById('layerColorInput_5')
  let layerColorInput6 = document.getElementById('layerColorInput_6')
  let layerColorInput7 = document.getElementById('layerColorInput_7')
  let layerColorInput8 = document.getElementById('layerColorInput_8')
  let layerColorInput9 = document.getElementById('layerColorInput_9')
  
  document.addEventListener("DOMContentLoaded", function (event) {
      layerColorInput1.addEventListener('change', function(){changeLayerColor(5, layerColorInput1)});
  });
  document.addEventListener("DOMContentLoaded", function (event) {
      layerColorInput2.addEventListener('change', function(){changeLayerColor(6, layerColorInput2)});
  });
  document.addEventListener("DOMContentLoaded", function (event) {
      layerColorInput3.addEventListener('change', function(){changeLayerColor(7, layerColorInput3)});
  });
  document.addEventListener("DOMContentLoaded", function (event) {
      layerColorInput4.addEventListener('change', function(){changeLayerColor(8, layerColorInput4)});
  });
  document.addEventListener("DOMContentLoaded", function (event) {
      layerColorInput5.addEventListener('change', function(){changeLayerColor(9, layerColorInput5)});
  });
  document.addEventListener("DOMContentLoaded", function (event) {
      layerColorInput6.addEventListener('change', function(){changeLayerColor(10, layerColorInput6)});
  });
  document.addEventListener("DOMContentLoaded", function (event) {
      layerColorInput7.addEventListener('change', function(){changeLayerColor(11, layerColorInput7)});
  });
  document.addEventListener("DOMContentLoaded", function (event) {
      layerColorInput8.addEventListener('change', function(){changeLayerColor(12, layerColorInput8)});
  });
  document.addEventListener("DOMContentLoaded", function (event) {
      layerColorInput9.addEventListener('change', function(){changeLayerColor(13, layerColorInput9)});
  });
  
  function changeLayerColor(i, layerColorInput){  
      let newColor = hexToRgb(layerColorInput.value);
      let newColorArray = [newColor.r, newColor.g, newColor.b, 1.00]
      mapLayers[i].style_.fill_.setColor(newColorArray);
  }
  </code></pre>