How to handle map borders in 2D-map with drag and zoom out?

Question

Case description:

The user sees a 2D-map that has limited size. He can drag this map. He can also zoom in/zoom out, like in Google Maps (the mouse pointer remains on the same coordinate, both in map/virtual world and on the user's screen).

So, when the user drags the camera to one of borders and zooms out - the visible world shrinks, and there appears a visible gap between the map's boundaries and the view's boundaries. (Imagine that Earth is plain, it's placed on a turtle, and Google implements Google Maps.)

What's the optimal way to handle zooming at the map's boundaries?

Answer 1

The obvious answer is to render the elephants standing on the turtle's back, but there are other options.

Having the map snap back to fit to the edge on zoom out could be confusing, as the user will expect the zoom at the edge to behave in the same way as zoom in the middle. You could however make the map slowly drift back to fill the empty space.

A standard way to show "empty" is the checker board.

You could however have some fun with this empty space. Make it like a cool easter egg for people to find, rather than a blank space. Even a corporate client might be open to having some kind of themed joke here to build their brand or show they have a sense of humor (like how the google doodle works for google).

Answer 2

As Franchesca suggested, you could fill the empty space with an empty pattern

or you could tile the map...

thus creating an infinite continuous 2D space where when you reach one end, you end up at the other, which is similar to what happens on a surface of a sphere.

I do not suggest snapping the point of view back into the area of the mapped world, as that would prevent the zoom in/out from keeping the point of interest (the project of the cursor on the map) constant.