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;

    url: gfURL,
    dataType: "html",
    type: "GET",
    success: function(data){

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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.