I have a map built with leaflet. There are three basemaps. The first one is a basic OSM map. The second and third one ('Boundaries' and 'FNP') are WMS. I want to show attributes by GetFeatureInfo from the WMS 'FNP', but just want to request the values of the columns 'GEMEINDE', 'NUTZUNG' and 'STAND'. Here is the code for this:
<!DOCTYPE html>
<html lang="de">
<head>
<title>FNP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<script src="/cdn-cgi/apps/head/WCXTfKrGxLNzfpUe-D2TgHwMpm4.js"></script><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
html, body {
height: 100%
}
#mapid {
width: 1000px;
height: 800px;
}
@media (max-width: 1000px) {
#mapid{
width: 100%;
height: 100%
}
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="L.TileLayer.BetterWMS.js"></script>
<div id="mapid"></div>
<script type="text/javascript">
<!-- *********************** betterWms ************************************ -->
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',
propertyName: 'GEMEINDE,NUTZUNG,STAND'
};
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);
};
<!-- *****************map******************************** -->
var map = L.map('mapid', {
<!-- center: [51.1961, 13.3105], -->
<!-- zoom: 15 -->
center: [50.8, 14],
zoom: 11
});
var basemaps = {
OSM: L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
minZoom: 4,
maxZoom: 19,
attribution: 'Map tiles by <a target="_blank" href="http://cartodb.com/attributions">CartoDB</a> | Map data by <a target="_blank" href="http://www.openstreetmap.org/copyright" >OpenStreetMap</a>',
subdomains: 'abcd'
}),
Boundaries: L.tileLayer.betterWms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_boundary_lines_land',
transparent: true,
format: 'image/png'
}),
FNP: L.tileLayer.betterWms("https://rz.ipm-gis.de/ags01/services/RAPIS/RAPIS_FNP/MapServer/WmsServer?", {
layers: '1',
format: 'image/png',
transparent: true,
attribution: 'WMS: <a target="_blank" href="https://www.geomis.sachsen.de/terraCatalog/Query/ShowCSWInfo.do?fileIdentifier=a57376e1-1de2-48f7-b125-0b43c5089d91">Flächennutzungsplan RAPIS</a>'
})
};
L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);
basemaps.FNP.addTo(map);
</script>
</body>
</html>It does not work for the WMS 'FNP'. When I change the 'propertyName' to 'name' to test the request of the wms 'Boundaries' it works. So maybe some expressions are missing in the WMS 'FNP'? Both WMS are external and not published by myself.
Here are the sources/getCapabilities of both WMS:
- WMS 'FNP': https://rz.ipm-gis.de/ags01/services/RAPIS/RAPIS_FNP/MapServer/WmsServer?REQUEST=GetCapabilities&SERVICE=WMS
- WMS 'Boundaries': https://demo.boundlessgeo.com/geoserver/ows?service=wfs&version=1.0.0&request=GetCapabilities
Do you have any idea why the instruction with the one wms works but not with the other one?
I would be very grateful for any help! Thank you!
