Tile scrolling / preloading (Google Maps style) of HTML layers with Ajax

Question

I am looking to replicate the panning (not necessarily the zooming) effect of the Google Maps API, but without the images. Essentially, I want to position HTML elements in a large coordinate system and be able to navigate around them, Prezi style (though without the rotation).

Preferably, I'd like to preload the elements dynamically through jQuery/AJAX, but if I have to load everything initially, I will.

Any libraries out there that will allow me to do this? I could just code the thing myself, but I can't imagine noone else has thought of something similar before.

Can this be done with the Google Maps API, and if so, how? Implementing the GOverlay interface?

Answer 1

Open layers - http://www.openlayers.org/ is an open source implementation of the Google maps component, which might be more than you need, but is a good place to start.

Answer 2

Zoomooz might be just what your looking for if its html elements that you want to navigate to in prezi style you dont have to use the zoom effect but its there anyway, although for best compatibility and performance I think you will need to use a webkit based browser...

http://jaukia.github.io/zoomooz/

Answer 3

Oh, you will have so much fun doing this yourself, and sure will be no too much time consuming if you use jQuery, here is a brief of what you'll do...

Build you container/containing layout (use overflow:hidden to show only the desired size)

Then capture user actions with the mousedown and mouseup events.

Act accordingly based on the containing div position properties (use the "dimensions" plugin)

You might get your first working attempt within minutes.

Greetings