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?


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'));
| improve this answer | |
  • 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 5 '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 5 '14 at 20:41
  • yes the one there – Guillelon Sep 5 '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 5 '14 at 20:49
  • its a typeerror occuring inside of the renderer and a rangerror – Simon Zyx Sep 5 '14 at 20:56

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.

| improve this answer | |
  • yes you're right - i will update my answer accordingly. – Simon Zyx Jan 12 '15 at 21:48

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([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
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.