JS OpenSeadragon: when click on the component -> add a marker

Question

I have a javascript compoment OpenSeadragon (openseadragon.github.io) for viewing large images with this code:

Html:

<img id="pushpin" src="pushpin.png">
<div id="openseadragon" style="width: 800px; height: 600px;"></div>

Javascript:

var viewer = OpenSeadragon({
    id: "openseadragon",
    prefixUrl: "node_modules/openseadragon/build/openseadragon/images/",
    tileSources: "images/test/test.dzi",
    overlays: [{
        id: 'pushpin',
        x: 0.5,
        y: 0.5
    }],
    gestureSettingsMouse:   {
        clickToZoom: false
    },

});

My question is: is it possible to add a marker when click on the component?

Answer 1

Yes, you should be able to do something like this:

viewer.addHandler('canvas-click', function(event) {
  var viewportPoint = viewer.viewport.pointFromPixel(event.position);
  viewer.addOverlay('pushpin', viewportPoint);
});

I haven't tested that code, so it may not be quite right, but that's the basic idea.