Time for Action – creating a simple button

Let's create a simple button that has a CSS class and contains a trigger function that does a little something when we click on it.

1. Create a new page using the map template from Chapter 1. We'll be creating a button and a panel to place the button in (although, this time, the panel will be inside the map).

2. Before we create our button, let's create a function that will be called when we click on the button via the trigger function. We're actually going to create a variable and assign a function to it—this is one of the things that makes JavaScript pretty powerful. Let's make the function change the map's layer opacity and zoom to a random coordinate. Inside the init() function, add a WMS layer and after the map.addLayer(wms); call, add the following. It will generate a random coordinate, set the map's center to it, and change the WMS layer's opacity:

   var custom_button_func = function(){ 
     //Get a random coordinate from -90 to 90
     var random_lon ...