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

Creating custom animations

In a WebGIS application, animations do not play serious roles; however, in some web mapping applications that are focused on user experience, they can really come in handy. In the last example, called ch06_animation, we will go through the process of making our own special camera effects. The theory behind animations is very important but quite mathematical, so try to keep up with me. First, we declare some CSS rules for our custom animation control:

.ol-rocket {
    top: 20px;
    right: 20px;
}
.ol-rocket button {
    background-image: url(../../res/button_rocket.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
}

Building the control

Next, we create a simple control, which will trigger the animation ...

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