Friday, 30 December 2011
How to make a scrolling image or map using jQuery
If you're trying to make a scrollable map, in a similar style to google maps where there is a fixed element with a moving image inside then jQuery is the way to go..
Here are a couple of useful resources that will get your project started:
The best option is the zoomable jQuery map plugin called Mapbox from Abel Mohler.
Not only is this scrolling, it also allows for zooming into multiple different scaled maps, so you can start with a small scale (small file) and zoom progressively into higher details maps.
Check it out here - http://wayfarerweb.com/jquery/plugins/mapbox/
Abel gives a demo with a map of middle earth as an example.
On top of this you could build your own tooltips or marker system (for example these tooltips over here http://flowplayer.org/tools/tooltip/index.html)
The second resource is CraftMap (previously MobilyMap) which is a jQuery plugin that includes overlay elements and markers -
Check it out here http://www.jscraft.net/plugins/craftmap.html
COMMENT BELOW if you know of similar resources..