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

Answer 2

OpenLayers introduced ol.proj.fromLonLat and ol.proj.toLonLat functions on Mar. 2015.

To center the map, you may want to use it during the initialization

view: new ol.View({
        center: ol.proj.fromLonLat([lon, lat])
      })

or after the map has been created

map.getView().setCenter(ol.proj.fromLonLat([lon, lat]))

Although they're just wrappers of ol.proj.transform, I find them more simple to use.

The default Web Mercators are EPSG:4326 and EPSG:3857.

Like Ole Borgersen states, WGS84 is the same as EPSG:4326 which is the type of Long-Lat coordinates we are used to work with.

ol.proj.fromLonLat([lon, lat]);
// is equivalent of
ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')

ol.proj.toLonLat([lon, lat]);
// is equivalent of
ol.proj.transform([lon, lat], 'EPSG:3857', 'EPSG:4326')

Answer 3

depends on how you use?

For browser-only use :

<script src='https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js'></script>


  ol.proj.transform() 

  ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857');

For js-app use

   // for projection
  import {transform} from 'ol/proj.js';

  // use this one : transform([-118.246521, 34.049039], 'EPSG:4326', 'EPSG:3857')





   var map = new Map({
    layers: layers,
    target: 'map',
    view: new View({
      //center: [-118.246521, 34.049039],
        center: transform([-118.246521, 34.049039], 'EPSG:4326', 'EPSG:3857'),
      zoom: 16
    })
  });