geoserver - Vector layer not displaying in OpenLayers

I have this code from an Udemy course. Everything works except I can not visualize the vector layer. I can see the JSON file - wfs_url correctly but not visualize vectorSource (the data points selected in wfs_url).

Working with Vector Data

  var view = new ol.View({
      center: [-9015705,4026797],
      zoom: 11      
      });


   var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    view: view
  });



var theurl = 'http://localhost:8050/geoserver/richland_postgres/wms';

var bk79 = new ol.layer.Image({
      source: new ol.source.ImageWMS({
        url: theurl,
        params: {'LAYERS': 'richland:bk79'},
        serverType: 'geoserver'
      })    

    });     
 bk79.setOpacity(0.3);



var cqlfilter = 'DWITHIN(geometry,Point(503909 3768402),5000,meters)';

var schoolcql = new ol.layer.Image({
       source: new ol.source.ImageWMS({
        url: theurl,

        params: {'LAYERS': 'richland_postgres:schools','CQL_FILTER': cqlfilter},
        serverType: 'geoserver'
      })
    }); 


wfs_url = 'http://localhost:8050/geoserver/richland_postgres/wfs?service=WFS&' +
          'version=1.1.0' +
          '&request=GetFeature' +
          '&typename=richland_postgres:schools&' +

          '&CQL_FILTER=' + cqlfilter + '&' +
          'outputFormat=application/json&srsname=EPSG:3857&' +
          ',EPSG:3857';
prompt('',wfs_url);

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent) {
      return 'http://localhost:8050/geoserver/richland_postgres/wfs?service=WFS&' +
          'version=1.1.0' +

          '&request=GetFeature' +
          '&typename=richland_postgres:schools&' +
          '&CQL_FILTER=' + cqlfilter + '&' +
          'outputFormat=application/json&srsname=EPSG:3857&' +
          ',EPSG:3857';
    },
    strategy: ol.loadingstrategy.bbox
  });

  var vector = new ol.layer.Vector({

    source: vectorSource
  });


map.addLayer(bk79);
map.addLayer(schoolcql);
map.addLayer(vector);