Loading GeoJSON via AJAX after adding Layer to OpenLayers 3?

Question

I'm trying to add a new GeoJSON layer to OpenLayers 3 that I have to fetch via AJAX. I want the user to click on a list of layers, have it add an empty vector layer, and then make an AJAX call and load the features into the layer. This is the function that's called when the user clicks on the layer:

function () {

    var styles = {
      'Point': [new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          fill: null,
          stroke: new ol.style.Stroke({
            color: 'magenta'
          }),
          cursor: "pointer"
        })
      })],
      'LineString': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'green',
          width: 1
        })
      })],
      'MultiLineString': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'green',
          width: 1
        })
      })],
      'MultiPoint': [new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          fill: null,
          stroke: new ol.style.Stroke({
            color: 'magenta'
          })
        })
      })],
      'MultiPolygon': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'yellow',
          width: 1
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 0, 0.1)'
        })
      })],
      'Polygon': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'blue',
          lineDash: [4],
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(0, 0, 255, 0.1)'
        })
      })],
      'GeometryCollection': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'magenta',
          width: 2
        }),
        fill: new ol.style.Fill({
          color: 'magenta'
        }),
        image: new ol.style.Circle({
          radius: 10,
          fill: null,
          stroke: new ol.style.Stroke({
            color: 'magenta'
          })
        })
      })],
      'Circle': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'red',
          width: 2
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255,0,0,0.2)'
        })
      })]
    };

    var styleFunction = function(feature, resolution) {
      return styles[feature.getGeometry().getType()];
    };

    var layer = new ol.layer.Vector({
        source : new ol.source.GeoJSON({
            defaultProjection: "EPSG:4326",
            projection: "EPSG:3857"
        })
    });

    $.getJSON(global_config.services.getLayers + "?lname=fences", function (layerJSON) {

        if(layerJSON.features.length > 0)
        {
            var features = new ol.format.GeoJSON({
                dataProjection: "EPSG:4326",
                featureProjection: "EPSG:3857"
            }).readFeatures(layerJSON);


            layer.getSource().addFeatures(features);

            layer.setStyle(styleFunction);
        }
    });

    return layer;

}

The GeoJSON is in EPSG:4326 and the map is in EPSG:3857. The features are loading just fine into the layer, but they're not displaying and I can't figure out why. I'm thinking it has to do with the projection - though I have the proper projections set on all the features as well as the GeoJSON source layer. I've also tried having the default projection on the GeoJSON source layer set to EPSG:3857, because the features should be read in in that projection:

        var layer = new ol.layer.Vector({
            source : new ol.source.GeoJSON({
                defaultProjection: "EPSG:3857"
            })
        });

But still nothing is appearing.

Answer 1

Not sure why, changing the ajax function to re-create the source instead of adding features to the source worked:

        $.getJSON(global_config.services.getLayers + "?lname=fences", function (layerJSON) {

            if(layerJSON.features.length > 0)
            {
                var layerSource = new ol.source.GeoJSON({
                        style: styleFunction,
                        defaultProjection: 'EPSG:4326',
                        projection: "EPSG:3857",
                        object: layerJSON
                });

                layer.setSource(layerSource);
            }
        });