CODEWITHSUNDEEP
javascriptleafletopenseadragon
dasup
dasup

Reputation: 3835

Browser-based "one dimensional" pan/zoom for large image

I would like to display a very large PNG image (height about 1 million pixels, width only a few hundred pixels) in the browser in such a way that users can pan and zoom it. The image would be too much to handle for the browser. So I want to cut it into smaller tiles. Basically like OpenStreetMap, Apple/Google Maps etc. do.

The special thing here is that the image must only be zoomed and scrolled along the Y-axis. The X-axis should always remain the same, i.e. its scaling must not change and it must not be panned. (The image is will be "compressed" vertically when zooming out.)

I don't necessarily want to reinvent the wheel (i.e. roll my own implementation with a canvas element and JavaScript) and wonder if there is a ready-made solution for this problem somewhere. With Leaflet and OpenSeadragon I have not found any option to restrict zoom and pan to one axis.

Upvotes: 0

Views: 134

Answers (1)

iangilman
iangilman

Reputation: 2174

You can use OpenSeadragon for this. Just include panHorizontal: false in the options when creating the viewer.

There may be some additional work needed if you want to support zoom and want to ensure the image is perfectly centered horizontally when you zoom in/out. You may be able to accomplish this with visibilityRatio: 1 or something, or you can take control directly with something like this:

viewer.addHandler("viewport-change", () => {
  const center = viewer.viewport.getCenter();
  center.x = 0.5;
  viewer.viewport.panTo(center, true);
});

Upvotes: 0

Related Questions