Creating a custom control

OpenLayers has plenty of controls that address a broad range of needs. Unfortunately, the requirements we could have for building a new web application can imply the creation of a new one, or the extension of a previous one:

In this recipe, we are going to create a new control named Cross. The control will show a crosshair symbol, as shown in the previous screenshot, similar to the target selectors in the ancient war planes, which will show the location it is pointing to. In addition, the control will allow registering the click events that will return the current location too.

How to do it...

1. Create an HTML file and add the OpenLayers dependencies, then include the code of our new control:

   <script type="text/javascript" src="./recipes/ch08/crossControl.js"></script>

2. Next, add the two CSS classes required for the control:

   <style>
       .olControlCross {
           width: 48px;
           height: 48px;
           background: url('./recipes/data/target.png') no...