-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
147 lines (126 loc) · 8.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="de">
<head>
<title>DWD- Warnmodul 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="dj0001">
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" sizes="192x192" href="icons/warn.png">
<!--
Diese Datei illustriert als "Warnmodul2" die Darstellung der Warnungen des Deutschen Wetterdienstes als WMS-Dienst aus dem Server maps.dwd.de in einem JavaScript-basierten Web-mapping-Client.
Verwendete Bestandteile:
- als zentrales Element wird die JS-Bibliothek leaflet zur Erzeugung einer dynamsichen, interaktiven Karte in einem html-div-Element genutzt
- die JS-Biblithek jQuery kommt für die Abfrage von Warninformationen via AJAX und JSONP zur Anwendung
- das leaflet-Plugin BetterWMS wird für eine einfache GetFeatureInfo-Abfrage von Warndetails verwendet
https://gist.github.com/rclark/6908938
Leaflet bietet eine Vielzahl an Konfigurationsoptionen und Erweiterungen, welche unter https://leafletjs.com/ dokumentiert sind.
Durch mögliche Einschränkungen von Zoom, Auschnitt und Interaktion sind auch örtlich gebundene Karten realisierbar. Des weiteren können alternative Hintergrundkarten, sowie zusätzliche Informationen aus anderen Diensten mit eingebunden werden.
Weiterentwicklungen und Veränderungen des "Warnmodul2"-Codes sind ausdrücklich erwünscht, die Darstellung der DWD-Warnungen sollte allerdings immer in den original-Farben (https://www.dwd.de/DE/wetter/warnungen_aktuell/kriterien/farbskala.html?nn=605882) erfolgen. Eine eventuell duchgeführte Filterung von Warnungen sollte für Nutzer entsprechend ersichtlich sein.
Anregungen zur Nutzung oder beispielhafte Weiterentwicklungen nehmen wir gerne unter opendata@dwd.de entgegen um sie der Allgemeinheit verfügbar zu machen.
-->
<!-- Leaflet JavaScript Bibliothek für interaktive Karten -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js" crossorigin=""></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" crossorigin=""/>
<!-- <link rel="stylesheet" href="themes/mytheme.css"/> -->
<!-- jquery für ajax-Anfragen
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> -->
<!-- BetterWMS stellt vereinfachte getFeatureInfo-Abfragen für WMS-Layer bereit; alternativ kann z.B. https://github.com/heigeo/leaflet.wms oder eigener Code verwendet werden
Die Funktionen wurden angepasst, um JSONP-Anfragen durchzuführen und ausgewählte Elemente der Feature-Info im Popup darzustellen; Änderungen sind in leaflet-betterwms.js entsprechen markiert
-->
<script src="src/leaflet-betterwms_dj.js"></script>
</head>
<body>
<!-- hier wird der Kartencontainer definiert, in welchem anschließend die Karte dargestellt wird -->
<div id="kartencontainer" style="width: calc(100% - 24px); height: 100vh; margin-right: 16px"></div> <!-- width: 800px; height: 600px; -->
<script>
//(function(){
var qs="" //edit here options "ort=Augsburg"
qs= decodeURIComponent(location.search.slice(1))||qs; //qs=qs.replace('ort=0','0').replace(/ort=1/,'1') //URL parameter
var opt=qs.replace(/.*?(&|$)/,''); opt=opt? JSON.parse('{"' + opt.replace(/&/g, '","').replace(/=/g, '":"') + '"}') :{}; qs=qs.replace('qs=','').replace(/&.*/,'') //&lkr=1
// 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 Offenbach
center: [50.0956, 8.7761],
// initiales Zoomlevel
zoom: 7,
// 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', {
attribution: 'Map data: © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 18
});
// Warnungs-Layer vom DWD-Geoserver - betterWms fügt Möglichkeiten zur GetFeatureInfo hinzu
var warnlayer = L.tileLayer.betterWms("https://maps.dwd.de/"+(!opt.day &&!opt.lkr?"geoproxy_warnungen/service/":"geoserver/dwd/wms/"), {
layers: (!opt.lkr? 'Warnungen_Gemeinden_vereinigt':'Warnungen_Landkreise')+(qs.match(/^[A-Z][a-z,V]+/)? '_'+qs:''), // Filterung
// 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,
attribution: 'Warndaten: © <a href="https://www.dwd.de">DWD</a>'
});
// 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%'"});
//if(isNaN(qs) &&!qs.match(/^ort=/)) warnlayer.setParams({CQL_FILTER:"EVENT IN ('"+qs.replace(/,/g,"','")+"')"}) //"EC_GROUP LIKE '%"+qs+"%'"
if(opt.day) warnlayer.setParams({CQL_FILTER:"EXPIRES AFTER "+new Date(new Date().setUTCHours(24,0,0)).toISOString()}) //?&day=1 tomorrow
// 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', //DLM1000_Bundeslaender_Landkreise_gruen
format: 'image/png',
styles: '',
transparent: true,
opacity: 0.6,
attribution: 'Geobasisdaten Gemeinden: © <a href="https://www.bkg.bund.de">BKG</a> 2015 (Daten verändert)'
});
// Layerlisten für die Layercontrol erstellen und dabei initial aktive Layer zur Karte hinzufügen
var baseLayers = {
"OpenStreetMap": osmlayer.addTo(karte)
};
var satlayer = L.tileLayer.wms("https://maps.dwd.de/geoproxy/service/", {
layers: 'SAT_EU_central_RGB_cloud', //GefuehlteTemp
format: 'image/png',
styles: '',
transparent: true,
opacity: 0.6,
attribution: 'Satellitenbild METEOSAT (RGB) Europa Zentral: © <a href="http://www.dwd.de">DWD</a>'
});
var seenlayer = L.tileLayer.betterWms("https://maps.dwd.de/geoproxy_warnungen/service/", { //
layers: 'Warnungen_Binnenseen,Warnungen_Kueste',
format: 'image/png',
styles: '',
transparent: true,
opacity: 0.6
});
var pollenlayer = L.tileLayer.wms("https://maps.dwd.de/geoproxy/service/", { //
layers: 'Pollenflug_'+(new Date().getMonth()>=4?'Graeser':'Birke'),
format: 'image/png',
styles: '',
transparent: true,
opacity: 0.6
});
var overLayers = {
"<span title='DWD Geoserver dwd:Warnungen_Gemeinden_vereinigt'>Warnungen einblenden</span>": warnlayer.addTo(karte),
"<span title='DWD Geoserver Gemeindewarngebiete'>Gemeindegrenzen</span>": gemeindelayer,
"<span title='Satellitenbild METEOSAT'>Satellitenbild</span>": satlayer
, "<span title='Warnungen_Binnenseen und Küste'>Warnungen Binnenseen</span>": qs.match("see")?seenlayer.addTo(karte):seenlayer //?ort="Ostsee"
}; overLayers["<span title='Pollenflug'>"+pollenlayer.options.layers+"</span>"] = pollenlayer
// Layercontrol-Element erstellen und hinzufügen
var lc = L.control.layers(baseLayers, overLayers).addTo(karte); //, {autoZIndex:false})
// Demo-Marker mit Popup hinzufügen
//var marker = L.marker([50.099444, 8.770833]).addTo(karte);
//marker.bindPopup("<b>Deutscher Wetterdienst</b><br>Wetter und Klima aus einer Hand").openPopup();
L.control.scale({imperial:false}).addTo(karte); //
//})();
</script>
<script src="src/addons_dj.js"></script>
</body>
</html>