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