CODEWITHSUNDEEP
javascriptreactjsannotationsopenseadragon
Abdalrahman Shebani
Abdalrahman Shebani

Reputation: 1

GeoJs layer annotations aren't fixed on top of the image and change position

I have a .dzi image rendered in Openseadragon, I've added annotations on top of it using GeoJs. When the viewer reach to max zoom the annotations doesn't stay in its place and move. I need to have the annotations completely fixed as if they're part of the image.

const osd = OpenSeadragon({
      id: "osd",
      prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
      tileSources: [
        "part.dzi",
      ],
      showNavigator: true,
      navigatorPosition: "BOTTOM_RIGHT",
      animationTime: 0,
    });

let layer = map.createLayer("annotation", {
      showLabels: false,
    });



function draw(evt: any) {
      $("#geojs .geojs-layer").css("pointer-events", "auto");
      const type = $(evt.target).data("type");
      layer.mode(type, undefined, { scaleOnZoom: true });
    }
    $(".controls-container button").on("click", draw);

The result is something like this: giggly annotations that change their positions.

Is there any solution based on GeoJs & Openseadragon or any other libraries that could replace them and provide multiple annotations shapes.

Demo link: https://ezgif.com/optimize/ezgif-1-638dd74716.gif

Upvotes: 0

Views: 83

Answers (1)

iangilman
iangilman

Reputation: 2174

I don't have any experience with connecting GeoJs to OSD, so I don't know if there are proper ways to do it. Based on your CodePen, it looks like maybe GeoJs just lacks precision when it gets so zoomed in. Is there a reason you need GeoJs over some other annotation tool?

OSD has a number of plugins that could help as a replacement: https://openseadragon.github.io/#plugins

There are 2 annotation plugins. Annotorious is the more robust one. There are also many overlay plugins, like Canvas, SVG, Paper, Fabric, and HTML. You might also try https://github.com/tuvia-r/openseadragon-select-plugin.

Upvotes: 1

Related Questions