AJAX draggable map (but with image) any ideas?

[ajcool123]

Hi Guys,

I have a bunch of huge resolution images taken with my 10mp camera. I want to create an ajax type of script similar to how google maps works, or this one.

http://www.click2map.com/samplemap

You would be able to drag around to see the entire image in a div of like 500x500. Any thoughts or ideas on how I might acomplish this? Does JQuery have something like this?

Thanks!

[bejitto101]

Here's an example of something we did in class one day: http://www.cs.washington.edu/educati.../scrollbg.html. It's rudimentary, but its something to start off with.

Here's the js for it:

var dragging = false;

var oldX = 0;
var oldY = 0;

function mapDown(event) {
	Event.extend(event);
	dragging = true;
	oldX = event.pointerX();
	oldY = event.pointerY();
}

function mapUp() {
	dragging = false;
}

function mapMove(event) {
	Event.extend(event);
	
	if (dragging) {
		var newX = event.pointerX();
		var newY = event.pointerY();

		var dx = newX - oldX;
		var dy = newY - oldY;

		$("map").style.backgroundPosition = (oldX + dx) + "px " + (oldY + dy) + "px";

		// oldX = event.pointerX();
		// oldY = event.pointerY();
	}
}

[ajcool123]

very cool awesome this is really close to what i was looking for. however any idea why when you initially drag the map then release, then continue to try and drag again it "resets" the map back to it's original spot? I would want to be able to scroll to the "edge" of the map(image).

thanks!