title: Using OpenLayers, how can I display different icons for different features on a single layer?
body: <p>firstly I'm new to Openlayers/JS as a whole and fairly inexperienced with programming in general so there might be other problems with my code that I'm not aware of. </p>
  
  <p>I am using the latest version of Openlayers (5.3.0).</p>
  
  <p>My program currently passes GeoJson formatted data via Ajax to be displayed on an Openlayers map. It creates the map, view and a layer for the features to be displayed on. When I press a "Go" button on the page, the features are loaded onto the map successfully. In my case the features are just simple points with latitude/longitude using a png marker to visualise. The GeoJson looks like this in C# before being serialised and sent to JS on my page for deserialisation:</p>
  
  <pre><code>{{
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [
            -1.549077,
            53.800755
          ]
        },
        "properties": {
          "GPSKey": 1,
          "Latitude": 53.800755,
          "Longitude": -1.549077,
          "TimeAdded": "2019-01-15T12:10:16",
          "IconPath": "pinred.png"
        },
        "ID": 1,
        "IconPath": null
      },
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [
            -1.545077,
            53.800755
          ]
        },
        "properties": {
          "GPSKey": 2,
          "Latitude": 53.800755,
          "Longitude": -1.545077,
          "TimeAdded": "2019-01-15T12:10:16",
          "IconPath": "pinred.png"
        },
        "ID": 2,
        "IconPath": null
      },
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [
            -1.524043,
            53.773222
          ]
        },
        "properties": {
          "GPSKey": 3,
          "Latitude": 53.773222,
          "Longitude": -1.524043,
          "TimeAdded": "2019-01-15T12:10:16",
          "IconPath": ""
        },
        "ID": 3,
        "IconPath": null
      }
    ]
  }}
  </code></pre>
  
  <p>The JS receives the above serialised and uses this code to add it to the layer for viewing:</p>
  
  <pre><code>var geojsonFormat = new ol.format.GeoJSON({
          dataProjection: "EPSG:4326",
          featureProjection: "EPSG:3857"
      });//creates a format definition
  
      jsonDecoded = JSON.parse(result); /
  
      if (jsonDecoded.features.length &gt; 0) {
          for (var i = 0; i &lt; jsonDecoded.features.length; i++) {
              vectorSource.addFeature(geojsonFormat.readFeature(jsonDecoded.features[i], { featureProjection: "EPSG:3857" }));
  
          }
  
      }/
  </code></pre>
  
  <p>The vector layer it gets added to looks like this:</p>
  
  <pre><code>var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: iconStyleFunc()
  });
  </code></pre>
  
  <p>And the iconStyleFunc() looks like this:</p>
  
  <pre><code>function iconStyleFunc() {
  
      var zIndex = 1;
  
      var iconName = null;
  
      if (iconName == null) {
          iconName = "pinother.png"
      };
  
  
      iconStyle = [new ol.style.Style({
          image: new ol.style.Icon(({
              anchor: [0.5, 36], 
              anchorXUnits: "fraction",
              anchorYUnits: "pixels",
              opacity: 1,
              src: "images/" + iconName,  
              zIndex: zIndex
          })),
          zIndex: zIndex
      })];
  return iconStyle;
  </code></pre>
  
  <p>This works fine for styling all the features with the icon "pinother.png". I have no problem displaying the points on the map when I press the button. </p>
  
  <p>What I'd like to do is apply styling based on the icon path in the properties of each feature's GeoJson "iconpath", so that any feature having a "pinred.png" would use that instead of the default "pinother.png", and so on with various icons I might need to add in the future. </p>
  
  <p>I'm not sure how to read this property of each feature and how I would best implement it in the styling function. The way I envisaged it was iterating through features using the iconStyleFunc(), reading the IconPath property for each feature, appending that value to the "src/images/" path in the iconStyleFunc() and styling the feature appropriately.  </p>