I'm using Leaflet 1.0.0rc3 and need to use an absolute pixel value to modify something on my map. Thus, I want to know where the user clicks in pixels, and then transform this back to LatLng coordinates. I tried using map.unproject(), which seems like the correct method (unproject() Leaflet documentation). But the LatLng values that e out of that method are very different from the output of e.latlng. (E.g., input LatLng (52, -1.7) and output LatLng (84.9, -177)). So I must be doing something wrong.

Question: What's the proper way to project points from layer (x,y) space to LatLng space?

Here's a code snippet (fiddle: /)

// capture clicks with the map
map.on('click', function(e) {
  doStuff(e);
});

function doStuff(e) {
  console.log(e.latlng);
  // coordinates in tile space
  var x = e.layerPoint.x;
  var y = e.layerPoint.y;
  console.log([x, y]);

  // calculate point in xy space
  var pointXY = L.point(x, y);
  console.log("Point in x,y space: " + pointXY);

  // convert to lat/lng space
  var pointlatlng = map.unproject(pointXY);
  // why doesn't this match e.latlng?
  console.log("Point in lat,lng space: " + pointlatlng);
}

I'm using Leaflet 1.0.0rc3 and need to use an absolute pixel value to modify something on my map. Thus, I want to know where the user clicks in pixels, and then transform this back to LatLng coordinates. I tried using map.unproject(), which seems like the correct method (unproject() Leaflet documentation). But the LatLng values that e out of that method are very different from the output of e.latlng. (E.g., input LatLng (52, -1.7) and output LatLng (84.9, -177)). So I must be doing something wrong.

Question: What's the proper way to project points from layer (x,y) space to LatLng space?

Here's a code snippet (fiddle: https://jsfiddle/ehLr8ehk/)

// capture clicks with the map
map.on('click', function(e) {
  doStuff(e);
});

function doStuff(e) {
  console.log(e.latlng);
  // coordinates in tile space
  var x = e.layerPoint.x;
  var y = e.layerPoint.y;
  console.log([x, y]);

  // calculate point in xy space
  var pointXY = L.point(x, y);
  console.log("Point in x,y space: " + pointXY);

  // convert to lat/lng space
  var pointlatlng = map.unproject(pointXY);
  // why doesn't this match e.latlng?
  console.log("Point in lat,lng space: " + pointlatlng);
}

• javascript
• leaflet

1 Answer 1

You are just using a wrong method. To convert layer points to LatLng in Leaflet you need to use map.layerPointToLatLng(point) method.

So your code should look like this:

// map can capture clicks...
map.on('click', function(e) {
  doStuff(e);
});


function doStuff(e) {
  console.log(e.latlng);
  // coordinates in tile space
  var x = e.layerPoint.x;
  var y = e.layerPoint.y;
  console.log([x, y]);

  // calculate point in xy space
  var pointXY = L.point(x, y);
  console.log("Point in x,y space: " + pointXY);

  // convert to lat/lng space
  var pointlatlng = map.layerPointToLatLng(pointXY);
  // why doesn't this match e.latlng?
  console.log("Point in lat,lng space: " + pointlatlng);
}

And a changed jsFiddle.

Also you can check the conversion methods that Leaflet offers for additional reference.