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

Answer 1

According to Leaflet WMS documentation you need to extend class L.WMS.Source and override hooks (eg 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);