Click event returning wrong Y container point in Leaflet?

Question

I am using QGIS Server and Leaflet to display geotiffs on my website. I have created an onMapClick function which uses a GetFeatureInfo request to QGIS Server which returns the value of the geotiff in a popup. The function looks like this:

popup = new L.Popup({maxWidth: 400});

function onMapClick(e){
    var BBOX = map.getBounds().toBBoxString();
    var WIDTH = map.getSize().x;
    var HEIGHT = map.getSize().y;
    var X = map.layerPointToContainerPoint(e.layerPoint).x.toFixed(0);
    var Y = map.layerPointToContainerPoint(e.layerPoint).y.toFixed(0);

var alayer = 'Ppt%20ElW%20(mm)';

var gfURL = URL + '?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=' + alayer + '&' + 'BBOX=' + BBOX + '&HEIGHT=' + HEIGHT + '&WIDTH=' + WIDTH + '&FORMAT=image%2Fpng&' +
    'INFO_FORMAT=text%2Fhtml&X=' + X2 + '&Y=' + Y2 + '&CRS=EPSG:4326&QUERY_LAYERS='+alayer;

$.ajax({
    url: gfURL,
    dataType: "html",
    type: "GET",
    success: function(data){
        popup.setContent(data);
        popup.setLatLng(e.latlng);
        map.openPopup(popup);
    }
});
};

map.on('click', onMapClick);

For some reason, the calculated Y value is slightly inaccurate. It is close, but does not align completely with the geotiff grid-cells. It will be apparent when you try to use the website. The inaccuracy varies with the zoom level. I have been trying to figure this out for weeks and cannot seem to get anywhere.

Answer 1

You need to remove the toFixed(0) function at the end of the var X and Y, or at least you have to set a much greater argument such as 6 or 8. This method "converts a number into a string, keeping a specified number of decimals" so the number of decimal set as argument will determine the accuracy of your values.