bugra9 / gdal3.js

Convert raster and vector geospatial data to various formats and coordinate systems entirely in the browser.
https://gdal3.js.org
GNU Lesser General Public License v2.1
300 stars 45 forks source link

React Example #32

Closed kaditya97 closed 1 year ago

kaditya97 commented 2 years ago

I am trying to use it with react but get plenty of errors. Can someone help me with an example of it or guide me on how to set it properly.

pavan2108 commented 2 years ago

Can you describe your issue so if I can help you out I will get in to the project

kaditya97 commented 2 years ago

In which file we are supposed to put this code?

plugins: [ new CopyWebpackPlugin({ patterns: [ { from: '../node_modules/gdal3.js/dist/package/gdal3WebAssembly.wasm', to: 'static' }, { from: '../node_modules/gdal3.js/dist/package/gdal3WebAssembly.data', to: 'static' } ] }) ]

kaditya97 commented 2 years ago

Here is the error that occurs when I run the project image

bugra9 commented 2 years ago

Hi @kaditya97, sorry for replying so late.

I used single file for node and browser so this issue occurred. In a few days I will separate them and release the new version. I will also add a use case for react.

kaditya97 commented 2 years ago

@bugra9 thank you for addressing the issue, will be waiting for the release.

bugra9 commented 1 year ago

@kaditya97, I have released a new version (v2.2.0). Can you try this version?

Example Usage:

import initGdalJs from 'gdal3.js';

import dataUrl from 'gdal3.js/dist/package/gdal3WebAssembly.data'
import wasmUrl from 'gdal3.js/dist/package/gdal3WebAssembly.wasm'

const paths = {
  wasm: wasmUrl,
  data: dataUrl,
};

initGdalJs({paths, useWorker: false}).then(Gdal => console.log(Object.keys(Gdal.drivers.raster).length + Object.keys(Gdal.drivers.vector).length));
kaditya97 commented 1 year ago

@bugra9 Thank you, it is working now.