How to get the number of vector elements inside a vector layer in open layers 3

Question

Does anybody know how to get a count for the number of features present in an OL3 vector layer?

My vector layer is defined as follows, I'd like to know how many elements it has, and ideally how many are currently being rendered:

var styleCache = {};
var WFS_layer_Traffic_Lights = new ol.layer.Vector({
source : new ol.source.GeoJSON({
    projection : 'EPSG:3857',
    url : "Vector_Data/Traffic_Lights_Bordeaux.geojson"
}),


style : function(feature, resolution) {

    var path;
    var x_anchor;
    var y_anchor;       

    if(resolution < 4){
    path = 'Icons/Traffic_Lights_Sign_Icon_Small.png';
    x_anchor = 23;
    y_anchor = 90;
    }
    if(resolution >= 4 && resolution < 10){
    path = 'Icons/Traffic_Lights_Sign_Small.png'; 
    x_anchor = 16;
    y_anchor = 16;
    }       
    if(resolution >= 10){
    path = 'Icons/Traffic_Lights_Sign_Tiny.png';        
    x_anchor = 10;
    y_anchor = 10;
    }


    if (!styleCache[path]) {
        styleCache[path] = [new ol.style.Style({
            fill : new ol.style.Fill({
                color : 'rgba(255, 255, 255, 0.1)'
            }),
            stroke : new ol.style.Stroke({
                color : '#319FD3',
                width : 1
            }),
            image: new ol.style.Icon(({
                    anchor: [x_anchor, y_anchor],
                    anchorXUnits: 'pixels',
                    anchorYUnits: 'pixels',
                    src: path
                })),
            text : new ol.style.Text({
                font : '12px Calibri,sans-serif',
                text : "",
                fill : new ol.style.Fill({
                    color : '#000'
                }),
                stroke : new ol.style.Stroke({
                    color : '#fff',
                    width : 4
                })
            }),
            zIndex : 1
        })];
    }
    return styleCache[path];
}
});

Answer 1

Once the (GeoJSON) features are loaded you can call getFeatures on the vector source to get an array with references to the features included in the vector source. So, to get the number of features you can use the following:

var featureCount = vectorLayer.getSource().getFeatures().length;

As stated above the source should be loaded for this to work. If you pass a url option to the source constructor the source will use an Ajax request to download features. This occurs asynchronously, meaning that the source won't contain features after construction.

You can register a change listener on the vector source to know when it's loaded:

var vectorSource = vectorLayer.getSource();
var listenerKey = vectorSource.on('change', function(e) {
  if (vectorSource.getState() == 'ready') {
    var featureCount = vectorSource.getFeatures().length;
    // ...
    ol.Observable.unByKey(listenerKey);
    // use vectorSource.unByKey(listenerKey) instead
    // if you do use the "master" branch of ol3
  }
});

EDIT: I edited this to change from change:state to change as the event name.