Building a set of drawing tools

In this example, called ch05_draw, we extend our toolbar with a method that creates a set of drawing tools. We store these tools in a new collection, as we would like to enable them, only if a vector layer is selected. As they are placed in a collection, we can easily iterate through them. Firstly, we create some new rules in our CSS file for the buttons and the disabled controls:

.toolbar .ol-control button:disabled {
    background-color: rgba(0,0,0,.2);
}
.toolbar .ol-control button:disabled:hover {
    background-color: rgba(0,0,0,.2);
}
.toolbar .ol-addpoint button {
    background-image: url(../../res/button_addpoint.png);
}
.toolbar .ol-addline button {
    background-image: url(../../res/button_addline.png);
}
.toolbar .ol-addpolygon button {
    background-image: url(../../res/button_addpolygon.png);
}

Writing the method

Before starting our method, we extend our custom interaction control with the disabling capability. It is a very simple method that...