search

pearcetm / GeoTIFFTileSource

Implementation of a TileSource for OpenSeadragon based on GeoTIFF.js, enabling local and remote TIFF files to be viewed without using an image server
MIT License
27 stars 5 forks source link

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

Open usagibear opened 9 months ago

usagibear commented 9 months ago

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 commented 9 months ago

Right now the library is set up to be used mainly by adding it via a <script> tag. In a recent PR https://github.com/pearcetm/GeoTIFFTileSource/pull/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 commented 6 months ago

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 commented 6 months ago

@swamidass glad it's helped!

swamidass commented 6 months ago

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.