rclark/Issues.md

## 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>

## Issues.md

      
    Raw
  

              Issues.md
            
          
    There are a bunch of reasons why this is convoluted, mostly in building the URL to make the request:

You have to rely on an AJAX request, this example uses jQuery
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.
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 for what formats are available from Geoserver. That won't be the same from WMS to WMS, however.
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.


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

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

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