Different result when providing a URL and features string

Question

I am using Openlayers 4.6 and typescript.

When I create a simple vectorlayer to render plain, black dots on the map, I may provide it a url like:

export interface Options {
    features: string;
    url: string;
    text: string;
    font: string;
    textBaseline: string;
    fillColor: string;
}
...
constructor(private options: Options) {
    const { features, url, text, font, textBaseline, fillColor } = this.options;
    const format = new ol.format.GeoJSON();
    this._layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            format,
            url
        }),
        style: new ol.style.Style({
            text: new ol.style.Text({
                text,
                font,
                textBaseline,
                fill: new ol.style.Fill({
                    color: fillColor
                })
            })
        })
    });    
 ...

and it works just fine:

However, I want to provide the (same) data in a plain string format, that can be parsed to an actual GeoJSON object, like this:

export interface Options {
    features: string;
    url: string;
    text: string;
    font: string;
    textBaseline: string;
    fillColor: string;
}
...
constructor(private options: Options) {
    const { features, url, text, font, textBaseline, fillColor } = this.options;
    const format = new ol.format.GeoJSON();
    this._layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.format.GeoJSON().readFeatures(features)
        }),
        style: new ol.style.Style({
            text: new ol.style.Text({
                text,
                font,
                textBaseline,
                fill: new ol.style.Fill({
                    color: fillColor
                })
            })
        })
    });    
 ...

The string passed in features is read by calling

private readTextFile(file: string): string {
    let rawFile = new XMLHttpRequest();
    let result: string = '';
    rawFile.open('GET', file, false);
    rawFile.onreadystatechange = () => {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status === 0) {
                result = rawFile.responseText;
            }
        }
    };
    rawFile.send(null);
    return result;
}

providing url as file parameter.

This works as expected. Stepping through the constructor with the chrome debugger results in the correct data being read, in the correct format, etc.

When it comes to the visualization, the map looks like this:

which is obviously wrong... Upon zooming out, one can find the dots right off the coast of africa. When zooming in again (a lot!), the dots separate again:

Now I read in several posts here on SO and other forums, that I may need to give the data/feature projection. So I tried:

export interface Options {
    features: string;
    url: string;
    text: string;
    font: string;
    textBaseline: string;
    fillColor: string;
}
...
constructor(private options: Options) {
    const { features, url, text, font, textBaseline, fillColor } = this.options;
    const format = new ol.format.GeoJSON();
    this._layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: new ol.format.GeoJSON().readFeatures(features, {
                dataProjection: 'EPSG:3857',
                featureProjection: 'EPSG:3857'
            })
        }),
        style: new ol.style.Style({
            text: new ol.style.Text({
                text,
                font,
                textBaseline,
                fill: new ol.style.Fill({
                    color: fillColor
                })
            })
        })
    });    
 ...

But the result stays the same. The view has the same projection, as well.

What am I missing here? Why is the data, that you provide via url correct, while the same data, provided by string wrong?

Answer 1

The data is in Lat Long, i.e. EPSG 4326. You need to tell your app to read in 4326 and to display in 3857. As it is now, you declare that the data is already in 3857, so all points are within +-180m (not degrees) of coordinate 0;0.

Try changing this part of your code:

features: new ol.format.GeoJSON().readFeatures(features, {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:3857'
        })

When you use the URL to fetch the data, this change of projection between the Data projection and the View projection is handled by OL, as described in the Vector.url doc.