Easey: Smooth Transitions for Web Maps

Easey: Smooth Transitions for Web Maps

New library adds transitions between places and zoom levels in Modest Maps

Easey is a library that lets you
make smooth transitions between places
and zoom levels on maps in Modest Maps, a minimal, fast web map API. Instead of just
jumping from place to place immediately with map.setCenter() and
map.setZoom(), the map can move slowly with lots of extra tricks.

What is Easing?
Easing is a method of regulating the speed of the map, in this case,
between point A and point B. When you call map.setCenter() in Modest Maps,
the map jumps to a place.
If you call easey.slow(map, { location: … }), the map pans gradually
to where you want – by default in one second, but you can set time and
change that. So at the end of that second, the map is where you asked
it to be.

You see this in real life – a race car doesn’t start driving at its racing
speed, nor does it stop instantly. Likewise moving instantaneously on a screen tends
to look odd and be hard to follow.

Mathematically, a typical easing function takes the form

f(x) = 0    when x = 0
f(x) = 1    when x = 1

In the case of easey, the value stands for
the interpolation between the points – how much of the way the panning has
gone. Thanks to Modest Maps’s Location.interpolate code,
this actually follows a path along a great circle
instead of just shooting across pixels.

Our default easing function is

Leave a Reply

Your email address will not be published. Required fields are marked *