Colour scaling and masking in Global Wind Atlas

With the release of Global Wind Atlas (GWA) 3.3, we added some exciting new features to the application (you can find more info on that here). In this article we will talk about some technical aspects of the implementation of two features: changing the interactive legend (colour scaling) and a new masking tool.

Colour scaling data layers

With colour scaling, users can not only choose a colour map from a range of options (like viridis), they can also set the minimum and maximum values for the GWA data layers being rendered, an action also known as rescaling. Having the flexibility to rescale the colour of the rendered layers allows users to highlight an area of interest, like for example areas with windspeeds between 4.8 and 9 m/s.

In previous versions of the Global Wind Atlas, we served all the data as pre-rendered PNG tiles. This is an extremely simple and cost effective solution, as it only requires serving static tiles from an (S3) bucket, without the need for any tile server. This solution, however, has some major limitations. The biggest one is not having access to the raw data values in the front end application: when tiles are already pre-rendered into coloured tiles, the actual data values used to calculate these colour values are lost. Any attempt to rescale the colours then involves some heavy server side re-rendering. A possible workaround for retrieving the original data in the front end could be recalculating the raw data values from the RGB pixel-values. This solution is far from perfect as it will no-doubt introduce some error to the computed data. 

Alternatively, serving the raw COG data as map tiles opens up a lot of possibilities on what can be done in the user's browser (more info about Cloud Optimized Geotiffs in this blog post). When you have this type of access, no compromises need to be made on the accuracy of the data and all the tile rendering can be done on the client side. This allows us to re-render tiles in real-time when the user interacts with user interface. Changing the legend and colour scale can be done fast and efficient, without any need for server support.

Leaflet, the mapping library that we use, has also made it extremely trivial to implement our own custom plugin for rendering COG tiles. In fact, Leaflet allows developers to create plugins for rendering any HTML element as a tile. In GWA we render a canvas as map tiles. Such a canvas allows pixel level manipulation on what is displayed on the map and can be updated in real-time with user input.

Masking layers

With a mask, users can hide part of the data they are not interested in with a (dark) overlay. With the new masking feature in GWA, users can create this mask based on the values in any available data layer.



By making use of client-side tile rendering, for which the foundations have already laid by building the new colour scaling feature, we are now able to compute the masking values quite efficiently based on the raw data values from the COG tiles. Overlaying one canvas tile on top of another is made very easy, thanks to Leaflet.

In the application, users can also download the mask they just created. Doing this in the front end means merging data from multiple tiles, which makes things needlessly complicated, so for this feature, we are still using our trusty backend server which is running a GDAL service. GDAL is very efficient at generating masks starting from COG files.

We are very happy to be able to use all the opensource libraries and tools available in the GIS community and in return, we are also committed to making our own contribution to the opensource community.