Tutorial for New Web Site

Page Layout

Below is a sample of the web page and the sections on every page.

Figure 1: Top of web page
  • Header Bar - This is a standard header based on the weather.gov layout. Each of the elements are links to other sites such as NWS, NOAA and Dept. of Commerce. Click on the "Aviation Weather Center" text to go to the web site's home page.
    Figure 1: Example of login
    When a user logs in, their name appears in the upper right of the header bar and the User menu changes to "Logout" and "Profile".
  • Favorites Bar - This is a set of quick links to other pages on the site. This helps navigation in the absence of the left hand menu. These can be set up through the "User" "Settings" page.
  • Navigation Bar - This is the primary navigation bar. It replaces the left hand menu from the older site. All items are available by either hovering over or clicking on the header item.
    Figure 2: Use of navigation bar
    All links on the web site are in blue and will change to orange when you hover over them.
  • Local Forecast - This provides the same local forecast that weather.gov with one caveat. If you put in a 4 letter ID for an airport, you'll get an airport specific aviation forecast. This is also available under the "User" drop down for access on all pages.
  • Top News - The intent on the new web site is to provide more news items. So only a news headline is listed along with the date of issuance. Clicking on the headline, takes you to the new page where the text is displayed.
  • Page Title - This is the title for the page which describes the type of data being displayed. In this case, it's "Aviation Weather Overview". The INFO link will take you to a help page for that display.
  • Map Display - This is a current map for a particular data type. On the METARs page, it's an OpenLayers GIS map containing METARs. On the main page, it's a composite of current aviation information with roughly a dozen layers that can be turned on and off.
Figure 3: Bottom of web page
  • Additional Info/Links - Below the map are typically links to other pieces of data (see example below). On the main page, this area is used for the mission statement
  • Bottom Navigation - This mimic the top navigation bar but with all the links listed. This is a quick view of the pages.
  • Footer - This is a standard footer of critical links to other sites and information pages.

User Settings

Figure 4: User Settings

The user settings page under the "User" drop down allows the user to set up preferences for the web site. At this point there are two available settings:

  • Interactive Map Toggle - This toggles the interactive GIS maps on or off.
  • Favorites Bar Setup - This allows the user to set up seven quick links that will display at the top of every page (see Fig. 1).

OpenLayers GIS Page Layout

Figure 5: OpenLayers GIS Page layout
  • Page Title - This is the title for the page which describes the type of data being displayed. In this case, it's "ADDS METARs".
  • OpenLayers Map - The interactive GIS map has these components:
    • Data type and valid time label - This appears above the map and displays the type of data plus the valid time. This is updated when data in the display are updated.
    • GIS Map - This is typically a 800x500 pixel display are for OpenLayers to display data.
    • Zoom Controls - Located at upper left of map. These are used to zoom in and out on the map. The scroll wheel on the mouse will also work.
    • Full Screen Toggle - Located in the upper right of map. This toggles the map display into full screen mode. When in full screen, this button will toggle back to normal mode
    • NOAA Logo/Menu Toggle - In normal mode, this is just a label. In full screen mode, this will toggle the display of the data control menu.
    • Location Display - Located in the lower right corner of display. This shows the current latitude and longitude of the cursor or "--" if the cursor is off the map.
  • Data Controls - These are the controls for the OpenLayers GIS Map. The controls for most displays will be above the plot or data but the selections on the GIS map are more extensive so they're put below the map. The controls are broken into sections for the selection of background maps, map overlays, types of data plotted and how that data are to be plotted.
  • Additional Links/Data - This section has links to the static plots by region and the ability to select raw METAR data by site or region. Typically pages will be laid out this way with links to plots on the lower left and links to raw data on the lower right.

Data Selection

Figure 6: OpenLayers Data Pop-up

When either point data such as a METAR report or a advisory polygon are selected, a pop-up window will appear with more data for that location. In some cases, the box will be partially off screen but the map can be panned to show the entire pop-up.

Data Plots

Figure 7: OpenLayers Station Model Plot

In many cases, the data are plotted using standard symbols and plotting models. Fig. 7 shows the station model used in the METAR and TAF plots.

  • Temp - Temperature plotted in the upper left in F (C for metric setting)
  • Altm - Last three digits of the altimeter setting plotted upper right in inches Hg (hPa for metric). In this case, 966 represents 29.66 inches Hg.
  • Ceiling - Ceiling height in hundreds of feet. This represents the height of the lowest broken or overcast cloud layer.
  • ICAO - The 4 letter ICAO identifier for the site. KRFD is Rockford IL.
  • Windbarb - The wind barb. The stick points in the direction the winds are coming from. Each full barb represents 10 knots of wind. Each half barb represents 5 knots. Red represents wind gusts. In this case, you have winds from the SSW at 25 knots with gusts to 30 knots.
  • Dewpt - The dewpoint temperature plotted in the lower left in F (C for metric setting).
  • Visib - The visibility plotted to the left of the weather symbol, in statute miles (km for metric).
  • Wx - A symbol representing present weather plotted just to the left of the cloud cover symbol.
  • Cloud - The cloud cover symbol is plotted in the center. The amount the circle is filled represents the amount of cloud cover. In this case, it's overcast. The color of the circle represents the flight conditions:
    • green - VFR (Visual Flight Rules)
    • blue - MVFR (Marginal Visual Flight Rules)
    • red - IFR (Instrument Flight Rules)
    • purple - LIFR (Low Instrument Flight Rules)

Plot Page Layout

Figure 8: Plot Page layout

The Plot Page layout is similar to the GIS page layout.

  • Title - Page title
  • Links - Links to other similar pages. In this instance, links back to the main METAR page and to the data and METAR board pages.
  • Data Controls - These are the controls for the plot. This allows you to update region, time, etc. for the plot on the fly. The "<<" and ">>" allow you to quickly go back and forwards through time.
  • Plot - The plot area.

Loop Controls

Figure 9: Loop controls

The loop controls are very similar to the plot page data controls except a "Loop" toggle button is added. When the page is first loaded, only the latest image is displayed. The "<<" and ">>" buttons back step and forward step through the loop. When the "Loop" button is clicked, the "<<" and ">>" buttons slow down the loop speed or speed it up. The "Loop" button is now changed to a "Stop" button to pause the loop.

Data Page Layout

Figure 10: Raw Text Page layout

The Plot Page layout is similar to the GIS page layout.

  • Title - Page title
  • Links - Links to other similar pages. In this instance, links back to the main METAR page and to the plot and METAR board pages.
  • Data Controls - These are the controls for the data. This allows you to update station identifiers, format, number of hours and whether a TAF is included. Outside of the IDs, the update is done on the fly. A Submit button is added for the ID update. When the new stations are entered, either the Submit button or the Enter key can be pressed.
  • Raw Data - The raw data are output to this area. In some cases a horizontal rule is added to the output for great clarity. In this case, to separate data from each location.

The identifiers entered in the ID box can be a list of stations separated by a space or comma (i.e. KMCI KORD) or can be a region specifier. In this case, @TOP is the output from the top U.S. airports. You can enter two letter state abbreviations (i.e. @NY, @MO) or country abbreviations (i.e. #GB, #DE).

Page loaded:  15:32 UTC  |   08:32 AM Pacific  |   09:32 AM Mountain  |   10:32 AM Central  |   11:32 AM Eastern