www.webdeveloper.com
Results 1 to 3 of 3

Thread: AJAX draggable map (but with image) any ideas?

  1. #1
    Join Date
    Nov 2007
    Posts
    38

    AJAX draggable map (but with image) any ideas?

    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!

  2. #2
    Join Date
    Aug 2007
    Location
    Washington
    Posts
    219
    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:

    Code:
    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();
    	}
    }

  3. #3
    Join Date
    Nov 2007
    Posts
    38
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles