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?

Nauseous

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

Noonday

What is that: "WGS84", "EPSG:900913"? I see these things on a lot of site, but I do not really understand what it is. – Nauseous

It is a map projection or coordinate system. There are multiple ways to measure out the world and these are just codenames on different ways to do it. WGS84 are lon/lat and EPSG:900913 is the one used by openstreetmap, google, bing etc. There are also others like UTM-projections which spits the world into small rectangles and use the metric system as coordinates. – Noonday

Also take care of the order of the arguments. The ol.proj.transform method expects [longitude, latitude], whereas some program use the latitude/longitude order of arguments. For example when selecting 'what's here' from the context menu of a Google map the location is shown as latitude/longitude. – Caspar

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

Phosgene

Great explanation. Thanks to you, I now have a better understanding of how this all works. – Xylo

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

Chivalry