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);
}