Try to load GeoJSON object with OpenLayers 3

Question

I'm a bit new to working with OpenLayers 3. I'm trying to load a GeoJSON object in OpenLayers 3 but it display the center only point[0,0], which not even in my GeoJSON object, where I'm going wrong.

The code is below:

//CREATE A BASE LAYER
        var raster = new ol.layer.Tile({
          source: new ol.source.OSM()
        }); 

        // create a source from the feature
        var source = new ol.source.GeoJSON(

            ({
                    object:
                        {
                            'type': 'FeatureCollection',
                            'crs': {
                                'type': 'name',
                                'properties': {'name': 'EPSG:3857'}
                            },
                            'features': [
                                {
                                    'type': 'Feature',
                                    //'properties': {'id': 63},
                                    'geometry': {
                                        'type': 'Point',
                                        'coordinates': [12, 12]
                                    }
                                },
                                {
                                    'type': 'Feature',
                                    'properties': {'id': 62},
                                    'geometry': {
                                        'type': 'Point',
                                        'coordinates': [35.0, 1.0]}
                                },
                                {
                                    'type': 'Feature',
                                    'properties': {'id': 61},
                                    'geometry': {
                                        'type': 'Point',
                                        'coordinates': [34.0, 0.0]}
                                },
                                {
                                    'type': 'Feature',
                                    'properties': {
                                        'id': 56
                                    },
                                    'geometry': {
                                        'type': 'Point',
                                        'coordinates': [33.0, 33.0]
                                    }
                                }
                            ]
                        }
            })
        );


       // CREATE THE LAYER WITH THE DATA
        var vectorLayer = new ol.layer.Vector({
            source: source
        });

       // create an openlayers map object
        var map = new ol.Map({
            target: attrs.id,
            layers: [raster,vectorLayer],
            view: new ol.View({
                //projection:'EPSG:4326',
                center:[0,0],
                zoom:2
            })
        });
    }

Answer 1

I figured it out. I had to do a reprojection of my GeoJSON object.

OpenLayers 3 by default uses EPSG:3857, so does my base map which is OpenStreetMap i.e projected coordinate system. So I had to turn my GeoJSON to a projected system since it was coming in using the longitude and latitudes i.e. geographical coordinate system. (GeoJSON is always ESPG:4326)

var source = new ol.source.GeoJSON({
                    object:{
                        'type': 'FeatureCollection',
                        'crs': {
                            'type': 'name',
                            'properties': {'name': 'EPSG:4326'}
                        },
                        'features': [
                            {
                                'type': 'Feature',
                                //'properties': {'id': 63},
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [12, 12]
                                }
                            },
                            {
                                'type': 'Feature',
                                'properties': {'id': 62},
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [35.0, 1.0]}
                            },
                            {
                                'type': 'Feature',
                                'properties': {'id': 61},
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [34.0, 0.0]}
                            },
                            {
                                'type': 'Feature',
                                'properties': {
                                    'id': 56
                                },
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [33.0, 33.0]
                                }
                            }
                        ]
                    },
                    projection: 'EPSG:3857'
            }
        );