Openlayers 3 center map

Question

I'm sing OpenLayers 3 to display a map. I want to center the map using latLon coordinates. I'm using the quickstart code to begin with. Using this code, I cannot change the center of the map. I think this has something to do with Spherical Mercator projection. Only thing is, I only have lat lon coordinates.

Does anyone know how to center a map from openlayers v3?

Answer 1

You need to transform the lon/lat coordinates to the correct projection (or coordinate system) using

var olCoordinates = ol.proj.transform([lon, lat],"WGS84", "EPSG:900913")

Now you can set center with olCorrdinates.

Different projections has different code names. WGS84 is "normal" lon/lat and EPSG:900913 is the projection often used in web maps like google maps, openstreetmap and bing.

I think OpenLayers 3 has built in support for transforming from WGS84/EPSG:4326 (lon/lat), but if you need to convert to or from other coordinate systems you can include the proj4js library. Openlayers will integrate with this lib and be able to do the transformations in the same way.

Transform documentation http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html

Proj4 lib https://github.com/proj4js/proj4js

Edit: In the example you are refering to, the center location is actually set with lon/lat.

view: new ol.View({
    center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4
})

EPSG:4326 is actually the same as WGS84 and EPSG:3857 is the same as EPSG:900913. This is very confusing. I have been there myself.

You just need to change the numbers 37.41 and 8.82 to your lon/lat coordinates. If you want to change the center location after initialization you will need to use setCenter();

map.getView().setCenter(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'))