Schlaues Kartografieren mit Niklas

[NiklasKöhn]

Die Großwetterlage beiden vergangenen Tage über Deutschland wurde beherrscht von Niklas, einem der stärksten Stürme der letzten Jahre. Und während das Land, und allen voran die Bahn, noch mit den Aufräumarbeiten beschäftigt sind, schauen wir uns auf einer Karte an, was eigentlich an diesen beiden Tagen los war:

Mit Hilfe zweier CSV-Tabellen, heruntergeladen von der Homepage des Deutschen Wetterdienstes, ist recht fix eine Webmap auf ArcGIS Online erstellt. Jede Tabelle ergibt einen Layer für jeden der beiden Tage. Beide Kartenlayer wurden anschließend als Hosted Feature Service veröffentlicht und öffentlich freigegeben.
Die Services können nun von überall konsumiert werden, und mit Hilfe der neuen Features in der ArcGIS API for JavaScript generiert die kleine Applikation "Sturm Niklas über Deutschland" schöne Ansichten des Wetters, das an den Messstationen ankam.

Im Wesentlichen kommt dabei das neue "Smart Mapping"-Modul zum Einsatz, also "clevere Kartografie". Unter diesem Zauberwort wird es sowohl Neulingen als auch erfahrenen Nutzern einfach gemacht, nützliche und eindrucksvolle Karten zu gestalten: Das Modul hält eine Reihe von vorkonfigurierten Renderern bereit, die einfach auf Attribute angewendet werden können und Features nach Farbe, Größe oder Lage klassifizieren. Zunächst im März-Release von ArcGIS Online eingeführt, unterstützt die JS API seit Version 3.13 die neuen Möglichkeiten.

Als weiteres Goodie wurde das neue "Search Widget" eingebaut, in dem nicht nur ein Locator Service, sondern auch ein einfacher beliebiger Feature Service durchsucht werden kann. Im Falle der "Sturm Niklas"-Applikation durchsuchen wir einfach das Feld mit den Namen der Wetterstationen in einem unserer beiden Feature Layer.

Und was tut die Applikation, was ArcGIS Online nicht kann?

Wie üblich hat man als Entwickler weiterführende Möglichkeiten als über die GUI. In diesem Fall werden die vordefinierten Smart-Mapping-Renderer im Code abgefangen und abhängig von den Daten geändert. Damit profitiert man weiterhin von den Voreinstellungen wie automatischen Class Breaks oder einer Color Range, kann aber einzelne Eigenschaften anpassen.

Das Rendering passiert hierbei im Client, was sich bei großen Datenmengen natürlich performancemindernd auswirken kann. Bei solch einfachen Tabellen und zwei übereinandergelegten Layern ist die Anzeigegeschwindigkeit jedoch im Rahmen.

Rendering in der Applikation

Über ein Menü kann zwischen unterschiedlichen Wetterdaten umgeschaltet werden. Dabei wird nicht etwa ein Layer ein- oder ausgeblendet, sondern die Renderer für die beiden Tageslayer neu definiert. Die Menüauswahl definiert einfach nur ein neues Attributfeld, und über diverse Fallunterscheidungen werden die Einstellungen der Renderer gesetzt. Hier ein kurzer Ausschnitt, in dem deutlich wird, wie nach Feld- (Zeilen 2-6) oder Layernamen (Zeile 15) unterschieden wird und wie in bestimmten Fällen den Symbolen des smarten ClassBreakRenderers eine andere Farbe zugewiesen wird:

else if ( 
    field === "RR24" ||
    field === "FX" ||
    field === "SSS24" ||
    field === "SGLB24" ||
    field === "Höhe") {
    //Hier beginnt das Smart Mapping
 smartMapping.createClassedSizeRenderer({
 layer: renderLayer,
       field: field,
       basemap: map.getBasemap(),
       classificationMethod: "quantile"
    }).then(function (response) {
      // Folgetag in grau darstellen
      if (renderLayer.name==="DWD_20150401" || field === "Höhe") {
       array.forEach(response.renderer.infos, function (f) {
          f.symbol.color = new Color.fromHex("#CCCCCC");
       });
 }
 else {
 // am 31.3. Unterscheidung nach Daten
 if ( 
 field === "SSS24" ||
 field === "SGLB24") {
 array.forEach(response.renderer.infos, function (f) {
 f.symbol.color = new Color.fromHex("#EDD873");
         });
 }

Über diese Fallunterscheidung werden für unterschiedliche Daten unterschiedliche Farben vergeben - Regen ist beispielsweise blau, Sonne ist gelb, während alle anderen "smarten" Eingeschaften des ClassedSizeRenderers unangetastet bleiben. Die Daten des 1.4., also des Sturm-Folgetags, werden in grau angezeigt. So sieht man auf einen Blick, welche Wetterstation an welchem Tag im "Ranking" vorne lag: Mehr Farbe bedeutet, diese Station war am Sturmtag "besser". Ist der graue Kreis größer, liegt die Station im Ranking des 1.4. weiter vorne.

Über eine andere Fallunterscheidung werden keine Farbwerte, aber ein Offset gesetzt. So erscheinen die Werte der beiden Tage nebeneinander auf der Karte.

So lassen sich mit wenig Code und wenig Aufwand viele schöne aussagekräftige Kartenansichten generieren.

Code

Die Datei "sturmniklas.html" mit dem kompletten Spaghetticode (ja, es ist einfach nur ein längeres Sample - keine Applikation mit empfehlenswerter Architektur!) ist ebenfalls auf Github zu finden: esride-nik/esride-nik.github.io