Mastering OpenLayers 3

Rotating a view

The penultimate control that we add to our application before we consider it finished, is the rotation control in the next example: ch06_rotate. We will place it in the bottom bar along with the upcoming projection control. In the first step, we extend our HTML file with container elements for them:

            <div class="notification-bar">
                <div id="messageBar" class="message-bar"></div>
                <div id="projection"></div>
                <div id="rotation"></div>
                <div id="coordinates"></div>
            </div>

Next, we create some CSS rules for the rotation control:

.notification-bar #rotation {
    width: 10%;
    text-align: center;
}
.notification-bar #rotation input {
    text-align: center;
    outline: none;
    border: 0;
    -moz-appearance: textfield;
}

We align the control to the center of ...