Open Layers 3 use a number value to show different icon
<p>I have a weather map where I want to show a different weather icon depending on a value within each point parameters. Once I get the value of each Icon I have to compare it to the number of an object array and get the specific key value.</p>

<p>Once I know the key values of each of the points in the map I want to match these to an offset position of a vertical sprite image containing all the icons. Each icon is 35x35px so I could multiply the value parameter with the height of an icon and get the position. </p>

<p>But I'm struggling to implement this in my map, this is waht I have so far:</p>

<pre><code>// Object array with specific parameters
var obg = {
 {1:34},{2:11},{3:54}
}

// Create a layer for the weather icons
var layerWeather = new ol.layer.Vector({
   name: 'dwc',
   preload: 4,
   source: vectorSource, // GeoJSON source
   style: weatherIcon
});

// Create a Weather Icon Style
var weatherIcon = function(feature) {

   // Get the value of the icon
   var iconVal = parseFloat(Math.round(feature.get('value')));

   // Loop each value
   $.each(obj, function(number, value) {

      // Create vertical offset offset calculation
      var offsetY = value * 35;

      // Check if the number equals the icon value
      if (number == iconVal) { // if number is 1 and icon has value 1

      // Create  a new icon style
      feature.setStyle(
         new ol.style.Style({
            image: new ol.style.Icon({
               src: 'urlIconPath',
               offset: [0, offsetY], // Vertical Icon Sprite
               size: [35, 35]
            })
         })
      );
      }

   }
}
</code></pre>