<\/HEAD>
The general weather situation over Germany during the past two days was dominated by Niklas, one of the strongest storms in recent years. And while the country, and especially the Bahn<\/SPAN><\/A>, are still busy with the cleanup, let's take a look at a map to see what actually happened on these two days:<\/P>With the help of two CSV tables, downloaded from the homepage of the Deutschen Wetterdienstes<\/SPAN><\/A>, a web map on ArcGIS Online was created quite quickly. Each table results in a layer for each of the two days. Both map layers were then published as Hosted Feature Services and made publicly available.
The services can now be consumed from anywhere, and with the help of the new features in the ArcGIS API for JavaScript<\/SPAN><\/A>, the small application "Sturm Niklas over Germany<\/SPAN><\/A>" generates beautiful views of the weather that arrived at the measuring stations.<\/P>
<\/P>Essentially, the new "Smart Mapping" module<\/SPAN><\/A> is used, i.e., "smart cartography." Under this magic word, it is made easy for both beginners and experienced users to create useful and impressive maps: The module provides a number of preconfigured renderers that can simply be applied to attributes and classify features by color, size, or location. Initially introduced in the March release of ArcGIS Online, the JS API has supported these new capabilities since version 3.13.<\/P>As an additional goodie, the new "Search Widget"<\/SPAN><\/A> was integrated, which can search not only a Locator Service but also any simple Feature Service. In the case of the "Sturm Niklas" application, we simply search the field with the names of the weather stations in one of our two feature layers.<\/P><\/P>
And what does the application do that ArcGIS Online cannot?<\/H3>As usual, developers have more advanced options than through the GUI. In this case, predefined Smart Mapping renderers are intercepted in code and changed depending on the data. This way, you still benefit from presets like automatic class breaks or a color range but can adjust individual properties.<\/P>The rendering happens on the client side here, which can naturally affect performance with large data volumes. However, with such simple tables and two overlaid layers, display speed remains within limits.<\/P><\/P>Rendering in the application<\/H3>You can switch between different weather data via a menu. Instead of simply showing or hiding a layer, the renderers for both daily layers are redefined. The menu selection just defines a new attribute field, and through various conditional statements, renderer settings are set. Here is a short excerpt showing how distinctions are made by field (lines 2-6) or layer name (line 15) and how in certain cases different colors are assigned to symbols of the smart ClassBreakRenderer:<\/P>else if ( <\/SPAN><\/EM>
field === "RR24" ||<\/SPAN><\/EM>
field === "FX" ||<\/SPAN><\/EM>
field === "SSS24" ||<\/SPAN><\/EM>
field === "SGLB24" ||<\/SPAN><\/EM>
field === "Height") {<\/SPAN><\/EM>
//Here begins Smart Mapping<\/SPAN><\/EM>
smartMapping.createClassedSizeRenderer({<\/EM><\/SPAN>
layer: renderLayer,<\/SPAN><\/EM>
field: field,<\/SPAN><\/EM>
basemap: map.getBasemap(),<\/SPAN><\/EM>
classificationMethod: "quantile"<\/SPAN><\/EM>
}).then(function (response) {<\/SPAN><\/EM>
// Display following day in gray<\/SPAN><\/EM>
if (renderLayer.name==="DWD_20150401" || field === "Height") {<\/SPAN><\/EM>
array.forEach(response.renderer.infos, function (f) {<\/SPAN><\/EM>
f.symbol.color = new Color.fromHex("#CCCCCC");<\/SPAN><\/EM>
});<\/SPAN><\/EM>
}<\/EM><\/SPAN>
else {<\/EM><\/SPAN>
// on 31.3. distinction by data<\/EM><\/SPAN>
if ( <\/EM>
field === "SSS24" ||
field === "SGLB24") {
array.forEach(response.renderer.infos, function (f) {
f.symbol.color = new Color.fromHex("#EDD873");
});
}Through this conditional statement, different colors are assigned for different data - rain is blue, sun is yellow, while all other "smart" properties of the ClassedSizeRenderer remain untouched. The data for 1.4., i.e., the storm follow-up day, is displayed in gray. This way you can see at a glance which weather station ranked higher on which day: More color means this station was "better" on storm day. If the gray circle is larger, that station ranks higher on 1.4.<\/P>
A different conditional statement does not set color values but an offset instead. This way values from both days appear side by side on the map.
< P > Thus , many beautiful , meaningful map views can be generated with little code and little effort . < / P > < P > < / P > < H3 id = "toc-hId-818160095 " id = "toc-hId-818160095 "> Code < / H3 > < P > The file "sturmniklas.html", containing all spaghetti code (yes , it is just a longer sample - not an application with recommended architecture!) is also available on Github : < A href = "https://github.com/esride-nik/esride-nik.github.io " title = "https://github.com/esride-nik/esride-nik.github.io " rel = "nofollow noopener noreferrer " target = "_blank ">< SPAN style = "color : blue ; "> esride-nik/esride-nik.github.io < / SPAN >< / A > < / P > < / BODY >< / HTML >
