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