//so both features and color contain several hundred of value
features.push(new ol.Feature(new ol.geom.Point([random_x, random_y])));
color.push(random_color)

var source = new ol.source.Vector({
        features: features
    });

    var clusterSource = new ol.source.Cluster({
        distance: 40,
        source: source
    });

    var styleCache = {};
    var clusters = new ol.layer.Vector({
        name: 'clusterlayer',
        source: clusterSource,
        style: function (feature) {
            var size = feature.get('features').length;
            var style = styleCache[size];
            if (!style) {
                style = [new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 10,
                        fill: new ol.style.Fill({
                            color: '#000000'
                        })
                    }),

                    text: new ol.style.Text({
                        font: 'bolder',
                        text: size.toString(),
                        fill: new ol.style.Fill({
                            color: '#000000',
                        })
                    })
                })];
                styleCache[size] = style;
            }
            return style;
        }
    });
    this.state.map.addLayer(clusters);