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'
 }
 );