|
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); |
|
}; |
Hey Ryan, is seems like you 1st August blocks example of this is broken. Ive been trying to implement your solution but not been having much luck unfortunately. Not seeing a popup at all on leaflet 1.3.4
Also, @santiblanko wms may have been around for some time, but that neither makes it old or the implied 'not as useful. There are plenty of situations where it is still the best and fastest option, particularly with raster data.
http://bl.ocks.org/rclark/6908938