Get latitude and longitude in mapbox.js - mapbox

Question

I'm using mapbox.js to make a map with places on it. I'm just trying to get the map to return the right coordinates of a click, which I have managed successfully using the following code:
map.on('click', function(e) {
var latitude = e.latlng.lat;
var longitude = e.latlng.lng;
console.log(latitude + " - " + longitude)
}
The only problem is that for this to work the map has to be absolutely positioned at the top of the page. If the map is below anything the returned coordinates will further north. How far north depends on how far below the top of the page the map is. I've tried a few permutations with wrapping the map in relatively positioned elements, but it always seems to measure off the top of the page whatever I do.
Does anyone have any idea how to fix this?

Answer 1

MapBox uses position absolute as a reference for its lat lons, but you can place a relatively positioned div within an absolute div. Let me know if this gist helps

Answer 2

You can use something like this:
<div id='output' class='ui-control'>
Click: <code id='click'></code><br/>
Mousemove: <code id='mousemove'></code><br/>
</div>
<div id='map'></div>
L.mapbox.accessToken = 'pk.eyJ1IjoicmNhc3RpbGxvYWd1aXJyIiwiYSI6ImNpbDFrdmM2bTM2bnd1YW0zYjZ2dTc2OG4ifQ._HEJ9An2hZK2ofuMNEFdMA';
var click = document.getElementById('click'),
mousemove = document.getElementById('mousemove');
var map = L.mapbox.map('map', 'mapbox.streets');
map.on('mousemove click', function(e) {
window[e.type].innerHTML = e.containerPoint.toString() + ', ' + e.latlng.toString();
});