Unable to use Loam in React

[syncthreads-sammith]

Hello hi
i have react app i need to load .tif file in it that was my requirement after goggling i got loam npm package ,and i got working example in typescript here is linkand repo link i tried to clone same code logic in react, facing loam library error

import loam from "loam"
`function App() {
require('loam/lib/loam-worker.js');
require('gdal-js/gdal.js');
require('gdal-js/gdal.wasm');
require('gdal-js/gdal.data');
useEffect(()=>{
loam.initialize("/")

},[])
const ReadFile = (e) => {
const files = e.target.files
loam.open(files).then((dataset)=>{
console.log(dataset,"d")
}).catch((er)=>{
console.log(er,"er")
})
}
return `
above the simple code i have tried and throws error i have added screenshot this is about gdal i guess

and second error is about loam.open

where did i went wrong can you please tell how can i integrate loam in my project
i have
react v17+
"loam": "^1.2.0",
"gdal-js": "^2.2.0",

[ddohler]

Hmm, I think you might be loading the WASM files incorrectly, based on the NetworkError. If you look in the Network inspector, you should see requests for

1. gdal.js
2. gdal.data
3. gdal.wasm
4. loam-worker.js

And all requests should receive a 200 status code. If any are missing or any of them don't have a 200 code then something is wrong with the way you're loading the files. Just as a guess, I think using require() might not be correct.

Are you using Create React App? If so, could you try following the instructions here: https://github.com/azavea/loam#create-react-app ?

[Syncthreads-unnati]

// import './App.css';
import { useRef,useEffect, useState } from 'react';
import { MapContainer, TileLayer } from "react-leaflet";
import { useStyles } from "./style.js";
import * as L from "leaflet";

import loam from 'loam'
import "loam/lib/loam-worker"
import "gdal-js/gdal";
import "gdal-js/gdal.data";
import "gdal-js/gdal.wasm";

function Loam_example() {
const styles = useStyles();
const mapRef = useRef(null);
const inputRef = useRef(null);
const [loamStatus, setLoamStatus] = useState("not ready yet.");
const [zoomPosition, setZoomPosition] = useState({
zoom: 12,
position: L.latLng(32.0461, 34.8516),
});

useEffect(() => {
loam.initialize("/").then(() => setLoamStatus("ready!")).catch((error)=>
console.log("error",error)
);
}, []);
return (

{/* */}

Loam is {loamStatus}

);
}
export default Loam_example;

[ddohler]

Hmm, can you try specifying Loam 1.1.2 in your package.json?

[syncthreads-sammith]

hey hi thanks for replaying , i have read your documentation i don't understand those instruction you mentioned [create-react-app] (https://github.com/azavea/loam#create-react-app) , if possible can you elaborate ,we are using react functional component and
If i installed loam using npm install loam wouldn't this all below included in the node_modules

1. gdal.js
   2.gdal.data
   3.gdal.wasm
   4.loam-worker.js
   if not how should go for it ,

[ddohler]

Sure! You are correct, all those files are available in node_modules after running npm install loam. However, they are not accessible to the application when they are in node_modules, so the instructions are to copy them from node_modules into public/.

The reason they are not accessible in node_modules is that these files need to be run inside of a WebWorker, which loads via a separate path from the main Javascript bundle. I hope that is helpful!

[syncthreads-sammith]

that was really helpful ,but what should copy in public file and how should i copy ,i know this kind of spoon feeding but i don't have much knowledge in this sort of thing ,i you could explain step by step may be or any documentation that would be great Thanks !

[ddohler]

Here is a link to the Create-React-App documentation for the public folder: https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system

Maybe you could start by testing it with just an image. Try putting an image in the public/ folder and then try to get it to display on your page. Once you get that working, copy these four files (gdal.js, gdal.data, gdal.wasm, and loam-worker.js) from node_modules/ into the public/ folder and try again. I hope that helps!

[syncthreads-sammith]

That error got resolved thanks, but i was not able to get proper GDALDataset i was referring this code he is using loam 1.0.0-alpha.10 this GDALDataset is
here it has closeAndReadBytes prototype but the loam i have used which you referred loam 1.1.2 dose not give this
closeAndReadBytes prototype here is the screenshot

which i required in my code to get imageBytes. dose loam 1.1.2 provides any other way to get image url how can i achieve.
If you notice screenshot of loam 1.0.0-alpha.10 has different GDALDataset than loam 1.1.2 i guess this could be of version changes

[ddohler]

Yep, you're exactly right -- the interface was changed between the alpha version and 1.0. Now you can simply use bytes().

[syncthreads-sammith]

okay i'll try this bytes(), Buti if use loam 1.0.0-alpha.10 i got this error

i have initialized loam loam.initialize("/") this way and network network status is** 304** any work arounds for this

[ddohler]

Hmm, I'm not sure -- I would use version 1.1.2 or 1.2.0 and see if that helps.

[syncthreads-sammith]

yep i guess 1.1.2 is better, and it worked for me ,and thanks for all the help and suggestion you had given to us, loam is such a great package gives a vast insight about how to work on geospatial data well done guys .!

[ddohler]

Great, glad you got it working! Is it all right if I close this issue?

[syncthreads-sammith]

yeh sure !

[syncthreads-sammith]

Hey hi, i just i want to know that does loam compromise the image quality,
Below i have given code that is used to parse .tif file and return some O/P in object

import loam from "loam";
import * as L from "leaflet";
import { v4 as uuidv4 } from "uuid";
loam.initialize("/");
export const CreateLayer = async (files, map) => { 
  const dataset = await loam.open(files); 
  const wktDest =
    'GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.01745329251994328,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]]';
  const smallDataset = await dataset.convert([
    "-of",
    "GTiff",
    "-outsize",
    "1000",
    "0",
    "-r",
    "nearest",
  ]);
  dataset.close();
  const newDataset = await smallDataset.warp([
    "-co",
    "PREDICTOR=2",
    "-dstnodata",
    "0",
    "-of",
    "GTiff",
    "-t_srs",
    "EPSG:3857",
    "-r",
    "near",
  ]);
  smallDataset.close();
  const width = await newDataset.width();
  const height = await newDataset.height();
  const geoTransform = await newDataset.transform();
  const wktSource = await newDataset.wkt();
  const corners = [
    [0, 0],
    [width, 0],
    [width, height],
    [0, height],
  ];
  const geoCorners = corners.map((coords) => {
    const x = coords[0];
    const y = coords[1];
    return [
      geoTransform[0] + geoTransform[1] * x + geoTransform[2] * y,
      geoTransform[3] + geoTransform[4] * x + geoTransform[5] * y,
    ];
  });
  const wgs84GeoCornersGdal = await loam.reproject(
    wktSource,
    wktDest,
    geoCorners
  );
  const wgs84GeoCorners = wgs84GeoCornersGdal.map((coords) => [
    coords[1],
    coords[0],
  ]);
  const pngDataset = await newDataset.convert(["-of", "PNG","-co", "COMPRESSION=deflate","-co", "PREDICTOR=2",]);
  const imageBytes = await pngDataset.bytes();
  const outputBlob = new Blob([imageBytes], { type: "image/png" });
  const imageURL = window.URL.createObjectURL(outputBlob);
  const imageOverlay = L.imageOverlay(imageURL, wgs84GeoCorners);
  const imageBounds = imageOverlay.getBounds();
  // const zoom = map.target.getBoundsZoom(imageBounds);
  const center = imageBounds.getCenter();
  const TiffParsedata = {
    id: uuidv4(),
    url: `${imageURL}`,
    bounds: wgs84GeoCorners,
    imageBounds: imageBounds,
    center: center,
  };
  let center1 = [center.lat, center.lng]; 
  // map.target.setView(center1, zoom);
  return TiffParsedata;
};

The out put of this above method will return imageUrl,Bounds,ImageBounds and Center so here image url is being overlayed on react-leaflet map for further implement, but the image is being generated by loam will have poor quality then its original (original image size can be around 200mb to 600mb .tif file) my question is there any way that loam can persist image original size as it is,do we have any work arounds here

I have tried this below code to improve the image quality but no use !
const pngDataset = await newDataset.convert(["-of", "PNG","-co", "COMPRESSION=deflate","-co", "PREDICTOR=2",]);
Please let us know if there are any possibility. Thanks you...

[ddohler]

Hi @syncthreads-sammith ! Could you open a new issue for this?

But anyway, I think the issue may be that you are downscaling the image before reprojecting the thumbnail. Instead, try warping and generating the thumbnail at the same time by using the -ts flag to dataset.warp(). In other words, don't create smallDataset and instead do:

const newDataset = await dataset.warp([
  ... // Same as above
  '-ts', '1000', '0',
]);