Time for Action – using Panels

In this example, we're going to demonstrate how to create and use the Panel class. We'll create a panel control object that will be placed in a div outside the map, and then add control objects to the panel. We're going to place the panel in a div element outside of the map. We'll first create an HTML <div> element to contain our panel. Add a new div after the map div like this:

<div id='panel_div'></div>

1. Now, we need to create a panel control object. We're going to first create a Navigation control object, as it will act as the 'default control' for the panel, which means it will be the control activated by default. Then, we'll create our panel object and place it inside of the previously created panel_div HTML element. Add a WMS layer to the init() function and place the following code after the map.addLayer() call.

   var navigation_control = new OpenLayers.Control.Navigation();
   var control_panel = new OpenLayers.Control.Panel({
     div: document...