I have a web page which contains a MAP instance which is created using **OpenLayers**. It is supposed to display all straits in the world by **Point** type geometry. The data (Latitude,Longitude) is available in JSON format. I was able to draw a single Point on map and give it a **Style** like red dot etc. but since I am naive in openlayers I quiet couldn't figure out a way to do the same for all the Points in JSON file. So my question is how can I draw all the points from JSON file on the map and provide some styling to them like coloring and showing the name beside the point from JSON data.
I am using OpenLayers 5.1.3 with jQuery 2.3, my code

```
<body> 
<div id="map" class="map"></div>

<script type="text/javascript">
     var raster = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

    var vectorSource = new ol.source.Vector({
                wrapX: false
            });

    function styleFunction(feature) { 
                var geometry = feature.getGeometry();
                console.log(feature);

                var styles = [
                    new ol.style.Style({   
                        image: new ol.style.Circle({
                            radius: 3,
                            stroke: new ol.style.Stroke({
                                color: [180, 0, 0, 1]
                            }),
                            fill: new ol.style.Fill({
                                color: [180, 0, 0, 0.3]
                            })
                        })
                    })
                ];
               return styles;
    }

     var vectorPoints = new ol.layer.Vector({
                source: vectorSource,
                style: styleFunction
            });
     const map = new ol.Map({
            layers: [raster,vectorPoints],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
     });
</script>
</body>

```

and the json data

```
[{
    "gazetteerSource": "ASFA thesaurus",
    "placeType": "Strait",
    "latitude": 67.259166666667,
    "longitude": 26.082222222222,
    "minLatitude": null,
    "minLongitude": null,
    "maxLatitude": null,
    "maxLongitude": null,
    "precision": 280000,
    "preferredGazetteerName": "Denmark Strait",
    "preferredGazetteerNameLang": "English",
    "status": "standard"
  },
  {
    "gazetteerSource": "ASFA thesaurus",
    "placeType": "Strait",
    "latitude": 55.31,
    "longitude": 14.49,
    "minLatitude": null,
    "minLongitude": null,
    "maxLatitude": null,
    "maxLongitude": null,
    "precision": 35000,
    "preferredGazetteerName": "Bornholm Strait",
    "preferredGazetteerNameLang": "English",
    "status": "standard"
  }]

```

How to show the **preferredGazetteerName** along marker

```
var features = data.map(item => { //iterate through array...
        let longitude = item.longitude,
            latitude = item.latitude,
            iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
                    'EPSG:3857')),
                name: item.preferredGazetteerName

            }),
iconStyle = new ol.style.Style({
                image: new ol.style.Icon ({
                    anchor: [0.3, 10],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: '//openlayers.org/en/v3.20.1/examples/data/icon.png'
                }),
                text: new ol.style.text({
                    text: "sample"
                })
            });
iconFeature.setStyle(iconStyle);
        return iconFeature;

```