Skip to content

Instantly share code, notes, and snippets.

@alfredotranchedone

alfredotranchedone/BetterWMS

Forked from rclark/Issues.md
Last active November 3, 2023 04:29
Show Gist options
  • Save alfredotranchedone/72326145ecff5d7d7233 to your computer and use it in GitHub Desktop.
Save alfredotranchedone/72326145ecff5d7d7233 to your computer and use it in GitHub Desktop.
Download ZIP
L.TileLayer.BetterWMS.js extend L.TileLayer.WMS
Raw
BetterWMS
There are a bunch of reasons why this is convoluted, mostly in building the URL to make the request:
1. You have to rely on an AJAX request, this example uses jQuery
2. To make a GetFeatureInfo request, you must provide a BBOX for a image, and the pixel coordinates for the part of the image that you want info from. A couple of squirrely lines of Leaflet code can give you that.
3. Output formats. The `info_format` parameter in the request. We don't know *a priori* which will be supported by a WMS that we might make a request to. See [Geoserver's docs](http://docs.geoserver.org/stable/en/user/services/wms/reference.html#getfeatureinfo) for what formats are available from Geoserver. That won't be the same from WMS to WMS, however.
4. WMS services return XML docs when there's a mistake in the request or in processing. This sends an HTTP 200, which jQuery doesn't think is an error.
5. added a php proxy and 2 new options (CORS workaround)
Raw
index.html
<!doctype html>
<html>
<head>
<title>WMS GetFeatureInfo</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<style type="text/css">
html, body, #map {
margin: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="L.TileLayer.BetterWMS.js"></script>
<script>
var map = L.map('map', {
center: [34,-111],
zoom: 7
});
var url = 'http://data.azgs.az.gov/arizona/wms';
L.tileLayer('http://{s}.tiles.mapbox.com/v3/rclark.map-wm3i8w1a/{z}/{x}/{y}.png').addTo(map);
L.tileLayer.betterWms(url, {
layers: 'azgs:mapunitpolys',
transparent: true,
format: 'image/png'
}).addTo(map);
</script>
</body>
</html>
Raw
L.TileLayer.BetterWMS.js
L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
onAdd: function (map) {
// Triggered when the layer is added to a map.
// Register a click listener, then do all the upstream WMS things
L.TileLayer.WMS.prototype.onAdd.call(this, map);
map.on('click', this.getFeatureInfo, this);
},
onRemove: function (map) {
// Triggered when the layer is removed from a map.
// Unregister a click listener, then do all the upstream WMS things
L.TileLayer.WMS.prototype.onRemove.call(this, map);
map.off('click', this.getFeatureInfo, this);
},
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) {
var err = typeof data === 'string' ? null : data;
showResults(err, evt.latlng, data);
},
error: function (xhr, status, error) {
showResults(error);
}
});
},
getFeatureInfoUrl: function (latlng) {
// Construct a GetFeatureInfo request URL given a point
var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
size = this._map.getSize(),
params = {
request: 'GetFeatureInfo',
service: 'WMS',
srs: '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'
};
params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;
// return this._url + L.Util.getParamString(params, this._url, true);
var url = this._url + L.Util.getParamString(params, this._url, true);
/**
* CORS workaround (using a basic php proxy)
*
* Added 2 new options:
* - proxy
* - proxyParamName
*
*/
// check if "proxy" option is defined (PS: path and file name)
if(typeof this.wmsParams.proxy !== "undefined") {
// check if proxyParamName is defined (instead, use default value)
if(typeof this.wmsParams.proxyParamName !== "undefined")
this.wmsParams.proxyParamName = 'url';
// build proxy (es: "proxy.php?url=" )
_proxy = this.wmsParams.proxy + '?' + this.wmsParams.proxyParamName + '=';
url = _proxy + encodeURIComponent(url);
}
return url;
},
showGetFeatureInfo: function (err, latlng, content) {
if (err) { console.log(err); return; } // do nothing if there's an error
// Otherwise show the content in a popup, or something.
L.popup({ maxWidth: 800})
.setLatLng(latlng)
.setContent(content)
.openOn(this._map);
}
});
L.tileLayer.betterWms = function (url, options) {
return new L.TileLayer.BetterWMS(url, options);
};
Raw
proxy.php
<?php
/**
* PS: super basic template!
*
*/
// querystring parameter: same name of the WMS option
$url = $_GET['url'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,urldecode($url));
curl_setopt($ch, CURLOPT_REFERER, 'http://localhost');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$output = curl_exec($ch);
curl_close($ch);
echo $output;
?>
@Turbokillen
Copy link

Turbokillen commented Nov 19, 2021 •
edited
Loading

Thanks for a great script! I set it up (the javascript version) and it works great on all devices and browsers on pc EXCEPT Android mobile devices with their web browser. Then the popup rarely shows up when you do a "info click" on the polygons. Try it out on my live example below.
It seems the browser in Android phones and pads has some different clicking event handling or so?. Anybody run into the same problem? any solution to this?

My live testmap:
https://lf-webbapp.goteborg.se/info_wms.html

@inzamambaig
Copy link

@Turbokillen How can I show desired feature attributes? In my case, the features have more than than 20 attributes and the table overflows the parent element, making it difficult to read.

@Turbokillen
Copy link

Turbokillen commented Jan 24, 2023 via email •
edited
Loading

@inzamambaig
Copy link

@Turbokillen Thanks it worked

@inzamambaig
Copy link

@Turbokillen Is it possible to change the styling of this pop-up? Like changing the font size etc
image

@afrizalamri
Copy link

Hi, im using this code,
Screenshot (90)
but the data from the geoserver doesn't appear, what should I do?

@dazlab
Copy link

dazlab commented Sep 29, 2023 •
edited
Loading

How can you style the returned table? I notice it's injecting a style tag prior to the table, which overrides any stylesheet definitions. Can styling be passed in via the params?

@ydrea
Copy link

ydrea commented Nov 2, 2023

i am trying to customize this a bit...
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'); //

    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;
      }

      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);
};

@ydrea
Copy link

ydrea commented Nov 3, 2023

did it!
had to go the hard way though...

showGetFeatureInfo: function (err, latlng, content) {
    if (err) {
      console.log(err);
      return;
    }

    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = content;
    var rows = tempDiv.querySelectorAll('tr');

    for (var i = 0; i < rows.length; i++) {
      var row = rows[i];
      var cells = row.querySelectorAll('th, td');
      if (cells.length >= 2) {
        var header = cells[0].textContent.trim();
        var value = cells[1].textContent.trim();
        if (header === 'foto_url') {
          console.log('yea!');
          var imgUrl = value.replace(/["']/g, '');
          console.log(imgUrl);

          var newRow = document.createElement('tr');
          var newCell = document.createElement('td');

          var image = document.createElement('img');
          image.src = imgUrl;
          image.alt = 'Image';
          image.style.width = '177%';
          newCell.appendChild(image);

          newRow.appendChild(newCell);

          row.parentNode.replaceChild(newRow, row);
        } else {
          if (value === 'NULL' || value === '') {
            row.parentNode.removeChild(row);
          }
        }
      }
    }

    var filteredContent = tempDiv.innerHTML;
    console.log(filteredContent);
    L.popup({ maxWidth: 400 })
      .setLatLng(latlng)
      .setContent(filteredContent)
      .openOn(this._map);
  },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment