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

function easeOut(t) { return Math.sin(t * Math.PI / 2); }

Standing on the shoulders of giants here, this function is taken from Morpheus by Dustin Diaz, which is in turn taken from Robert Penner’s work. But simple enough, this is a function that, at 0, yields 0, and at 1, yields 1, but in between the value rises in the happy form of a sin curve.

Math geeks will notice that it’s a pretty simple one: this is just sin with a period of 4, so sin(1) = 1.

Fun stuff you can do with easey

Check out the demos on the demo’s homepage for an idea of what you can do. easey.slow() takes a callback function you can use to update text on a page, or even call itself so that the map keeps panning until you call easey.cancel(). Another example is easey.sequence(), which takes an array of places to go to and goes to each in order.

Inertia and transitions

Besides automating map interactions, easey is a start to improving the map- browsing experience for all — doing inertial scrolling and transitioning between zoom levels when the mouse wheel is used. It does this by providing the same range of handlers that Modest Maps itself provides, so you can initialize a map with:

[ new easey.DragHandler(), new easey.DoubleClickHandler(), new easey.MouseWheelHandler() ]

And the various things you do will be a bit smoother. Dragging the map quickly will cause it to continue moving for a bit, much in the style of applications on touch devices or like Google Maps in-browser.

This part is still very much in beta. It performs part of the trick by tracking a short history of points along your drag path, finding the direction by using Math.atan2, the same handy shortcut I used in calculating line direction for a running map. But there’s more work to determine natural scrolling pace and streamline Modest Maps’s performance to make this feel natural for users.

Try it out! Easey works with Modest Maps and has no other dependencies.