Additional Exercises

Last Updated: June 2022

Now that you have completed the THREDDS tutorial, try one of the following exercises on your own to improve the usability of the app:

0. Start From Previous Solution (Optional)

If you wish to use the previous solution as a starting point:

git clone https://github.com/tethysplatform/tethysapp-thredds_tutorial.git
cd tethysapp-thredds_tutorial
git checkout -b plot-at-location-solution plot-at-location-solution-4.2

1. Initialize Dataset Select after Page Load

You may have noticed that it can take several seconds for the app to load. This is because the app is loading the datasets in the controller, which is less than ideal. Create a new controller for loading the datasets and call it after the page load, displaying the map loading indicator while it processes. This will give the use the impression that the app loads quickly, even though it takes the same amount of time.

2. Add Controls to Set the Color Scale Range

The current implementation uses hard-coded values for the color scale range of the style applied to the layer. See update_layer method of public/js/leaflet_map.js:

javascript
update_layer = function() {
    ...
    // Layer
    m_layer = L.tileLayer.wms(m_curr_wms_url, {
        layers: m_curr_variable,
        format: 'image/png',
        transparent: true,
        colorscalerange: '250,350',  // Hard-coded color scale range won't work for all layers
        abovemaxcolor: "extend",
        belowmincolor: "extend",
        numcolorbands: 100,
        styles: m_curr_style
    });

The hard-coded values work well for the temperature layers, but are inappropriate for many of the other layers. Add controls (e.g. input fields of type number) for setting the minimum and maximum values that define the color scale range. Then implement the appropriate javascript to update the style appropriately.

3. Dynamic Scale on the Legend Image

As implemented in this tutorial, the legend image always displays the default scale from -50 to 50. Investigate the GetLegendGraphic request for THREDDS WMS services to see if you can modify the legend to show the scale of the current layer. The current URL that is used can be found in the src attribute of the legend image and will be something like this:

html
<img src="https://thredds.ucar.edu/thredds/wms/grib/NCEP/GFS/Global_0p5deg/TwoD?REQUEST=GetLegendGraphic&LAYER=Temperature_isobaric&PALETTE=rainbow">

The URL for the legend image is set in the update_legend method in public/js/leaflet_map.js.

4. Set Color Scale Range Automatically

Use the Siphon client to determine the minimum and maximum values of the layer dynamically when retrieving metadata about the layer. Then use these values to set the color scale range and legend image in :file:`public/js/leaflet_map.js.

5. Visualize with Other Mapping Library

Try implementing a new page that visualizes the THREDDS data with a different map view provided by Tethys such as the Map View or Cesium Map View. For a challenge, try visualizing the data using Bokeh/Panel approach (see: Bokeh Integration Concepts).