WMS GetFeatureInfo and Leaflet

Question

I've got an application running www.carstenhogertz.de/c_section.

It has a popup function showing the underlying point attribute. This function shows a strange behaviour on lower zoom levels.

For instance in starting zoom level clicking on the point for Germany the data for Italy is shown -

When I zoom into the map and click on the German circle it correctly show the data for Germany -

What might be the reason?

I use L.TileLayer.BetterWMS.js to do the GetFeatureInfo request.

Answer 1

The problem is that your map is in EPSG:3857 and your getFeatureInfo request is in EPSG:4326. This will work in the sense that no error is thrown because the WMS is stateless and has no idea that the two requests are related but the location of your click is "off" because getFeatureInfo works by "drawing" the map as requested and looking for the feature under the X/Y pixel value passed in. In your case because the two projections are different it appears you have clicked somewhere other than you have because the map has "moved" when the WMS tries to workout where you clicked.

The problem is related to this function:

getFeatureInfoUrl: function (latlng) {
    // Construct a GetFeatureInfo request URL given a point
    var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
        size = this._map.getSize(),

        params = {
          request: 'GetFeatureInfo',
          service: 'WMS',
          srs: 'EPSG:4326',
          styles: this.wmsParams.styles,
          transparent: this.wmsParams.transparent,
          version: this.wmsParams.version,      
          format: this.wmsParams.format,
          bbox: this._map.getBounds().toBBoxString(),
          height: size.y,
          width: size.x,
          layers: this.wmsParams.layers,
          query_layers: this.wmsParams.layers,
          info_format: 'text/html'
        };

where srs - should match that of the map and I suspect the this._map.getBounds().toBBoxString() is not right either as it is currently returning values of -157.5,-40.44694705960048,180,58.81374171570782 for your map which are clearly in lat/lon not metres (EPSG:3857).

Answer 2

above answer is correct, but getFeatureInfoUrl function creates only the WFS request of crs EPSG:4326.

uses this modified function, because this way WFS request is created based on used crs, regardless of whether it is 4326 or 3857:

getFeatureInfoUrl: function (latlng) {
        // Construct a GetFeatureInfo request URL given a point
        var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
        size = this._map.getSize(),

        // this crs is used to show layer added to map
        crs = this.options.crs || this._map.options.crs,

        // these are the SouthWest and NorthEast points 
        // projected from LatLng into used crs
        sw = crs.project(this._map.getBounds().getSouthWest()),
        ne = crs.project(this._map.getBounds().getNorthEast()),

    params = {
        request: 'GetFeatureInfo',
        service: 'WMS',

        // this is the code of used crs
        srs: crs.code,
        styles: this.wmsParams.styles,
        transparent: this.wmsParams.transparent,
        version: this.wmsParams.version,
        format: this.wmsParams.format,

        // these are bbox defined by SouthWest and NorthEast coords
        bbox: sw.x + ',' + sw.y + ',' + ne.x + ',' + ne.y,
        height: size.y,
        width: size.x,
        layers: this.wmsParams.layers,
        query_layers: this.wmsParams.layers,
        info_format: 'text/html'
    };

        params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
        params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;

        return this._url + L.Util.getParamString(params, this._url, true);
    }