23
Coastal Hazards System (CHS) Web Tool-ESRI-V4 User Guide 24 August 2017 Contacts: Norberto C. Nadal-Caraballo, PhD ([email protected]) Debbie Green ([email protected], 601-634-2065) US Army Engineer Research and Development Center 3909 Halls Ferry Rd Vicksburg, MS 39180 Getting Started The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure 1). This API was deprecated and shutdown in December 2016. The new CHS Web Tool features an ESRI map interface and is using ESRI’s JavaScript API, also known as SceneView. The overall framework and navigation pane remains the same as the original system, but the map views, drawing tool, and some of the navigation is slightly different. This User Guide will illustrate how to maneuver in and obtain data from the new ESRI map based CHS Web Tool. Navigation There are 3 main sections to the Coastal Hazards System web interface: the toolbar, the navigation options pane and the map interface (Figure 2). The toolbar provides access to each selected project’s “Document Center” and access to the data selection drawing tool. The Navigation pane provides data screening tools, and the map allows the user to view data locations, zooming in to a specific area of interest.

Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Coastal Hazards System (CHS) Web Tool-ESRI-V4 User Guide

24 August 2017

Contacts: Norberto C. Nadal-Caraballo, PhD ([email protected])

Debbie Green ([email protected], 601-634-2065) US Army Engineer Research and Development Center 3909 Halls Ferry Rd Vicksburg, MS 39180

Getting Started

The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure 1). This API was deprecated and shutdown in December 2016. The new CHS Web Tool features an ESRI map interface and is using ESRI’s JavaScript API, also known as SceneView. The overall framework and navigation pane remains the same as the original system, but the map views, drawing tool, and some of the navigation is slightly different. This User Guide will illustrate how to maneuver in and obtain data from the new ESRI map based CHS Web Tool.

Navigation

There are 3 main sections to the Coastal Hazards System web interface: the toolbar, the navigation options pane and the map interface (Figure 2). The toolbar provides access to each selected project’s “Document Center” and access to the data selection drawing tool. The Navigation pane provides data screening tools, and the map allows the user to view data locations, zooming in to a specific area of interest.

Page 2: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 1 Former CHS opening screen with user interface areas annotated

Figure 2 New CHS Web Tool Main Screen with user interface areas noted

The toolbar contains a Project Document Center button, a Data Selection Drawing Tool button, and a Help button which is represented with a question mark in the upper right hand corner of the screen. Clicking on the vertical bars in the upper left corner of the toolbar collapses the Navigation Options Pane to the left, allowing more viewing area for the map. Each of these toolbar options will be discussed in more detail later in this document.

The Navigation Options Pane is where you can select your project, sub-region or sub-project, and save point data types and storm tracks. The selections in this pane are synced with the map interface

Page 3: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

allowing users to focus on their area and data of interest. These window options will be discussed in more detail later in this document.

The map interface, formerly a Google Earth plug-in, is now an ESRI map. However, navigating in it is basically the same as navigating in Google Earth. Use the mouse wheel to scroll/zoom in and out on the map. To pan, or move the map to another location, click on the map, hold down the left mouse button, and drag the mouse. You can also use the plus and minus buttons on the upper right-hand side of the map to zoom in and out. Clicking on the round compass button below the plus and minus buttons will reposition the top of the map to North. Below the compass button are two buttons that allow the users to toggle between panning and rotating in 3D.

Begin by selecting a Project from the Projects listing in the Navigation Options pane on the left hand side of the map and selecting a sub-region/sub-project of interest.

In the former CHS map interface, shaded tiles appeared on the map that represented areas where there is point data available and the number in the shaded tile represented the number of underlying point locations (Figure 1). The new CHS map interface, as shown in Figure 2 above, shows only a single shaded ellipse that covers the region of the project selected. The number inside the polygon still represents the number of underlying point locations. This point data is represented in the navigation pane on the left, under Data Types. Currently, under Point Data, there is Model data, which represents either Model Results (output data from ADCIRC, STWAVE, WAM, and/or SWAN), or Statistics Results (AEP, NLR). Observations (measurements from NOS Water Level Stations, NDBC Buoys, or Land Based Meteorological Stations) will be added, as well as other data types in the near future. The user can select and de-select any of the various types of Point Data using the check boxes in the Data Types drop-down to turn on and off feature layers on the map. Orange diamond shaped icons display on the map representing point locations on the map for the selected data types.

Zooming in to your area of interest on the map, will display icons representing the point data locations based on the data types selected in the navigation pane (Figure 3). If you place the mouse pointer over an icon, a text label that identifies the data types and point ID’s will appear on the map for that point location. Note that icons can only be viewed at a zoom scale that limits the screen lag as the user navigates to the area of interest. There is a tremendous amount of underlying data in any given region and the zoom scale varies by region and by project.

Page 4: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 3 CHS view zoomed in to NACCS region with point data locations shown

Clicking the left mouse button with the cursor on any of the icons will display an information window which identifies the location, the data types and the parameters available for that location (Figure 4).

Figure 4 CHS view with save point information window

One significant difference from the previous system is that currently, there are no individual data type icons (such as icons for ADCIRC, STWAVE, WAM, AEP, etc.). One icon represents the point data location. Clicking on that icon displays a popup window which has a “Next” button in the lower right hand corner and a “Prev” button in the lower left hand corner of the window. Clicking these buttons will scroll through the various data types that are selected in the navigation pane and that are available for that

Page 5: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

particular point location. For some data types, such as the AEP Statistics Results, additional information or graph images will be displayed in the popup window, as shown in Figure 5. Clicking on the graph will enlarge it for better viewing. It can also be saved as an image.

Figure 5 Icon Popup Showing Static AEP plot

Data Selection

To select data, using the new ESRI map interface, zoom in so that you can see the icons for the point locations that you wish to select. On the top menu bar, the Toolbar section, to the right of the Document Center button, there is a drawing tool button (Figure 6) that changes the mouse mode to allow for selection of icons on the map by drawing around, or lassoing, them.

Figure 6 Toolbar Drawing Tool button

Using the Drawing Tool to select data

Click on the drawing tool button and you will notice two additional buttons (Submit and Clear) appear on the tool bar next to the drawing tool button (Figure 7).

Page 6: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 7 Toolbar Drawing Tool – Submit & Clear buttons

The mouse pointer is now in selection mode and you are ready to interact with the map to select your icons by drawing a circle, or ellipse, around them. To do so, left-click once on the map, holding down the mouse button, drag the mouse to draw around, or lasso, the point locations you want to select. Releasing the mouse button will close out the lasso on the map (Figure 8). You can then click the “SUBMIT” button on the tool bar if you are ok with your selection. If not, click the “CLEAR” button to clear the map. You can then click the drawing tool button and try again. Once you click “SUBMIT” a window will display on the map with a list of the point locations identified (Figure 9).

Figure 3 CHS view with rectangular save point selection area

Figure 4 CHS view with data selection window associated with selection in Figure 7

Page 7: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Downloading Model Results

Once you’ve selected the point location icons of interest via the map interface using the drawing tool described above, you can easily download the results of your selection. To select save points, click the small box to the left of each save point ID. A check mark appears in the box to mark the save point as being selected (Figure 10).

Figure 10 Zoomed in view of data selection window

Once the save points have been selected, click the Download button at the top right of the data selection window to download all model results for those save point locations.

After clicking the Download button, a window appears which allows the user the option of downloading the data in either H5 or CSV format, or both formats (Figure 11). At this window you select if you want CSV, HDF5 or Both by clicking on the small radio button to the left of each type. Once you select one of the types, you click the small download button with the downward arrow, which is to the right of each type. Your download will begin immediately in the form of a single zip file named CHSData.zip and will be placed in your default Downloads location folder for your browser. If you already have a CHSData.zip file, the system will name the file CHSData(1).zip and will continue sequential numbering as additional files are downloaded.

Page 8: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 11 Data Selection Download Window

Figure 12 provides a screen capture showing the .zip file opened with WinRAR software. Note that the folder paths are maintained in the download, separating model results, storm types and data types.

Figure 12 WinRAR Explorer Window opened showing contents of downloaded .zip file

Page 9: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Viewing and Plotting Model Results

Select save points using the drawing tool described above. An example of points selected on the map is shown in Figure 13 below.

Figure 5 Selection of points

Clicking the green Submit button in the toolbar at the top of the map will produce a popup window that provides access to all of the underlying data for those point locations (Figure 14). Select the save points in the Model Results tab of the window that appears on the map screen. Once the save points have been selected, you can choose to display the time series parameters or the peak parameters.

Figure 6 Data selection window

Page 10: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Selecting the Display Peaks button displays all of the parameters available for all of the storms modeled for each save point selected (Figure 15). The screen capture in Figure 15 shows the window that appears after left-clicking the Display Peaks button. There is a scrollbar on the right which can be used to scroll down the page to view all of the parameters in the list. Clicking the small box to the left of the save point ID selects that parameter for either displaying or plotting. You can select multiple parameters, but for plotting the values, you can only select two different unit types.

Figure 7 Model Results save points listing parameters in peaks files

Under the Model Results tab there is a filter option for the parameters being displayed in the window. If you want to view all of the parameters for just a single storm, select the header “Storm ID” from the drop-down list in the Peaks Filter window, then type the storm id number in the window and left-click the “Load Records” button. The window will now list only parameters for that storm (Figure 16).

Page 11: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 8 Filter parameter list by storm id

The parameters list can also be filtered by parameter type. To view only water elevations for all of the storms, select the header “Parameters” from the drop-down list in the Filter Peaks By window, type “Water Elevation” in the window and left-click the “Load Records” button. The window will now only display the water elevations, for all of the modeled storms (Figure 17).

Figure 9 Filter parameter list by parameter type

Page 12: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

To view the peak water elevation values for storms 1-11, select each storm and left-click on the Display Selected Peak Values button (Figure 18).

Figure 18 Select peak parameters

The window will display the values, units, the parameter name, the storm name, storm id and the save point id (Figure 19). Left-clicking the Back button, in the upper right corner above the values, will take you back to the previous screen.

Page 13: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 19 Displaying peak water elevations for selected storms

The peak values can also be displayed on a graph by left-clicking the Display Chart button, but keep in mind that the graph is a time series and will only plot a single point for each parameter selected. An example plot is shown in Figure 20.

Figure 10 Plotting peak water elevations for selected storms

Page 14: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Left-clicking the Back button on the Model Results window will take you back to the list of save points. In Figure 21 below, an ADCIRC and an STWAVE save point is selected. Left-clicking on the Time Series button will display all of the parameters available for plotting (Figure 22).

Figure 11 Selecting an ADCIRC Save Point for plotting time series

Figure 12 ADCIRC and STWAVE Time Series parameters available for plotting

In Figure 22 above, the parameters Water Elevation and Atmospheric Pressure are selected for synthetic storm ID 1. Left-clicking the Display Chart button produces the graph shown in Figure 23.

Page 15: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 13 Plotting Water Elevation and Atmospheric Pressure for a single storm

Note that the graph window can be moved around on the map screen and can be resized. It is also interactive. Moving the mouse pointer at various locations on the time series graph will display a window with the data point values and time, as seen in Figure 23 above. The graph also has a zoom function. Placing the mouse pointer on the bottom graph will change the pointer to a crosshair. Left-click and drag to the right and release to select a portion of the time series graph to zoom in to. That portion will then be displayed in the larger graph above. You can move the selection in the bottom graph using the sliders as seen in Figure 24 below. To go back to the full graph, move the mouse in the bottom graph so that you see the crosshair and double-click the left mouse button.

Page 16: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 14 Zoom function of graph window

Viewing and Downloading Statistics Results

Statistics results for individual point locations are included in the CHS Web Tool as a Data Type and can be turned on or off in the navigation pane Data Types tree on the left hand side of the map. Note that statistics results vary from project to project and may not be available yet for some projects, or some locations. Figure 25 below is an example showing the NLR results on the map. The color-coded icons can be clicked to view a popup window with the NLR value for that point location. Various types of uncertainty and bias for NLR are listed in the Data Types tree under Statistics Results, but only one type can be viewed at a time. Clicking on any of the NLR types in the tree will refresh the map and the legend.

Page 17: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 15 NLR Statistics Results on the map

To download or view further statistics results, use the drawing tool (described above) to select (lasso) the points of interest (Figure 26). Click the green Submit button and a popup window will display.

Figure 16 Selecting NLR Statistics Results on the map

Note that the initial popup window states that no data is currently available (Figure 27). But, that is only because the Model Results tab is selected by default and no model results are turned on in the navigation pane on the left. To view the results selected, click on the AEP Results tab or the NLR Results tab, since they are both turned on in the Data Types tree in the navigation pane on the left side of the map.

Page 18: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 17 NLR Initial Popup Window

Figure 28 below shows the AEP Results window for the three point locations selected on the map. In this window you can select the point ID’s and then you can either display the values or download the files for these locations. Clicking the Download button produces a window which allows the user the option of downloading the data in either H5 or CSV format, or both formats (Figure 29). At this window you select if you want CSV, HDF5 or Both by clicking on the small radio button to the left of each type. Once you select one of the types, you click the small download button with the downward arrow, which is to the right of each type. Your download will begin immediately in the form of a single zip file named CHSData.zip and will be placed in your default Downloads location folder for your browser. If you already have a CHSData.zip file, the system will name the file CHSData(1).zip and will continue sequential numbering as additional files are downloaded. If you choose to download CSV files, an online conversion program is executed, which may require several minutes to complete. A message will appear prior to the conversion to allow you to proceed or cancel (Figure 30).

Page 19: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 18 AEP Results tab

Figure 19 AEP Results download window

Page 20: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 30 Conversion to .csv files popup window

Figures 31 and 32 below demonstrate the capability to “Display AEP” values by selecting the AEP parameters and clicking on the button to display the values for the selected parameters.

Figure 31 AEP Results parameters selected for display

Page 21: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 32 AEP Results values displayed

Clicking on the NLR Results tab allows you to download the NLR file for the entire project, which contains the NLR values for the selected type in the Data Types tree, for all points for the selected project (Figure 33). Clicking the “Download NLR File” button produces the same download files window that provides the option of downloading in H5 file format, or converting to .csv file format and downloading (Figure 34).

Figure 33 NLR Results tab window

Page 22: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 34 NLR Results file download window

Storm Data

The Storm Tracks map display capability is currently under development and will be available soon.

Project-specific historical and synthetic storm tracks are currently available for download via the Document Center button located in the center of the top toolbar (Figure 35). The tracks are available as KML files and are zipped along with, in some cases, save point locations. Storm conditions files are also available for download via the Document Center button.

Figure 35 Project Document Center button

After selecting a specific project and sub-project, left-click on the Document Center button to display a window that contains a list of all files available for download (Figure 36). This list will include various types of files in both HDF5 and CSV formats, and may include files such as published reports in PDF format, KML files, model grid files, MatLab Scripts and any documentation that is specific to the selected project. Some files are packaged in .zip files for easier download.

Page 23: Coastal Hazards System (CHS) · 2017-08-23 · The Coastal Hazards System (CHS) Web Tool was originally constructed using the Google Earth API for the map based interface (Figure

Figure 36 Document Center popup Window for NACCS

Tropical Synthetic storm parameters can be accessed by clicking on the Storm Data tab in the Navigation Options pane on the left and clicking the button labeled Tropical Synthetic Storm Parameters, as shown in Figure 37 below. The storm parameters file is available in two different formats, H5 or CSV, and can be downloaded easily by clicking the Download link to the right of the file name.

Figure 37 Tropical Synthetic Storm Parameters Download for NACCS