Adding and removing controls

OpenLayers offers a great number of controls, which are commonly used on mapping applications.

This recipe shows us how to use all of the available controls that have a visual representation. The list includes the OverviewMap, ScaleLine, and ZoomSlider controls, as well as many more.

We will initialize the map with all controls attached but provide a side panel that contains a button for each control so that the user can toggle the controls as they wish. The source code can be found in ch05/ch05-adding-removing-controls. Here's a screenshot of what we'll end up with:

How to do it…

Follow these instructions to create your own map with a whole load of OpenLayers controls, which you can toggle on and off as you please:

1. Create an HTML file and add the OpenLayers dependencies and a div element to hold the map. In particular, add the list of buttons representing each control:

   <ul id="js-buttons">
   <li><button class="btn btn-success">Attribution</button...