How to specify the projection for GeoJSON in openlayers3?

Question

My intention is to load GeoJSON data and display it on the map. Coordinates of the features specified in GeoJSON are normal lon/lat. For some reason openlayers is rendering them using the projection used by the map and without converting them.

// Underlying sat layer.
var world = new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'sat'})
});

// GeoJSON data.
var geojsonObject = {
    'type': 'FeatureCollection',
    'features': [
        {
            'type': 'Feature',
            'geometry': {
                'coordinates': [ 50.07539747, 19.76809501 ], 
                'type': 'Point'
            },
        }
    ]
};

var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});

// Map.
map = new ol.Map({
    target: 'map',
    layers: [world, vectorLayer],
    view: new ol.View({
        center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
        zoom: 2
    })
});

The point is being rendered in the middle of the map. By placing multiple points I determined that they are in fact moved relative to each other but by a small amount which leads me to believe the for some reason the map uses a different coordinate system for them.

What I tried: Setting crs in GeoJSON, providing defaultDataProjection option to format. I use openlayers v3.8.2 and all solutions I found online are very outdated (and as far as I can see the API used to be way better, maybe I should just switch to an old version).

Wedge

Answer 1

Just use a featureProjection to read features like:

var vectorSource = new ol.source.Vector({
    features: new ol.format.GeoJSON().readFeatures(geojsonObject,{
        featureProjection: 'EPSG:3857'
    })
});

UPDATE: When reading features from url is even easier, OL makes the conversion internally for you:

var geojson_layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'file.geojson',
        format: new ol.format.GeoJSON()
    })
});

Demo - http://plnkr.co/edit/GvdVNE?p=preview

Muskogee

That helped a bit - the points moved and are more spread out now but they still don't match the locations on the satellite map in the background. Also this method would not work when loading using an url parameter, I assume that I have to download the data on my own and it is not possible to just set the projection in the source? – Wedge

I am going to accept this answer because maybe it is correct and I am the one having issues. I am going to switch to a different library or write something on my own anyway because despite being a version 3.8.2 this one appears to be poorly documented and half-finished. – Wedge

Thanks man, your answer assisted me in drawing shapes from GeoJSON data. – Boaz

When using the first version in this answer, dataProjection should be given along with featureProject. See this answer – Bedivere