Display large image in browser: allow zoom: when clicked, add marker & retrieve pixel x/y

Question

It feels like what I want to do should be fairly common, but I can't find any plugins that do it.

I want to display a large image in the browser, allow the user to zoom in on it (a UI like zoomify, or like a map viewer), and allow the user to click on the image and add a marker. The marker should return the pixel x/y coordinates of the original image.

It's basically just a way for a user to tag a particular pixel x/y value in an image.

It doesn't matter if the image is tiled, like zoomify, or if it's just a simple image with a zoom control. I'd rather use jquery than flash, but it doesn't matter either way.

Any help would be greatly appreciated.

Thanks.

Answer 1

OpenLayers is written for maps - it can be used to pan and zoom through a tiled image. It's made with maps in mind so I'm not sure if you can use it.

There are extensions for adding markers, reading the coordinates of a click, etc.

Answer 2

Check out this jQuery tutorial. You can modify this to suit your needs.

Per the tutorial: Here is an example of finding the position within the particular element rather than the page:

$("#yourImageId").click(function(e){

     var x = e.pageX - this.offsetLeft;
     var y = e.pageY - this.offsetTop;

     $('#log').html(x +', '+ y);

     //Do Something to add a push pin at these coordinates.

});