Could you please assist,i have 5 orchards that all have the same GPS location/coordinates and when i run my project they all appear at the same place,i would like to scatter/cluster them in a circle or however so that each icons have space between them,i am using open layers and also tried using ol.source.Cluster but is giving me errors,is there a simpler way to achieve this?please see code below.Thanks

below code working but icons appearing in one place

  function getOrchardLocations(locationId) {
        if (orchards != null)
            map.removeLayer(orchards);

        orchards = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: rootName+'/Home/Locations/GetOrchardLocations/' + locationId,
                format: new ol.format.GeoJSON()
            }),
            style: function (feature) { return iconStyleFunc(feature); }
        });
       // console.log(feature);
        map.addLayer(orchards);
        ZoomPucOrchards(pucid);
    };

Icon Style

    function iconStyleFunc(feature) {

        var zIndex = 1;

        var iconName = feature.get("IconPath") || "blue.png";

        iconStyle = [new ol.style.Style({
            image: new ol.style.Icon(({
                anchor: [0.5, 36],
                anchorXUnits: "fraction",
                anchorYUnits: "pixels",
                opacity: 1,
                src: "/img/icons/" + iconName,
                zIndex: zIndex
            })),
            text: new ol.style.Text({
                text: getText(feature),
                font: '14px "Helvetica Neue",Helvetica,Arial,sans-serif',
                placement: 'point',
                fill: new ol.style.Fill({ color: '#fff' }),
                stroke: new ol.style.Stroke({ color: '#000', width: 1 }),
            }),
            zIndex: zIndex
        })];
        return iconStyle;
    }