Skip navigation
All Places > GeoDev Germany > Blog > 2015 > April
2015

In bestimmten Fällen kann es gewünscht sein, dass man in einer Web App aus einem eigenen Widget heraus wieder ein anderes Widget oder mehrere andere Widgets öffnen kann. D.h. in dem einen Widget befindet sich z.B. ein Button, über den man beim Anklicken ein anderes Widget öffnet, wie in der folgenden Abbildung gezeigt:

WidgetAusWidget1a.png

Durch Anklicken des Buttons in dem ersten Widget öffnet sich dann das zweite Widget:

WidgetAusWidget4.png

Um dies zu erreichen, muss zuerst im ersten Widget ein Button mit einem entsprechenden Icon angelegt werden. Den Button kann man z.B. in der Datei Widget.js in der Methode startup() wie folgt anlegen:

StartupCode.png

Dabei wird über DoJo-Funktionen dynamisch ein HTML-DIV Element und ein darin enthaltenes IMG Element angelegt. In einer Eventhandlermethode wird auf das Anklicken des Buttons reagiert und darin eine Funktion aufgerufen, die das zweite Widget aufruft:

ShowWidgetCode.png

Hier wird zuerst die Widget-Konfiguration des zu öffnenden Widgets ermittelt und dann über den PanelManager das Widget über die Funktion showPanel() aufgerufen. Zu beachten ist dabei, dass der PanelManager im define-Block des Widgets aufgenommen wird.

 

Happy coding!

Sehr schöne Story Map über moderne Flughäfen. Mir gefällt besonders der Einsatz von Analytik wie bspw. Heatmaps (7) und Operations Dashboards für Echtzeit-Auswertungen (4, 5).

 

Inside a Modern Airport

 

Inside a Modern Airport.PNG

l.schmitzesri-de-esridist

Maps We Love

Posted by l.schmitzesri-de-esridist Employee Apr 29, 2015

Esri hat unter dem Namen "Maps We Love" eine sehr inspirierende Website veröffentlicht, auf der ständig neue Maps & Apps veröffentlicht werden. Schaut doch mal rein, es lohnt sich!

 

Maps We Love.PNG

Vergangene Woche fand in Berlin der GeoBusinessCongress statt. Auf Einladung der Kommission für Geoinformationswirtschaft an der Bundesanstalt für Geowissenschaften und Rohstoffe (BGR) habe ich dort das Esri Startup Program vorgestellt. Den Foliensatz könnt Ihr Euch im Nachgang auch hier anschauen.

 

GeoBusinessCongress.JPG

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.

Windspitze.png

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.

SonneRegen.png

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

MitTemp.png

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

Filter Blog

By date: By tag: