Example 3b: Using multiple menus to select overlays

This examples show you how to create mulitple "overlay selection menus" so you can sort your overlay selections into logical groups. In this example, each overlay is for just one time period, so it will not "animate"; however, there is nothing to preclude you having otherwise normal overlays that have images for every time step.

The config file looks like this:

controls = zoom,menu1, menu2, menu3, menu4 controls_style = padding:5px;background-color:green; buttons_style = margin:5px; filenames=TIR1.GIF,TIR2.GIF,TIR3.GIF overlay_filenames= TSTR1.GIF,TSFC1.GIF, TVIS1.GIF, TSFC2.GIF, TVIS2.GIF, TSCF3.GIF, TVIS3.GIF, TMAP.GIF overlay_menu_links=1,1,1,2,2,3,3,4 menu1_labels = Time 1 menu2_labels = Time 2 menu3_labels = Time 3 menu4_labels = Map overlay_labels=Streamlines, Temperature, Visible 1715Z, Temp2, Vis 1815Z, Temp3, Vis 1915Z, Map overlay_labels_color=pink, white, cyan, black, magenta, orange, purple, yellow overlay_labels_style=bottom:20px;left:10px;font-family:arial;color:white;font-size:14px;padding:2px;background-color:green; overlay_tooltip = Show Temps, Show image, Show Temps, Show Image, Show Temps, Show Image, Overlay map

Note also, in order to get the desired positioning of the menus, it is convenient to add "position:relative" to the "style" for the "handiv" (the <div> element containing the HAniS display), so that the coordinates are relative to the HAniS display window. So it looks like this in the HTML for this example:
<div id="handiv" style="position:relative;width:500px;">

Go To Front Page
Next Example
This webapp Copyright© 2014-2020 by Tom Whittaker