2

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 -

Italy in Germany.

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

Germany in Germany.

What might be the reason?

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

  • can you show what is sent to the server for the first click? – Ian Turton Jan 19 '16 at 16:16
  • what projection is your map? the script seems to have 4326 hard coded so may well fail if you use another projection – Ian Turton Jan 19 '16 at 16:18
  • Well, the project is in 3857. But if I change it to 3857 in the .js I counldn't see any difference. – hoge6b01 Jan 19 '16 at 16:25
  • Looks like it will only work for maps in 4326 as written, but you could try removing the srs. Currently the bbox looks wrong too – Ian Turton Jan 19 '16 at 16:32
4

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).

  • Okay. Got that. So what would you suggest taking into account the fact that only changing the SRS doesn't solve the problem? – hoge6b01 Jan 19 '16 at 17:25
  • talk to whoever wrote the code or debug it yourself are the only options left I'm afraid. – Ian Turton Jan 19 '16 at 17:26
  • I found another question to the 4326/3857 issue here . Should be possible to fix but exceeds my skills. Thanks – hoge6b01 Jan 20 '16 at 8:28
0

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);
    }
  • 1
    This looks to be just a modified copy of the accepted answer. Can you please expand your answer to explain why the modification? – Midavalo May 3 '16 at 18:12

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.