Mimi314159 - 1 year ago 390
Javascript Question

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

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

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download