Filter getFeatureInfo results (leaflet wms plugin)

Question

Problem

With the leaflet.wms.js plugin I've managed to display informations about WMS layers (using GetFeatureInfo) just by clicking on them. The problem is that the geoserver delivers data in plain text only and, as shown in the image below, it's a mess.

Yep, it is a mess indeed

Therefore I would like to filter the results of the GetFeatureInfo queries, in order to display the useful informations only. I wrote a bunch of JavaScript lines, witch filters the <div> containing the results of the GetFeatureInfo requests.

var GetFeatureInfo = document.getElementsByClassName("leaflet-popup-content")[0].innerHTML;
tipo = GetFeatureInfo.split(/'/)[21];
legenda = GetFeatureInfo.split(/'/)[27];
document.getElementsByClassName("leaflet-popup-content")[0].innerHTML = tipo + ":<br/>PERICOLOSITÀ " + legenda;

I tried to add those lines at the bottom of the script witch invokes and configure the map, but it didn't work. I suppose that those lines are not executed at the right moment.

Solution

Thanks to Sebastian Schulz, I've managed to filter the results of the GetFeatureInfo queries. We need to extend the L.WMS.Source class and to edit the way that the class shows the GetFEatureInfo in the popups, using the hook showFeatureInfo. Like this:

var CleanInfoSource = L.WMS.Source.extend({
    'showFeatureInfo': function(latlng, info){
        if (!this._map){return;}
        tipo = info.split(/'/)[21];
        legenda = info.split(/'/)[27];
        info = tipo + ":<br/>PERICOLOSITÀ " + legenda;
        this._map.openPopup(info, latlng);
    }
});

var minambPAI = new CleanInfoSource("http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/WMS_v1.3/Vettoriali/PAI_pericolosita.map",{
        format: "image/png",
        transparent: true,
        attribution: "<a href='http://www.pcn.minambiente.it'>Ministero dell&#8217;Ambiente</a>",
        info_format: "text/plain"
    }
);

As Sebastian said, this method (among others) is in the documentation. And I also found that the hook syntax is in the leaflet.wms.js script. RTFM I guess... :)

`info_format: "text/plain"` though will still give you plain text though — user27874, Aug 12 '19 at 18:49

Sebastian Schulz · Accepted Answer · 2017-09-19T12:04:38.517

1

According to Leaflet WMS documentation you need to extend class L.WMS.Source and override hooks (e.g. showFeatureInfo). Check this snippet and edit info variable to make a custom popup.

var map = L.map('map').setView([43.53, 10.32], 13);
var openTopoMap = L.tileLayer(
  'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
  {attribution: '<a href="https://opentopomap.org/copyright">OpenTopoMap</a>'}).addTo(map);
var MySource = L.WMS.Source.extend({
    'showFeatureInfo': function(latlng, info) {
        if (!this._map) {
            return;
        }
        // do whatever you like with info
        console.log(info)
        this._map.openPopup(info, latlng);
    }
});
var minambPAI = new MySource("http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/WMS_v1.3/Vettoriali/PAI_pericolosita.map",
    {
        format: "image/png",
        transparent: true,
        attribution: "<a href='http://www.pcn.minambiente.it'>Ministero dell&#8217;Ambiente</a>",
        info_format: "text/plain"
    }
);
var periAlluvioneMME = minambPAI.getLayer('RN.PAI.PERICOLOSITA.ALLUVIONE').addTo(map);
var periFranaMME = minambPAI.getLayer('RN.PAI.PERICOLOSITA.FRANA_01');
var control = L.control.layers({}, {
    'Pericolosità  Alluvioni: moderata a molto elevata': periAlluvioneMME,
    'Pericolosità  Frane: moderata a molto elevata': periFranaMME
})
control.addTo(map);

edited Sep 19 '17 at 12:04

answered Sep 18 '17 at 10:58

Sebastian Schulz

391
2
7

Thanks you @sebastian . I tried to do extend the class [as shown above](https://stackoverflow.com/q/46268753/7074472), but I got this kind of error: `TypeError: L.WMS.source.extend is not a function`. – Lost Geographer Sep 18 '17 at 14:42
Could you provide a small part of your code on jsfiddle? Then we can debug it. Try to create a map object and add an example WMS layer. https://jsfiddle.net/ – Sebastian Schulz Sep 18 '17 at 17:07
Here is the code on [jsfiddle](https://jsfiddle.net/xuq8zszg/2/), but it seems that jsfiddle refuses to display GetFeatureInfo content (maybe because it is loaded from an http connection and not https, and I can't change it). However, it works on [jsbin](http://jsbin.com/nupehu/edit?html,js,output). Thanks for your help. – Lost Geographer Sep 18 '17 at 18:34
I think that I've managed to improve the code, but the text is still not parsed. [jsbin](http://jsbin.com/wakafup/edit?html,js,output), [jsfiddle](https://jsfiddle.net/xuq8zszg/3/). – Lost Geographer Sep 19 '17 at 11:25
It works ! Thank you very much @Sebastian ! Actually, I've just noticed that the hook syntax is in the [leaflet.wms.js](https://github.com/heigeo/leaflet.wms/blob/1f3542158b1743a681b375e3853cd147af742d91/src/leaflet.wms.js#L213) plugin's script. – Lost Geographer Sep 19 '17 at 12:55
It nearly for me. But I am using Leaflet with QGIS Server and somehow it works strangely. The leaflet-popup-content contains (differently than in the examples above) an iframe with the showFeatureInfo request. The response is shown in that popup but it cannot be split like you did. The code and example can be found [here](http://jsbin.com/mitibavopo/1/edit?html,js,output). Could someone please have a look? I'd like to show e.g. the feature's name only. – hoge6b01 Apr 17 '18 at 10:02
@hoge6b01 If u have an access to 92.222.90.244 set CORS there and you can send AJAX GET request for this data, something like this: http://jsbin.com/govigewoga If you don't have an access, you need to create a proxy (with backend of course). – Sebastian Schulz Apr 23 '18 at 10:30

Filter getFeatureInfo results (leaflet wms plugin)

1 Answers1