I have the below code. When I launch this in Chrome, the map with the overlay displays fine and there is no error message in the console. However, there is no response when clicking on the map. I have downloaded L.TileLayer.BetterWMS.js.
My issue is nearly similar if not similar to the following: https://stackoverflow.com/questions/55813632/how-to-get-attribute-info-of-wms-layer-published-in-geoserver-in-a-popup-via-le
However when I tried suggested solution
var nexrad = L.tileLayer.betterWMS("https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
layers: 'nexrad-n0r',
format: 'image/png',
transparent: true,
attribution: "Weather data © 2015 IEM Nexrad"
});
I get an error message that:
Uncaught TypeError: L.tileLayer.betterWMS is not a function
at addLayersLeaflet.html:129
Any guidance to point me to where my problem is?
Here is the code that display with no GetFeatureInfo response:
</script>
//Base Layers
var OSM = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18
});
//July 2019 - The following MapQuest URL is no longer supported as HTTPS endpoint and has been replaced with the ESRI WorldImagery tile layer.
/*
var MapQuestOpen_Aerial = L.tileLayer('http://oatile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg', { /*
var MapQuestOpen_Aerial = L.tileLayer('h', {
attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency', attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency',
subdomains: '1234' subdomains: '1234'
}); });
*/
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
var nexrad = var nexrad = L.tileLayer.betterWms("https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
layers: 'nexrad-n0r',
format: 'image/png',
transparent: true,
attribution: "Weather data © 2015 IEM Nexrad"
});
//create the map
var map = L.map('map', {
center: new L.LatLng(44, -91),
zoom: 5,
layers: [OSM, nexrad]
});
//layer control
var baseMaps = {
"OpenStreetMap": OSM,
"ESRI World Imnagery": Esri_WorldImagery
};
var overlayMaps = {
"Radar": nexrad
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
</script>
L.TileLayer.BetterWMS js:
L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
onAdd: function (mapid) {
// 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, mapid);
map.on('click', this.getFeatureInfo, this);
},
onRemove: function (mapid) {
// 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, mapid);
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);
};