19

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?

3 Answers 3

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

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.

1
  • yes you're right - i will update my answer accordingly.
    – Simon Zyx
    Jan 12, 2015 at 21:48
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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