Question: How do I use GeoTIFFTileSource for a TIFF Web Viewer in React?

[usagibear]

I am new to web development and want to understand how to use this plugin to display TIFF files in my frontend react project.

I know I can support OpenSeadragon in React but do not understand how to integrate this plugin specifically to support the viewer. Other OpenSeadragon packages come as npm modules which I install and include in my project.

Based on the demo, it looks like I would be able to create a react component with just GeoTiffTileSource.js after downloading the inital release but I get many errors related to webpack and issues with my OpenSeadragon and GeoTiff.js packages.

Do you have any suggestions or other documentation? Thanks!

[pearcetm]

Right now the library is set up to be used mainly by adding it via a <script> tag. In a recent PR #5 @abiswas97 has worked on creating a version that could be included by npm and perhaps used in a react component like you're suggesting. You might want to take a look at that. I'm certainly open to making this easier!

[swamidass]

For what it's worth, I've looked PR #5 and it seems to work exactly as advertised, quite well for React. I suggest merging that PR and pushing a package to npm.

[abiswas97]

@swamidass glad it's helped!

[swamidass]

Also @usagibear , keep in mind that OpenSeadragon (and GeoTIFFTileSource) are client only javascript, that assume there is a window object and other annoying (and frankly unnecessary) issues. That's the fault of OpenSeadragon, and is not likely to be changed anytime soon. But it means if you are using any sort of server-side rendering or references to these packages, then your react app will fail. You have to make sure OpenSeadragon and GeoTIFFTileSource are bundled and loaded client only. That's usually acheivable in any framework, but they all have different ways of doing it. And it also means you'll need to make a custom component to sit in the react tree to which openseadragon can be bound.