How to center a map on a position in Open layer 3

Question

I need to set the center of position to somewhere in delhi in india for which i have coordinate [lat: '28.627671', lng: '77.216574']. I have used below code to make it work but still shows wrong location.

 map = new ol.Map({
        target: 'map',
        renderer: 'canvas',
        view: new ol.View({
            center: [0,0],
            zoom: 4
        })
    });

    var newLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    map.addLayer(newLayer);
    map.addLayer(mapVectorLayer);
    console.log(centerPosition);
    map.getView().setCenter(ol.proj.transform([centerPosition.lng, centerPosition.lat], 'EPSG:4326', 'EPSG:3857'));
    map.getView().setZoom(5);

Answer 1

I may be because you give string values to the coordinates. Cast them to numbers by adding + before the variables and you should be fine.

See a JSFiddle of an example that looks like what you want to do: http://jsfiddle.net/bbc7gup9/2/

And a snippet:

var centerPosition = {
  lat: '28.627671',
  lng: '77.216574'
};
view.setCenter(ol.proj.transform([
  +centerPosition.lng,
  +centerPosition.lat
], 'EPSG:4326', 'EPSG:3857'));
view.setZoom(5);

Answer 2

just flip your coordinates. Do it like so:

map.getView().setCenter(ol.proj.transform([ 77.216574,28.627671], 'EPSG:4326', 'EPSG:3857'));

fiddle here

check @Alexander Dude fiddle as well, it is more safe to pass the coords the way he suggest. I am just pretty sure you have the coords the way around