Adds rst and png files for Map Layout tutorial (#954)

* Adds rst and png files for Map Layout tutorial * Minor review edits * Additional tweaks. --------- Co-authored-by: Nathan Swain <nswain@aquaveo.com> Co-authored-by: Nathan Swain <swainn@users.noreply.github.com>
tethysplatform · May 13, 2023 · cf75882 · cf75882
1 parent b575dd0
commit cf75882
Show file tree

Hide file tree

Showing 17 changed files with 1,253 additions and 3 deletions.
diff --git a/docs/tethys_sdk/layouts/map_layout.rst b/docs/tethys_sdk/layouts/map_layout.rst
@@ -4,7 +4,7 @@
 Map Layout
 **********
 
-**Last Updated:** January 2023
+**Last Updated:** May 2023
 
 The ``MapLayout`` provides a drop-in full-screen map view for Tethys Apps. Displaying a map with a few layers can be accomplished in tens of lines of code and implementing more advanced functionality can be accomplished in hundreds. It includes a layer tree with visibility controls and actions such as "Zoom to Layer". The view can also includes many optional features such as displaying legends for layers, feature selection, map annotation / drawing tools, location lookup via geocoding, and a click-and-plot feature.
 
@@ -21,7 +21,11 @@ Setting up a new ``MapLayout`` involves the following steps:
 
 1. Create a new class in :file:`controllers.py` that inherits from ``MapLayout``.
 2. Decorate the new class with the :ref:`controller-decorator` to set up routing. 
-3. Configure the new ``MapLayout`` by setting properties on the new class. Review the :ref:`MapLayout properties <map_layout_properties>` for a full list. For example, set the ``map_title`` property to set the title of the view that appears in the navigation bar. 
+3. Configure the new ``MapLayout`` by setting properties on the new class. Review the :ref:`MapLayout properties <map_layout_properties>` for a full list. For example, set the ``map_title`` property to set the title of the view that appears in the navigation bar.
+
+.. tip::
+
+    Checkout the :ref:`Map Layout Tutorial <tutorial_map_layout>` for step-by-step instructions for using the ``MapLayout``.
 
 The following example demonstrates how to create a new ``MapLayout`` view:
 

diff --git a/docs/tutorials.rst b/docs/tutorials.rst
@@ -26,6 +26,7 @@ Learn how to add spatial data visualizations and use spatial web services in Tet
 .. toctree::
    :maxdepth: 1
 
+   tutorials/map_layout
    tutorials/geoserver
    tutorials/thredds
    tutorials/google_earth_engine

diff --git a/docs/tutorials/map_layout.rst b/docs/tutorials/map_layout.rst
@@ -0,0 +1,31 @@
+.. _tutorial_map_layout:
+
+**********
+Map Layout
+**********
+
+**Last Updated:** June 2022
+
+This tutorial demonstrates how to use Map Layout in a Tethys app within the context of visualizing the outputs of the "Next Generation Water Resources Modeling Framework" (NextGen) developed by the National Oceanic and Atmospheric Administration's Office of Water Prediction (NOAA-OWP).
+
+.. figure:: ./map_layout/resources/map_layout_app.png
+    :width: 800px
+    :align: center
+
+Outline
+-------
+
+.. toctree::
+   :maxdepth: 1
+
+   map_layout/new_app_project
+   map_layout/configure_map_layout
+   map_layout/data_prep
+   map_layout/add_spatial_data
+   map_layout/configure_data_plotting
+   map_layout/additional_exercises
+
+Attribution
+-----------
+
+This tutorial was created for use in a live workshop that was part of the 2023 CIROH Training and Developers Conference in Salt Lake City, Utah.