Can't get OpenLayers vector layer to display (loaded by AJAX)

Question

I can't get the vector layer (loaded by AJAX to display). Spot my error?

I confirmed the GeoJSON returned by the server is correct.

var vectorLayer;
function showMap() {
 var fill = new ol.style.Fill({
 color: 'rgba(255,0,0,1.)'
 });
 var stroke = new ol.style.Stroke({
 color: 'rgba(255,0,0,0.4)'
 });
 var circle = new ol.style.Circle({
 radius: 6,
 fill: fill,
 stroke: stroke
 });
 var vectorStyle = new ol.style.Style({
 fill: fill,
 stroke: stroke,
 image: circle
 });
 vectorSource = new ol.source.Vector({
 format: new ol.format.GeoJSON(),
 loader: loaderFunction,
 projection: 'EPSG:3857',
 //strategy: ol.loadingstrategy.bbox
 });
 vectorLayer = new ol.layer.Vector({
 source: vectorSource,
 style: vectorStyle
 });
 var map = new ol.Map({
 target: 'map',
 layers: [
 new ol.layer.Tile({
 source: new ol.source.OSM()
 }),
 vectorLayer
 ],
 view: new ol.View({
 center: ol.proj.fromLonLat([-85.781068, 43.023985]),
 zoom: 10
 })
 });
}
function loaderFunction(extent, resolution, projection) {
 var fd = new FormData();
 fd.append('FORM', 'report-mapservicebypop');
 fd.append('action', 'DOWNLOAD LAYER');
 fd.append('aplist', '##Fnumber#');
 fd.append('layer', 'bdccoverage');
 var geoJsonFormat = new ol.format.GeoJSON();
 $.ajax({
 data: fd,
 type: "POST",
 processData: false, // tell jQuery not to process the data
 contentType: false, // tell jQuery not to set contentType
 success: function (data) {
 console.log(data);
 var features = geoJsonFormat.readFeatures(data, {});
 vectorSource.addFeatures(features);
 }
 });
}

Here is the json data:

{
"type": "FeatureCollection",
 
"features": [
{ "type": "Feature", "properties": { "bxap": 1, "bxbatchid": "1658935447", "brandname": "BillMax Billing Solutions", "technology": 70, "maxdown": 25.000000, "maxup": 10.000000, "bizrescode": "X", "lowlatency": 0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -85.785554600433755, 42.986793787262492 ], [ -85.776282949457794, 42.982635592279337 ], [ -85.77763155323612, 42.977522136286545 ], [ -85.784880298544593, 42.979264082833538 ], [ -85.785554600433755, 42.986793787262492 ] ] ] } },
{ "type": "Feature", "properties": { "bxap": 1, "bxbatchid": "1658935447", "brandname": "BillMax Billing Solutions", "technology": 70, "maxdown": 25.000000, "maxup": 10.000000, "bizrescode": "X", "lowlatency": 0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -85.785453735525209, 42.980429276576501 ], [ -85.775072168314665, 42.981700488887995 ], [ -85.774436562158911, 42.976456738103074 ], [ -85.786142308860605, 42.976138935025205 ], [ -85.785453735525209, 42.980429276576501 ] ] ] } },
{ "type": "Feature", "properties": { "bxap": 1, "bxbatchid": "1658935447", "brandname": "BillMax Billing Solutions", "technology": 70, "maxdown": 25.000000, "maxup": 10.000000, "bizrescode": "X", "lowlatency": 0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -85.809829468443525, 42.980612686611856 ], [ -85.80595223258085, 42.980949837556437 ], [ -85.804266477857951, 42.979432658305832 ], [ -85.804266477857951, 42.979432658305832 ], [ -85.802243572190463, 42.97903931553715 ], [ -85.802187380366362, 42.976061148860026 ], [ -85.8049969715712, 42.972071529349165 ], [ -85.81157141499051, 42.974263010488933 ], [ -85.809829468443525, 42.980612686611856 ] ] ] } }
]
}

• TomazicM: Please add a sample from your GeoJSON data.

Answer 1

Resolved... the problem is where the projections are defined. When using loader, the geojson reader needs this:

var features = geoJsonFormat.readFeatures(data, { 
 dataProjection: 'EPSG:4326', // data projection : long lat, WGS84
 featureProjection: 'EPSG:3857' // map projection : web mercator
});