Use the following steps to learn how to attach an icon, in this case a flag, to a geometry point on the map:

We picked three geometry points that reside in three different countries across Africa. Each POI is provided with an icon that represents its respective country's flag.

To achieve this result, we have to use classes from the ol.style OpenLayers object. Let's take a closer look at this code:

return new ol.style.Style({
  image: new ol.style.Icon({
    src: country + '.png'
  })
})

Within our createIconStyle function, we instantiate a new instance of ol.style.Style. This returns the wrapper object that we need in order to create rendering styles for our vector features. It provides methods such as getImage, getFill, and setZIndex.

The image property expects a type of ol.style.Image, which is the base class for ol.style.Icon that we utilize here. The ol.style.Style class has other properties available, such as fill, stroke, and text. The ol.style.Image base class provides methods, such as getOpacity, getScale, and setRotation.

We dynamically set the value of the src property of our ol.style.Icon instance to a URL, which is built from the passed in country name. All images are in the .PNG format, so .png is always concatenated on to the end.

We've implicitly accepted a lot of the OpenLayers property defaults for ol.style.Icon, such as opacity as 1, anchor as [0.5, 0.5], which centers the icon position in the middle of the flag icon (which can be customized accordingly to suit the icon type), and the anchorXUnits type of 'fraction', rather than 'pixels'. There are many more customizable properties that I encourage you to check out.

algeria.setStyle(createIconStyle('algeria'));

After we've created an instance of ol.Feature for each country, we must set the vector feature style for each individual feature, as they're all using unique images. The ol.Feature class provides the setStyle method that takes an instance (or an array of instances) of ol.style.Style, which is what's returned from our custom createIconStyle function.

The further parts of this recipe set up the vector layer and map, both of which we're comfortable with and will need no explanation.

The markers can, of course, be mutated after they've initially been added to a vector layer. For example, we may wish to programmatically adjust a property, such as the opacity of one of the flag icons.

Let's extend this recipe by setting the opacity of the first flag to 50%:

var vectorLayer = map.getLayers().item(1);
var feature = vectorLayer.getSource().getFeatures()[0];
feature.getStyle().getImage().setOpacity(0.5);
vectorLayer.changed();

We store a reference to the vector layer (the second layer on the map) in a variable named vectorLayer. We then go searching for the feature that we'd like to manipulate by accessing the vector layer source, grabbing all features from this source, and plucking just the first feature from the array. The result is stored in the feature variable.

We retrieve the style object from the feature (getStyle) and narrow our interest down to the image style object that contains our flag icon (getImage). We set the opacity to 50%.

However, this won't show any visible changes to the flag yet, as the vector layer needs to re-render itself for the changes to take effect. It's blissfully unaware of our modifications, so we give it a friendly nudge by manually calling the changed method on the vector layer, which subsequently increments the internal revision counter and dispatches a change event. OpenLayers responds by re-rendering the vector layer, and we can finally see that the first flag (Algeria) is now semi-opaque.