Using point features as markers

A marker can be understood as a point of interest (POI) where we place an icon to identify it, and this icon has some information associated with it, such as a monument, a parking area, a bridge, and so on.

In this recipe, we will learn how to associate a custom marker icon with a point geometry type. The source code can be found in ch03/ch03-markers/. Here's what we'll end up with:

How to do it…

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

1. Create the HTML file with the OpenLayers dependencies and a div to contain the map.

2. Create a custom JavaScript file; within this file, create a function to generate and return a custom feature style:

       var createIconStyle = function(country) {
         return new ol.style.Style({
           image: new ol.style.Icon({
             src: country + '.png'
         })
       })
     };

3. Create three geometry point features:

   var algeria = new ol.Feature(new ol.geom.Point([146759,3297187...