O'Reilly logo

Mastering OpenLayers 3 by Gábor Farkas

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding device-dependent controls

In the next example, called ch08_controls, we create some roles for the different devices identified by OpenLayers 3. Firstly, we add some CSS rules for our new text-based control:

@media only screen and (orientation: portrait) {
    […]
    .ol-geoloc {
        bottom: 0;
        right: .5em;
        white-space: pre-wrap;
    }
}
@media only screen and (orientation: landscape) {
    […]
    .ol-geoloc {
        top: 0;
        right: .5em;
    }
}

As we will place our control in a pre element for correct line break detection, we need to wrap it in portrait mode. Otherwise, the end of the lines would be off the screen. We also change the position of this control based on the orientation of the device. Next, we change our Geolocation object a little bit to request high accuracy ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required