How do I project a point from [x,y] coordinates to LatLng in Leaflet?

Question

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 come 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.net/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);
}

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.