I have been using openseadragon to display a very large DZI image. All well an good.

<div id="openseadragon1"
     style="width: calc(100%); height: calc(100% - 50px);
            border: 3px grey; background: black;"
></div>

<script type="text/javascript">
  var viewer = OpenSeadragon({
    id: "openseadragon1",
    prefixUrl: "openseadragon/images/",
    tileSources: "./image.dzi",
    maxZoomPixelRatio: 4,
    gestureSettingsMouse: {
      clickToZoom: false,
      dblClickToZoom: true
    }
  });
  ...

I can even place a marker (image) in the exact center of this DZI

  var point = new OpenSeadragon.Point(0.5,0.5)
  console.log("point ", point);
  var img = document.createElement("img");
  img.src = "balls/orange.gif";
  viewer.addOverlay(img, point);

The console shows coords as being as given 0.5, 0.5

However Now I want to place a marker (actually LOTS of markers) at a specific pixel locations...

EG replacing the var point line above

  var point = viewer.viewport.imageToViewportCoordinates(92060,40504);

But the console shows the coordinates as the values I have given, so the position is of course not on screen!

How do I translate image coords to viewer coordinates? I am loathed to DIY math myself, though I could.

All markers are static against the displayed image, so no handler is needed.

I do want to add handlers to turn on/off the overlaid markers. And add popup (hover over) annotation to each marker But have no idea how to do that (next steps). This is all quite new to me, and it seems something that should be straight forward to do.

EXTRA: Any suggestions for other markers built into openseadragon.

I have been using openseadragon to display a very large DZI image. All well an good.

<div id="openseadragon1"
     style="width: calc(100%); height: calc(100% - 50px);
            border: 3px grey; background: black;"
></div>

<script type="text/javascript">
  var viewer = OpenSeadragon({
    id: "openseadragon1",
    prefixUrl: "openseadragon/images/",
    tileSources: "./image.dzi",
    maxZoomPixelRatio: 4,
    gestureSettingsMouse: {
      clickToZoom: false,
      dblClickToZoom: true
    }
  });
  ...

I can even place a marker (image) in the exact center of this DZI

  var point = new OpenSeadragon.Point(0.5,0.5)
  console.log("point ", point);
  var img = document.createElement("img");
  img.src = "balls/orange.gif";
  viewer.addOverlay(img, point);

The console shows coords as being as given 0.5, 0.5

However Now I want to place a marker (actually LOTS of markers) at a specific pixel locations...

EG replacing the var point line above

  var point = viewer.viewport.imageToViewportCoordinates(92060,40504);

But the console shows the coordinates as the values I have given, so the position is of course not on screen!

How do I translate image coords to viewer coordinates? I am loathed to DIY math myself, though I could.

All markers are static against the displayed image, so no handler is needed.

I do want to add handlers to turn on/off the overlaid markers. And add popup (hover over) annotation to each marker But have no idea how to do that (next steps). This is all quite new to me, and it seems something that should be straight forward to do.

EXTRA: Any suggestions for other markers built into openseadragon.

• google-maps-markers
• openseadragon

1 Answer 1

LOL... After a LOT of searching I learned that you cannot run imageToViewerCoordindates() until the DZI image has been opened!

The solution is to wait until the viewer has opened.

  viewer.addOnceHandler('open', function(target) {
    var point = viewer.viewport.imageToViewportCoordinates(92060,40504);
    console.log("point ", point);
    var img = document.createElement("img");
    img.src = "balls/orange.gif";
    viewer.addOverlay(img, point);
  })

Now how can I offset the overlay image so it isn't the top-left corner, but the middle, or somewhere else in the image. This is variable, depending on zoom level!

Or is there a better way of doing markers?