Neither image nor link displayed in my custom BetterWMS

Question

i am trying to customize the BetterWMS (https://gist.github.com/alfredotranchedone/72326145ecff5d7d7233)

so far, I managed to make it filter out the rows without values.

However, I am having issues when trying to display an image, or even a link to an image!

import L from 'leaflet';
import axios from 'axios';

//
L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
  onAdd: function (map) {
    L.TileLayer.WMS.prototype.onAdd.call(this, map);
    map.on('click', this.getFeatureInfo, this);
  },

  onRemove: function (map) {
    L.TileLayer.WMS.prototype.onRemove.call(this, map);
    map.off('click', this.getFeatureInfo, this);
  },

  getFeatureInfo: function (evt) {
    var url = this.getFeatureInfoUrl(evt.latlng);
    var showResults = L.Util.bind(this.showGetFeatureInfo, this);

    axios
      .get(url)
      .then(function (response) {
        var err =
          typeof response.data === 'string' ? null : response.data;
        showResults(err, evt.latlng, response.data);
      })
      .catch(function (error) {
        showResults(error);
      });
  },

  getFeatureInfoUrl: function (latlng) {
    const point = this._map.latLngToContainerPoint(latlng);
    const size = this._map.getSize();

    const x = Math.round(point.x);
    const y = Math.round(point.y);

    const params = {
      request: 'GetFeatureInfo',
      service: 'WMS',
      crs: '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',
      // info_format: 'application/json',
      x: x,
      y: y,
    };

    return this._url + L.Util.getParamString(params, this._url, true);
  },
  showGetFeatureInfo: function (err, latlng, content) {
    if (err) {
      console.log(err);
      return;
    }
    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = content;

    var rows = tempDiv.querySelectorAll('tr'); //

it's all good up to here:

    for (var i = 0; i < rows.length; i++) {
      var row = rows[i];
      var cells = row.querySelectorAll('td');

      var isFotoUrl = cells[0].textContent.trim() === 'foto_url';

      if (isFotoUrl) {
        var imgUrl = cells[1].textContent.trim();
        imgUrl = imgUrl.replace(/["']/g, '');
        var link = document.createElement('a');
        link.href = imgUrl;
        link.target = '_blank';
        link.textContent = imgUrl;
        cells[1] = link;
      }

...and from here:

      var hasValue = Array.from(cells).some(function (cell) {
        return (
          cell.textContent.trim() !== '' &&
          cell.textContent.trim() !== 'NULL'
        );
      });

      if (!hasValue) {
        row.parentNode.removeChild(row);
      }
    }

    var filteredContent = tempDiv.innerHTML;

    L.popup({ maxWidth: 800 })
      .setLatLng(latlng)
      .setContent(filteredContent)
      .openOn(this._map);
  },

});

L.TileLayer.betterWms = function (url, options) {
  console.log(url, options);
  return new L.TileLayer.BetterWMS(url, options);
};

Any help would be great!

Answer 1

solved by adding some html-generating features: https://gist.github.com/rclark/6908938?permalink_comment_id=4749563#gistcomment-4749563