Change OpenLayers 3 view center

Question

I'm using OpenLayers 3 to interact with some maps. I first declare my map:

map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              })
                ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

I've an event that triggers an action, to change my map's view center. This way, (my coordinates are in EPSG:4326 format):

function CenterMap(lat, long) {
     console.log("Lat: " + lat + " Long: " + long);
     map.setView(new ol.View({
            center: ol.proj.transform([lat, long], 'EPSG:3857', 'EPSG:4326'),
            zoom: 5
     }));
}

When the function runs I get this at the explorer console:

Lat: 9.0412851667 Long: -79.5658145000

But the maps goes to [0,0], does anyone knows why this happen?

Simon Zyx · Accepted Answer · 2015-01-12T21:57:28.273

35

In ol.proj.transform you need to specify the fromProjection before the toProjection, then it should work.

As Michael Gentry explains in his answer, another Problem is that you have to specify the longitude (west-east thus x) first and then the latitude (south-north thus y).

And a better way to set the center is to get the current view and set the center there instead of always creating a new one.

function CenterMap(long, lat) {
    console.log("Long: " + long + " Lat: " + lat);
    map.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));
    map.getView().setZoom(5);
}

edited Jan 12 '15 at 21:57

answered Sep 05 '14 at 20:03

Simon Zyx

656
6
7

Ok I got it thanks. One more thing, if I change it that way I'm getting a new error Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': float parameter 3 is non-finite. ol.js:457 2Uncaught RangeError: Invalid array length. And I think is because my coordinates are too long. If I change it for [131.044922, -25.363882] it works ok. So are my coordinates too long?? – Guillelon Sep 05 '14 at 20:19
that should not be the problem. what coordinates did the error occur with? the ones you mentioned above? – Simon Zyx Sep 05 '14 at 20:41
yes the one there – Guillelon Sep 05 '14 at 20:44
I tried these coordinates with a MapQuest map and it did work. A longitude of -79 is still within the bounds of EPSG:4326 (within +/-90 degrees) and EPSG:3857 (within +/-85 degrees). – Simon Zyx Sep 05 '14 at 20:49
its a typeerror occuring inside of the renderer and a rangerror – Simon Zyx Sep 05 '14 at 20:56
hmm. maybe you would like to add the following line to the beginning of the function and tell me the output? console.log(typeof lat + " " + typeof long + " ");
or pass more of the code, i could try to find the error or bug.
– Simon Zyx Sep 05 '14 at 20:59
Note that you can use ol.proj.fromLonLat([long,lat]) for the same result but with slightly improved readability – bluefish Jan 14 '21 at 09:47

score 9 · Answer 2 · answered Jan 09 '15 at 01:33

I have a new stack exchange account and don't have a reputation high enough to comment on the "Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': float parameter 3 is non-finite." error. This occurs because you have the lat and the long inputs backwards.

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

should be:

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

in case anyone else has this problem.

yes you're right - i will update my answer accordingly. – Simon Zyx Jan 12 '15 at 21:48 — Simon Zyx, Jan 12 '15 at 21:48

score 3 · Answer 3 · answered May 16 '19 at 16:54

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

Change OpenLayers 3 view center

3 Answers3

Linked