gdal3.js - Gdal compiled to JavaScript


gdal3.js is a port of Gdal applications (gdal_translate, ogr2ogr, gdal_rasterize, gdalwarp, gdaltransform) to Webassembly. It allows you to convert raster and vector geospatial data to various formats and coordinate systems.

gdal3.js uses emscripten to compile Gdal, proj, geos, spatialite, sqlite, geotiff, tiff, webp, jpeg, expat and zlib to webassembly.

If you are building a native application in JavaScript (using Electron for instance), or are working in node.js, you will likely prefer to use a native binding of Gdal to JavaScript. A native binding will be faster because it will run native code.

gdal3.js GUI

gdal3.js GUI is a web application that provides a gui to gdal_translate, ogr2ogr and gdal_rasterize applications to be used online. Uses gdal3.js in the background.
It runs on the browser and files are converted on the client side.

https://gdal3.js.org

Supported Formats

$3

Read & Write \
AAIGrid, ADRG, ARG, BLX, BMP, BT, BYN, CALS, CTable2, DTED, EHdr, ELAS, ENVI, ERS, FIT, GIF, GPKG, GRIB, GS7BG, GSAG, GSBG, GTX, GTiff, HF2, HFA, ILWIS, ISCE, ISIS2, ISIS3, JPEG, KMLSUPEROVERLAY, KRO, LAN, LCP, Leveller, MBTiles, MEM, MFF, MFF2, MRF, NITF, NTv2, NWT_GRD, PAux, PCIDSK, PCRaster, PDS4, PNG, PNM, R, RMF, ROI_PAC, RRASTER, RST, Rasterlite, SAGA, SGI, SIGDEM, SRTMHGT, Terragen, USGSDEM, VICAR, VRT, WEBP, WMTS, XPM, XYZ, ZMap, Zarr

Read Only \
ACE2, AIG, AirSAR, BIGGIF, BSB, CAD, CEOS, COASP, COSAR, CPG, CTG, DERIVED, DIMAP, DIPEx, DOQ1, DOQ2, ECRGTOC, EIR, ESAT, ESRIC, FAST, GFF, GRASSASCIIGrid, GSC, GXF, GenBin, IRIS, ISG, JAXAPALSAR, JDEM, L1B, LOSLAS, MAP, MSGN, NDF, NGSGEOID, NWT_GRC, OGCAPI, OZI, PDS, PRF, RIK, RPFTOC, RS2, SAFE, SAR_CEOS, SDTS, SENTINEL2, SNODAS, SRP, STACIT, STACTA, TGA, TIL, TSX

Write Only \
COG, PDF

$3

Read & Write \
CSV, DGN, DXF, ESRI Shapefile, FlatGeobuf, GML, GPKG, GPSBabel, GPX, GeoJSON, GeoJSONSeq, GeoRSS, Geoconcept, JML, KML, MBTiles, MVT, MapInfo File, MapML, Memory, ODS, OGR_GMT, PCIDSK, PDS4, S57, SQLite/Spatialite, VDV, VICAR, WAsP, XLSX

Read Only \
AVCBin, AVCE00, CAD, EDIGEO, ESRIJSON, Idrisi, LVBAG, OGCAPI, OGR_PDS, OGR_SDTS, OGR_VRT, OSM, OpenFileGDB, SVG, SXF, TIGER, TopoJSON, UK .NTF, VFK

Write Only \
PDF, PGDUMP

Guide

$3

Script (CDN) \
Note: It doesn't work with web worker.
``html

`

`js
initGdalJs({ path: 'https://cdn.jsdelivr.net/npm/gdal3.js@2.4.0/dist/package', useWorker: false }).then((Gdal) => {});
`
> Example: https://github.com/bugra9/gdal3.js/tree/master/apps/example-browser

Script (Local)
`html

`

`js
initGdalJs().then((Gdal) => {});
`
> Example: https://github.com/bugra9/gdal3.js/tree/master/apps/example-browser-worker

ES Module
`html

`
> Example: https://github.com/bugra9/gdal3.js/tree/master/apps/example-module-browser-worker \
> Example: https://github.com/bugra9/gdal3.js/tree/master/apps/example-module-browser

Builder such as Webpack (Vue, React, Angular, ...)
`bash
yarn add gdal3.js


or


npm install gdal3.js
`

`js
import initGdalJs from 'gdal3.js';

initGdalJs({ path: 'static' }).then((Gdal) => {});
`

`js
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' }
]
})
]
`
> Full working example: https://github.com/bugra9/gdal3.js/blob/master/apps/app-gui/src/App.vue

Vite + Vue3
`bash
yarn add gdal3.js


or


npm install gdal3.js
`

`html



`

Node
`bash
yarn add gdal3.js


or


npm install gdal3.js
`

`js
const initGdalJs = require('gdal3.js/node');

initGdalJs().then((Gdal) => {});
`
> Example: https://github.com/bugra9/gdal3.js/blob/master/apps/example-node/index.js

$3


`js
const Gdal = await initGdalJs();

const files = ['a.mbtiles', 'b.tif']; // [Vector, Raster]
const result = await Gdal.open(files); // https://gdal3.js.org/docs/module-f_open.html
const mbTilesDataset = result.datasets[0];
const tifDataset = result.datasets[1];

/ ======== Dataset Info ======== /
// https://gdal3.js.org/docs/module-f_getInfo.html
const mbTilesDatasetInfo = await Gdal.getInfo(mbTilesDataset); // Vector
const tifDatasetInfo = await Gdal.getInfo(tifDataset); // Raster

/ ======== Vector translate (mbtiles -> geojson) ======== /
const options = [ // https://gdal.org/programs/ogr2ogr.html#description
'-f', 'GeoJSON',
'-t_srs', 'EPSG:4326'
];
const output = await Gdal.ogr2ogr(mbTilesDataset, options); // https://gdal3.js.org/docs/module-a_ogr2ogr.html
const bytes = await Gdal.getFileBytes(output); // https://gdal3.js.org/docs/module-f_getFileBytes.html

/ ======== Raster translate (tif -> png) ======== /
const options = [ // https://gdal.org/programs/gdal_translate.html#description
'-of', 'PNG'
];
const output = await Gdal.gdal_translate(tifDataset, options); // https://gdal3.js.org/docs/module-a_gdal_translate.html
const bytes = await Gdal.getFileBytes(output); // https://gdal3.js.org/docs/module-f_getFileBytes.html

/ ======== Rasterize (mbtiles -> tif) ======== /
const options = [ // https://gdal.org/programs/gdal_rasterize.html#description
'-of', 'GTiff',
'-co', 'alpha=yes'
];
const output = await Gdal.gdal_rasterize(mbTilesDataset, options); // https://gdal3.js.org/docs/module-a_gdal_rasterize.html
const bytes = await Gdal.getFileBytes(output); // https://gdal3.js.org/docs/module-f_getFileBytes.html

/ ======== Warp (reprojection) ======== /
const options = [ // https://gdal.org/programs/gdalwarp.html#description
'-of', 'GTiff',
'-t_srs', 'EPSG:4326'
];
const output = await Gdal.gdalwarp(tifDataset, options); // https://gdal3.js.org/docs/module-a_gdalwarp.html
const bytes = await Gdal.getFileBytes(output); // https://gdal3.js.org/docs/module-f_getFileBytes.html

// Close all datasets. // https://gdal3.js.org/docs/module-f_close.html
Gdal.close(mbTilesDataset);
Gdal.close(tifDataset);


/ ======== Transform (Coordinate) ======== /
const coords = [
[27.143757, 38.4247972],
];
const options = [ // https://gdal.org/programs/gdaltransform.html#description
'-s_srs', 'EPSG:4326',
'-t_srs', 'EPSG:3857',
'-output_xy',
];
const newCoords = await Gdal.gdaltransform(coords, options); // https://gdal3.js.org/docs/module-a_gdaltransform.html
console.log(newCoords); // [ [ 3021629.2074563554, 4639610.441991095 ] ]
`

API References

https://gdal3.js.org/docs

Examples

- Full working example with worker and Vue.js -> Code, Live
- Browser with Worker -> Code, Live
- Browser without Worker -> Code, Live
- Browser with Worker (Module) -> Code, Live
- Browser without Worker (Module) -> Code, Live
- Node.js -> Code

Development

$3

- Install the EMSDK, as described here
- Install Sqlite3. (#31)
- Run yarn compile or make. Run make type=debug for debug version.
- Run yarn build. Run yarn build-dev for debug version.

#### WSL Notes
In order to compile on Windows Subsystem for Linux, you need remove all references to existing Windows paths and install the cmake` package.

License

GNU Lesser General Public License v2.1 or later

See LICENSE to see the full text.

Compiled with
- Emscripten 3.1.7 (License)
- Gdal 3.5.1 (License)
- Proj 9.0.1 (License)
- Geos 3.9.2 (License)
- Spatialite 5.0.1 (License)
- Sqlite 3.38.5 (License)
- GeoTIFF 1.7.1 (License)
- Tiff 4.4.0 (License)
- WebP 1.2.0 (License)
- JPEG JFIF 9d (License)
- Expat 2.4.8 (License)
- Zlib 1.2.12 (License)
- Iconv 1.17 (License)

Inspired by
- ddohler/gdal-js
- sql-js/sql.js
- jvail/spatiasql.js
- azavea/loam