DWD Wetterwarnung

Man kann das Skript in folgenden Zeilen anpassen.

Z160: Größe Kartencontainer;

Z167 Mittelpunkt der Karte;

Z224/225 Marker für einen Ort (hier THW Mannheim).

Z161 die Displayauflösung anpassen.

Z170 den Zoomlevel anpassen.

HTML Code DWD Wetterwarnung

<html>

<head>

<title>DWD - Webmodul Warnungen</title>

// Änderungen für das DWD-Warnmodul2 wurden mit "// Warnmodul2:" markiert

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.getFeatureInfoJsonp, 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.getFeatureInfoJsonp, 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);

}

});

},

// Warnmodul2: JSONP-Version der getFeatureInfo-Funktion

getFeatureInfoJsonp: function (evt) {

// Make an AJAX request to the server and hope for the best

var url = this.getFeatureInfoUrl(evt.latlng),

showResultsJson = L.Util.bind(this.showGetFeatureInfoJson, this);

$.ajax({

url: url,

dataType: 'jsonp',

jsonpCallback: 'parseResponse',

success: function(data) {

// Warnmodul2: angepasst shorResults-Funktion wird genutzt

showResultsJson(evt.latlng, data);

}

});

},

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/javascript',

// Warnmodul2: nur ausgewählte Properties werden abgefragt - eine ungefilterte Antwort liefert eine Vielzahl weiterer Eigenschaften der Warnungen, analog zum Inhalt im CAP-Format

propertyName: 'EVENT,ONSET,EXPIRES,SENT',

// Warnmodul2: FEATURE_COUNT > 1 notwendig, um im Falle überlappender Warnungen alle Warnungen abzufragen

FEATURE_COUNT: 50

};

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

console.log("showGetFeatureInfo: " + content);

// Otherwise show the content in a popup, or something.

L.popup({ maxWidth: 800})

.setLatLng(latlng)

.setContent(content)

.openOn(this._map);

},

// Warnmodul2: angepasste Funktion zum Aufbereiten der Geoserver-Antwort (Auswahl von bestimmten properties) und zur Anzeige als Popup

showGetFeatureInfoJson: function (latlng, data) {

if ( data.features[0] == null ) { return 0 };

var content="<h2>Amtliche Warnung</h2>";

$.each(data.features, function (i, item) {

var o = new Date(item.properties.ONSET);

var e = new Date(item.properties.EXPIRES);

onset = ('0' + o.getDate()).slice(-2) + '.' + ('0' + (o.getMonth()+1)).slice(-2) + ". - " + ('0' + (o.getHours())).slice(-2) + ":" + ('0' + (o.getMinutes())).slice(-2) + " Uhr";

end = ('0' + e.getDate()).slice(-2) + '.' + ('0' + (e.getMonth()+1)).slice(-2) + ". - " + ('0' + (e.getHours())).slice(-2) + ":" + ('0' + (e.getMinutes())).slice(-2) + " Uhr" ;

content += "<p><table><tr><td>Ereignis:</td><td><b>" + item.properties.EVENT + "</b></td></tr>";

content += "<tr><td>Beginn:</td><td>" + onset + "</td></tr>";

content += "<tr><td>Ende:</td><td>" + end + "</td></tr></table></p>";

//content += "Gesendet: " + item.properties.SENT + "</p>";

});

content += "<a target='blank' href='https://www.dwd.de/warnungen'>www.dwd.de/warnungen</a>";

L.popup({ maxWidth: 800})

.setLatLng(latlng)

.setContent(content)

.openOn(this._map);

}

});

L.tileLayer.betterWms = function (url, options) {

return new L.TileLayer.BetterWMS(url, options);

};

</script>

</head>

<body>

// Leaflet-Kartenobjekt im referenzierten div erstellen und initiale Optionen für Karte übergeben

var karte = L.map('kartencontainer', {

// Mittelpunkt der Karte als Breiten- und Längengrad, bspw. 50.0956° N, 8.7761° E für Mannheim

center: [48.536, 9.050],

// initiales Zoomlevel

zoom: 8,

// interaktivität der Karte kann mit Optionen gesteuert werden

zoomControl: true,

dragging: true,

attributionControl: true

});

// OSM-Hintergrundslayer definieren

var osmlayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

maxZoom: 18

});

// Warnungs-Layer vom DWD-Geoserver - betterWms fügt Möglichkeiten zur GetFeatureInfo hinzu

var warnlayer = L.tileLayer.betterWms("https://maps.dwd.de/geoproxy_warnungen/service/", {

layers: 'Warnungen_Gemeinden_vereinigt',

// eigene Styled Layer Descriptor (SLD) können zur alternativen Anzeige der Warnungen genutzt werden (https://docs.geoserver.org/stable/en/user/styling/sld/reference/)

//sld: 'https://eigenerserver/alternativer.sld',

format: 'image/png',

transparent: true,

opacity: 0.8,

});

// CQL_FILTER können benutzt werden um angezeigte Warnungen zu filtern (https://docs.geoserver.org/stable/en/user/tutorials/cql/cql_tutorial.html)

// Filterung kann auf Basis der verschiedenen properties der Warnungen erfolgen (bspw. EC_II, EC_GROUP, DESCRIPTION ... ) siehe https://www.dwd.de/DE/wetter/warnungen_aktuell/objekt_einbindung/einbindung_karten_geowebservice.pdf

// warnlayer.setParams({CQL_FILTER:"DESCRIPTION LIKE '%Sturm%'"});

// Filter können zur Laufzeit, z.B. über Nutzereingaben angepasst werden

//delete warnlayer.wmsParams.CQL_FILTER;

//warnlayer.redraw();

// Layer mit neutraler Darstellung der Gemeinde-Warngebiete

var gemeindelayer = L.tileLayer.wms("https://maps.dwd.de/geoproxy_warnungen/service/", {

layers: 'Warngebiete_Gemeinden',

format: 'image/png',

styles: '',

transparent: true,

opacity: 0.6,

});

// Layerlisten für die Layercontrol erstellen und dabei initial aktive Layer zur Karte hinzufügen

var baseLayers = {

"OpenStreetMap": osmlayer.addTo(karte)

};

var overLayers = {

"<span title='Wetter- und Unwetterwarnungen einblenden'>Warnungen einblenden</span>": warnlayer.addTo(karte),

"<span title='Gemeindegrenzen auf Warnkarte einblenden'>Gemeindegrenzen einblenden</span>": gemeindelayer

};

// Layercontrol-Element erstellen und hinzufügen

L.control.layers(baseLayers, overLayers).addTo(karte);

// Demo-Marker mit Popup hinzufügen

var marker = L.marker([49.4424, 8.570]).addTo(karte);

marker.bindPopup("<b>THW Mannheim</b><br>").openPopup();

</script>

</body>

</html>

//

Einbindung Wetterwarnung Ticker

Unter https://wettwarn.de Bundeland und Kreis auswählen, dann den angezeigten RSS-Feed kopieren.

Im XIBO einen Ticker anlegen und den RSS-Feed einfügen.

Größe kann selbst festgelegt werden, ggf. ist die Wetterkarte in der Größe anzupassen.