geoserver / leaflet / getfeatureinfo

Question

I have a very simple question and i could not so far find a solution. I have a leaflet which gets data from Geoserver via L.TileLayer.BetterWMS.js (https://gist.github.com/rclark/6908938). When a user click in the image, get the feature data. In the WMS there is only a row each time with only one value. I would like to get this value to a variable and parse to PHP. How to do that? Below is a picture of the leaflet and the table which I get.

I want to parse the value 188 to a variable.

Thanks in advance!

Answer 1

Your response is being returned as text/html if you want to have access to the values you should request the data in application/json or application/xml and parse that.

Answer 2

Guys thanks and I found the solution. You can create a new DomParser and get a string. After creating an element and parse the html you got before, you pass the variable like:

el.getElementsByTagName('td')[1].innerHTML;

And that's it. Full code here:

var doc = (new DOMParser()).parseFromString(data, "text/html"); 
if (doc.body.innerHTML.trim().length > 0)
showResults(err, evt.latlng, data);
var el = document.createElement( 'html' );
el.innerHTML = data;
var stra = el.getElementsByTagName('td')[1].innerHTML;

Thanks again!

Answer 3

I have an other solution you need to change first text/html to application/json in L.TileLayer.BetterWMS.js and then you add :

$("#yourId").text(data.features[0].properties.YourVar)

So you finally get :

getFeatureInfo: function(evt) {
// Make an AJAX request to the server and hope for the best
var url = this.getFeatureInfoUrl(evt.latlng),
    showResults = L.Util.bind(this.showGetFeatureInfo, this);

$.ajax({
  url: url,
  success: function (data, status, xhr) {

    $("#yourid").text(data.features[0].properties.YourVar)


    var err = typeof data === 'string' ? null : data;
    showResults(err, evt.latlng, data);

  },
  error: function (xhr, status, error) {
    showResults(error);  
  }
});