GDAL for WebAssembly

v3.13.3WebAssembly

GDAL 3.13.3 for browsers, Node.js and edge runtimes, precompiled for wasm32, single-threaded and multi-threaded as @crossbind/port-gdal-wasm.

npm install @crossbind/port-gdal-wasm@beta

npm ↗Port recipe and licence files ↗

Install

shell

npm install @crossbind/port-gdal-wasm@beta

crossbind.config.js

import gdalWasm from '@crossbind/port-gdal-wasm/crossbind.config.js';
 
export default {
    dependencies: [gdalWasm],
    paths: { config: import.meta.url },
};

crossbind itself arrives with your bundler plugin, or with a new project from npm create crossbind@beta; Bundlers has Vite, Webpack, Rspack and Rollup.

Usage

Each example runs here, in this tab, and prints what the site build checked.

Each example also has a JavaScript only tab: the same task with no C++ file, calling GDAL's own headers from @crossbind/port-gdal directly. 4 of 5 work that way; the other says what stops it.

Imported straight from JavaScript, the headers need this configuration today; its comments say why.

crossbind.config.js

import gdalWasm from '@crossbind/port-gdal-wasm/crossbind.config.js';
 
export default {
    general: { name: 'gdaldirect' },
    dependencies: [gdalWasm],
    paths: { config: import.meta.url },
    targetSpecs: [
        {
            platform: 'wasm',
            specs: {
                // SpatiaLite is left out of the link (crossbind.overrides.js), and a
                // single-threaded build has no threads for GeoPackage or for the Arrow
                // path of ogr2ogr to use.
                env: {
                    SPATIALITE_LOAD: 'FALSE',
                    OGR2OGR_USE_ARROW_API: 'NO',
                    OGR_GPKG_NUM_THREADS: '1',
                },
            },
        },
    ],
};

crossbind.overrides.js

// Libraries left out of the link. Binding gdal.h links GDALAllRegister and so every
// driver GDAL was built with; leaving out what these examples never call keeps the wasm
// under the 25 MiB a file the site's host accepts. Calling into a library left out
// aborts with "missing function". zstd stays in: the COG driver calls it even when it
// writes Deflate.
export default {
    curl: { exclude: true },
    openssl: { exclude: true },
    spatialite: { exclude: true },
    webp: { exclude: true },
    Lerc: { exclude: true },
    jpeg: { exclude: true },
    expat: { exclude: true },
    geos: { exclude: true },
    iconv: { exclude: true },
};

Convert GeoJSON to GeoPackage and Shapefile, reprojected

Format conversion is what GDAL is used for most, as the ogr2ogr tool: GDALVectorTranslate takes the same arguments, here -f for the format and -t_srs for the coordinate system. The input is text handed over through /vsimem/, and a zipped Shapefile is one file.

src/native/vector_converter.h

#pragma once
 
#include <cpl_error.h>
#include <cpl_string.h>
#include <cpl_vsi.h>
#include <gdal.h>
#include <gdal_utils.h>
#include <ogr_srs_api.h>
#include <ogrsf_frmts.h>
 
#include <cmath>
#include <stdexcept>
#include <string>
 
// Converts GeoJSON text to another vector format, reprojected, and reports what was written.
// It registers only the drivers it uses, so GDAL opens and writes these formats and no others.
class VectorConverter {
public:
    VectorConverter() {
        RegisterOGRGeoJSON();
        RegisterOGRGeoPackage();
        RegisterOGRFlatGeobuf();
        RegisterOGRShape();
    }
 
    std::string convert(const std::string& geojson, const std::string& format, const std::string& targetCrs,
                        const std::string& outputPath) {
        const char* input = "/vsimem/input.geojson";
        VSIFCloseL(VSIFileFromMemBuffer(input, reinterpret_cast<GByte*>(const_cast<char*>(geojson.data())), geojson.size(), FALSE));
        GDALDatasetH source = GDALOpenEx(input, GDAL_OF_VECTOR, nullptr, nullptr, nullptr);
        if (!source) fail(input);
 
        CPLStringList args;
        args.AddString("-f");
        args.AddString(format.c_str());
        args.AddString("-t_srs");
        args.AddString(targetCrs.c_str());
        GDALVectorTranslateOptions* options = GDALVectorTranslateOptionsNew(args.List(), nullptr);
        VSIUnlink(outputPath.c_str()); // replace the output of an earlier call
        GDALDatasetH written = GDALVectorTranslate(outputPath.c_str(), nullptr, 1, &source, options, nullptr);
        GDALVectorTranslateOptionsFree(options);
        GDALClose(source);
        if (!written) fail(input);
 
        OGRLayerH layer = GDALDatasetGetLayer(written, 0);
        OGREnvelope extent;
        OGR_L_GetExtent(layer, &extent, TRUE);
        OGRSpatialReferenceH crs = OGR_L_GetSpatialRef(layer);
        const char* authority = crs ? OSRGetAuthorityName(crs, nullptr) : nullptr;
        const char* code = crs ? OSRGetAuthorityCode(crs, nullptr) : nullptr;
        const std::string summary = format + ": " + std::to_string(OGR_L_GetFeatureCount(layer, TRUE)) + " features, " +
            (authority && code ? std::string(authority) + ":" + code : std::string("no CRS")) + ", extent " +
            std::to_string(std::llround(extent.MinX)) + " " + std::to_string(std::llround(extent.MinY)) + " " +
            std::to_string(std::llround(extent.MaxX)) + " " + std::to_string(std::llround(extent.MaxY));
        GDALClose(written);
        VSIUnlink(input);
        return summary;
    }
 
private:
    [[noreturn]] static void fail(const char* input) {
        const std::string reason = CPLGetLastErrorMsg();
        VSIUnlink(input);
        throw std::runtime_error(reason.empty() ? "GDAL could not convert the data" : reason);
    }
};

main.js

import { initNative, VectorConverter } from './native/vector_converter.h';
 
await initNative();
const converter = await new VectorConverter();
const cities = JSON.stringify({
    type: 'FeatureCollection',
    features: [
        ['Istanbul', 28.9784, 41.0082],
        ['Ankara', 32.8597, 39.9334],
        ['Izmir', 27.1428, 38.4237],
    ].map(([name, lon, lat]) => ({ type: 'Feature', properties: { name }, geometry: { type: 'Point', coordinates: [lon, lat] } })),
});
console.log(await converter.convert(cities, 'GPKG', 'EPSG:3857', '/vsimem/cities.gpkg'));
console.log(await converter.convert(cities, 'ESRI Shapefile', 'EPSG:32635', '/vsimem/cities.shp.zip'));

PRINTSfirst run downloads 28.8 MB

GPKG: 3 features, EPSG:3857, extent 3021523 4639455 3657925 5013551
ESRI Shapefile: 3 features, EPSG:32635, extent 512465 4252837 1000822 4541552

The same GDALVectorTranslate and GDALVectorInfo calls the C++ makes. Their arguments are NULL-terminated string lists, which JavaScript builds with allocPointer and cstring, and flags that are macros, such as GDAL_OF_VECTOR, are written as numbers. The module is larger than the C++ one: binding gdal.h links GDALAllRegister and with it every driver, while the C++ version registers only the drivers it uses.

main.js

import {
    initNative, GDALAllRegister, GDALOpenEx, GDALClose, allocPointer, writePointerAt, cstring,
    readCString,
} from '@crossbind/port-gdal/gdal.h';
import {
    GDALVectorTranslateOptionsNew, GDALVectorTranslateOptionsFree, GDALVectorTranslate,
    GDALVectorInfoOptionsNew, GDALVectorInfoOptionsFree, GDALVectorInfo,
} from '@crossbind/port-gdal/gdal_utils.h';
import { VSIUnlink, VSIFree } from '@crossbind/port-gdal/cpl_vsi.h';
import { CPLGetLastErrorMsg } from '@crossbind/port-gdal/cpl_error.h';
 
await initNative();
await GDALAllRegister();
const cities = JSON.stringify({
    type: 'FeatureCollection',
    features: [
        ['Istanbul', 28.9784, 41.0082],
        ['Ankara', 32.8597, 39.9334],
        ['Izmir', 27.1428, 38.4237],
    ].map(([name, lon, lat]) => ({ type: 'Feature', properties: { name }, geometry: { type: 'Point', coordinates: [lon, lat] } })),
});
// The GeoJSON driver opens the text itself. 4 is GDAL_OF_VECTOR, a macro, so it has no binding.
const source = await GDALOpenEx(cities, 4, null, null, null);
if (!source) throw new Error(await CPLGetLastErrorMsg());
// A NULL-terminated list of strings, as GDAL's argv parameters take them.
const list = async (items) => {
    const argv = await allocPointer(items.length + 1);
    for (const [i, item] of items.entries()) await writePointerAt(argv, i, await cstring(item));
    return argv;
};
const sources = await allocPointer(1);
await writePointerAt(sources, 0, source);
 
for (const [format, crs, path] of [['GPKG', 'EPSG:3857', '/vsimem/cities.gpkg'], ['ESRI Shapefile', 'EPSG:32635', '/vsimem/cities.shp.zip']]) {
    const options = await GDALVectorTranslateOptionsNew(await list(['-f', format, '-t_srs', crs]), null);
    await VSIUnlink(path); // replace the output of an earlier run
    const written = await GDALVectorTranslate(path, null, 1, sources, options, null);
    await GDALVectorTranslateOptionsFree(options);
    if (!written) throw new Error(await CPLGetLastErrorMsg());
 
    // ogrinfo's report, as JSON: the layer's feature count, extent and CRS
    const infoOptions = await GDALVectorInfoOptionsNew(await list(['-json', '-so']), null);
    const report = await GDALVectorInfo(written, infoOptions);
    const layer = JSON.parse(await readCString(report)).layers[0];
    await VSIFree(report);
    await GDALVectorInfoOptionsFree(infoOptions);
    await GDALClose(written);
    const { extent, coordinateSystem } = layer.geometryFields[0];
    const { authority, code } = coordinateSystem.projjson.id;
    console.log(`${format}: ${layer.featureCount} features, ${authority}:${code}, extent ${extent.map(Math.round).join(' ')}`);
}
await GDALClose(source);

PRINTSfirst run downloads 38.1 MB

GPKG: 3 features, EPSG:3857, extent 3021523 4639455 3657925 5013551
ESRI Shapefile: 3 features, EPSG:32635, extent 512465 4252837 1000822 4541552

Write a GeoTIFF and read its georeferencing back

GDALCreate writes a raster with GDALSetGeoTransform and a CRS from OSRImportFromEPSG; GDALOpenEx opens it again as it opens any of the formats GDAL reads, and the size, band type, geotransform and CRS come back from the dataset. GDALInfo returns the report the gdalinfo tool prints.

src/native/raster_info.h

#pragma once
 
#include <cpl_error.h>
#include <cpl_string.h>
#include <gdal.h>
#include <gdal_frmts.h>
#include <gdal_utils.h>
#include <ogr_srs_api.h>
 
#include <cstdio>
#include <sstream>
#include <stdexcept>
#include <string>
#include <vector>
 
// Writes a GeoTIFF with a coordinate system, then opens it the way any raster is opened and reads
// what GDAL knows about it: the size, the bands, where the pixels lie (the geotransform) and in which CRS.
class RasterInfo {
public:
    RasterInfo() { GDALRegister_GTiff(); }
 
    // Elevations in metres that rise by 1 m a pixel to the east and 2 m a pixel to the south.
    void create(const std::string& path, int width, int height, double west, double north, double pixelSize, int epsg) {
        char** options = CSLSetNameValue(nullptr, "COMPRESS", "DEFLATE");
        GDALDatasetH dataset = GDALCreate(GDALGetDriverByName("GTiff"), path.c_str(), width, height, 1, GDT_Float32, options);
        CSLDestroy(options);
        if (!dataset) fail();
        double transform[6] = {west, pixelSize, 0, north, 0, -pixelSize};
        GDALSetGeoTransform(dataset, transform);
        OGRSpatialReferenceH crs = OSRNewSpatialReference(nullptr);
        OSRImportFromEPSG(crs, epsg);
        GDALSetSpatialRef(dataset, crs);
        OSRDestroySpatialReference(crs);
        GDALRasterBandH band = GDALGetRasterBand(dataset, 1);
        std::vector<float> row(width);
        for (int y = 0; y < height; ++y) {
            for (int x = 0; x < width; ++x) row[x] = static_cast<float>(100 + x + 2 * y);
            if (GDALRasterIO(band, GF_Write, 0, y, width, 1, row.data(), width, 1, GDT_Float32, 0, 0) != CE_None) {
                GDALClose(dataset);
                fail();
            }
        }
        GDALClose(dataset);
    }
 
    std::string describe(const std::string& path) {
        GDALDatasetH dataset = GDALOpenEx(path.c_str(), GDAL_OF_RASTER, nullptr, nullptr, nullptr);
        if (!dataset) fail();
        GDALRasterBandH band = GDALGetRasterBand(dataset, 1);
        double t[6];
        GDALGetGeoTransform(dataset, t);
        OGRSpatialReferenceH crs = GDALGetSpatialRef(dataset);
        double range[2];
        GDALComputeRasterMinMax(band, FALSE, range);
 
        char line[160];
        std::string text = std::string(GDALGetDriverShortName(GDALGetDatasetDriver(dataset))) + ", " +
            std::to_string(GDALGetRasterXSize(dataset)) + " x " + std::to_string(GDALGetRasterYSize(dataset)) + " pixels, " +
            std::to_string(GDALGetRasterCount(dataset)) + " band of " + GDALGetDataTypeName(GDALGetRasterDataType(band)) + "\n";
        std::snprintf(line, sizeof line, "origin %.0f, %.0f; pixel size %.0f x %.0f\n", t[0], t[3], t[1], t[5]);
        text += line;
        text += std::string(OSRGetName(crs)) + ", " + OSRGetAuthorityName(crs, nullptr) + ":" + OSRGetAuthorityCode(crs, nullptr) + "\n";
        std::snprintf(line, sizeof line, "values %.0f to %.0f\n", range[0], range[1]);
        text += line;
 
        // GDALInfo returns the report the gdalinfo tool prints; keep its corner coordinates.
        char* report = GDALInfo(dataset, nullptr);
        std::istringstream lines(report ? report : "");
        CPLFree(report);
        GDALClose(dataset);
        for (std::string entry; std::getline(lines, entry);) {
            if (entry.rfind("Upper Left", 0) == 0 || entry.rfind("Lower Right", 0) == 0) text += entry + "\n";
        }
        return text.substr(0, text.size() - 1);
    }
 
private:
    [[noreturn]] static void fail() {
        const std::string reason = CPLGetLastErrorMsg();
        throw std::runtime_error(reason.empty() ? "GDAL could not read the raster" : reason);
    }
};

main.js

import { initNative, RasterInfo } from './native/raster_info.h';
 
await initNative();
const raster = await new RasterInfo();
// 200 x 150 pixels of 30 m, the top left corner at 500000 E 4450000 N in UTM zone 35N
await raster.create('/vsimem/dem.tif', 200, 150, 500000, 4450000, 30, 32635);
for (const line of (await raster.describe('/vsimem/dem.tif')).split('\n')) console.log(line);

PRINTSfirst run downloads 28.8 MB

GTiff, 200 x 150 pixels, 1 band of Float32
origin 500000, 4450000; pixel size 30 x -30
WGS 84 / UTM zone 35N, EPSG:32635
values 100 to 597
Upper Left  (  500000.000, 4450000.000) ( 27d 0' 0.00"E, 40d12' 1.44"N)
Lower Right (  506000.000, 4445500.000) ( 27d 4'13.64"E, 40d 9'35.41"N)

JavaScript writes the pixels and the six geotransform numbers into allocBuffer memory and reads the transform and the value range back the same way. GDALSetProjection takes EPSG:32635 as text, and GDAL_OF_RASTER is a macro, so the open flag is written as 2.

main.js

import {
    initNative, GDALAllRegister, GDALGetDriverByName, GDALCreate, GDALDataType, GDALSetGeoTransform,
    GDALSetProjection, GDALGetRasterBand, GDALRasterIO, GDALRWFlag, GDALClose, GDALOpenEx,
    GDALGetDriverShortName, GDALGetDatasetDriver, GDALGetRasterXSize, GDALGetRasterYSize,
    GDALGetRasterCount, GDALGetDataTypeName, GDALGetRasterDataType, GDALGetGeoTransform,
    GDALGetProjectionRef, GDALComputeRasterMinMax, allocBuffer, allocPointer, writePointerAt,
    cstring, writeNumberAt, readNumberAt, writeBytes, readCString,
} from '@crossbind/port-gdal/gdal.h';
import { GDALInfo } from '@crossbind/port-gdal/gdal_utils.h';
import { VSIFree } from '@crossbind/port-gdal/cpl_vsi.h';
import { CPLGetLastErrorMsg } from '@crossbind/port-gdal/cpl_error.h';
 
await initNative();
await GDALAllRegister();
// 200 x 150 pixels of 30 m, the top left corner at 500000 E 4450000 N in UTM zone 35N
const [width, height] = [200, 150];
const options = await allocPointer(2); // a NULL-terminated list: COMPRESS=DEFLATE
await writePointerAt(options, 0, await cstring('COMPRESS=DEFLATE'));
const float32 = await GDALDataType.GDT_Float32;
const created = await GDALCreate(await GDALGetDriverByName('GTiff'), '/vsimem/dem.tif', width, height, 1, float32, options);
if (!created) throw new Error(await CPLGetLastErrorMsg());
const transform = await allocBuffer(6 * 8);
for (const [i, value] of [500000, 30, 0, 4450000, 0, -30].entries()) await writeNumberAt(transform, i, 'float64', value);
await GDALSetGeoTransform(created, transform);
await GDALSetProjection(created, 'EPSG:32635');
// Elevations in metres that rise by 1 m a pixel to the east and 2 m a pixel to the south, as bytes.
const heights = Float32Array.from({ length: width * height }, (_, i) => 100 + (i % width) + 2 * Math.floor(i / width));
const pixels = await allocBuffer(heights.byteLength);
await writeBytes(pixels, Array.from(new Uint8Array(heights.buffer), (byte) => String.fromCharCode(byte)).join(''));
await GDALRasterIO(await GDALGetRasterBand(created, 1), await GDALRWFlag.GF_Write, 0, 0, width, height, pixels, width, height, float32, 0, 0);
await GDALClose(created);
 
const dataset = await GDALOpenEx('/vsimem/dem.tif', 2, null, null, null); // 2 is GDAL_OF_RASTER
const band = await GDALGetRasterBand(dataset, 1);
const driver = await GDALGetDriverShortName(await GDALGetDatasetDriver(dataset));
const type = await GDALGetDataTypeName(await GDALGetRasterDataType(band));
console.log(`${driver}, ${await GDALGetRasterXSize(dataset)} x ${await GDALGetRasterYSize(dataset)} pixels, ${await GDALGetRasterCount(dataset)} band of ${type}`);
await GDALGetGeoTransform(dataset, transform);
const t = [];
for (let i = 0; i < 6; i++) t.push(await readNumberAt(transform, i, 'float64'));
console.log(`origin ${t[0]}, ${t[3]}; pixel size ${t[1]} x ${t[5]}`);
// The CRS as WKT: its name comes first and its own AUTHORITY last.
const wkt = await GDALGetProjectionRef(dataset);
const [, name] = wkt.match(/^PROJCS\["([^"]+)"/);
const [, authority, code] = wkt.match(/AUTHORITY\["(\w+)","(\w+)"\]\]$/);
console.log(`${name}, ${authority}:${code}`);
const range = await allocBuffer(2 * 8);
await GDALComputeRasterMinMax(band, 0, range);
console.log(`values ${await readNumberAt(range, 0, 'float64')} to ${await readNumberAt(range, 1, 'float64')}`);
 
// GDALInfo returns the report the gdalinfo tool prints; keep its corner coordinates.
const report = await GDALInfo(dataset, null);
const text = await readCString(report);
await VSIFree(report);
await GDALClose(dataset);
for (const line of text.split('\n')) {
    if (line.startsWith('Upper Left') || line.startsWith('Lower Right')) console.log(line);
}

PRINTSfirst run downloads 38.1 MB

GTiff, 200 x 150 pixels, 1 band of Float32
origin 500000, 4450000; pixel size 30 x -30
WGS 84 / UTM zone 35N, EPSG:32635
values 100 to 597
Upper Left  (  500000.000, 4450000.000) ( 27d 0' 0.00"E, 40d12' 1.44"N)
Lower Right (  506000.000, 4445500.000) ( 27d 4'13.64"E, 40d 9'35.41"N)

Reproject a raster and write a Cloud-Optimized GeoTIFF

GDALWarp reprojects as the gdalwarp tool does, here into a virtual raster that is computed while it is read; GDALTranslate with -of COG then writes it tiled, compressed and with overviews, the layout web maps read with HTTP range requests.

src/native/cog_writer.h

#pragma once
 
#include <cpl_error.h>
#include <cpl_string.h>
#include <cpl_vsi.h>
#include <gdal.h>
#include <gdal_frmts.h>
#include <gdal_utils.h>
 
#include <cstdio>
#include <stdexcept>
#include <string>
 
// Reprojects a raster as the gdalwarp tool does, then writes it as gdal_translate -of COG does: a
// Cloud-Optimized GeoTIFF, tiled and compressed, with overviews laid out so that a client can read
// one area at one zoom level with a few HTTP range requests.
class CogWriter {
public:
    CogWriter() {
        GDALRegister_GTiff();
        GDALRegister_COG();
        GDALRegister_VRT();
    }
 
    std::string warpToCog(const std::string& source, const std::string& targetCrs, const std::string& output) {
        GDALDatasetH input = GDALOpenEx(source.c_str(), GDAL_OF_RASTER, nullptr, nullptr, nullptr);
        if (!input) fail();
 
        // gdalwarp -of VRT: the reprojected raster stays virtual and is computed while the COG is written.
        CPLStringList warpArgs;
        for (const char* arg : {"-of", "VRT", "-r", "bilinear", "-t_srs"}) warpArgs.AddString(arg);
        warpArgs.AddString(targetCrs.c_str());
        GDALWarpAppOptions* warpOptions = GDALWarpAppOptionsNew(warpArgs.List(), nullptr);
        GDALDatasetH warped = GDALWarp("", nullptr, 1, &input, warpOptions, nullptr);
        GDALWarpAppOptionsFree(warpOptions);
        if (!warped) {
            GDALClose(input);
            fail();
        }
 
        CPLStringList cogArgs;
        for (const char* arg : {"-of", "COG", "-co", "COMPRESS=DEFLATE", "-co", "BLOCKSIZE=256"}) cogArgs.AddString(arg);
        GDALTranslateOptions* cogOptions = GDALTranslateOptionsNew(cogArgs.List(), nullptr);
        VSIUnlink(output.c_str());
        GDALDatasetH cog = GDALTranslate(output.c_str(), warped, cogOptions, nullptr);
        GDALTranslateOptionsFree(cogOptions);
        GDALClose(warped);
        GDALClose(input);
        if (!cog) fail();
        GDALClose(cog);
        return describe(output);
    }
 
private:
    // What a reader of the file sees.
    static std::string describe(const std::string& path) {
        GDALDatasetH dataset = GDALOpenEx(path.c_str(), GDAL_OF_RASTER, nullptr, nullptr, nullptr);
        if (!dataset) fail();
        GDALRasterBandH band = GDALGetRasterBand(dataset, 1);
        double t[6];
        GDALGetGeoTransform(dataset, t);
        int blockWidth = 0, blockHeight = 0;
        GDALGetBlockSize(band, &blockWidth, &blockHeight);
        const char* layout = GDALGetMetadataItem(dataset, "LAYOUT", "IMAGE_STRUCTURE");
        const char* compression = GDALGetMetadataItem(dataset, "COMPRESSION", "IMAGE_STRUCTURE");
 
        char line[200];
        std::snprintf(line, sizeof line, "%d x %d pixels of %.6f x %.6f degrees\nLAYOUT=%s, COMPRESSION=%s, %d x %d blocks\noverviews",
                      GDALGetRasterXSize(dataset), GDALGetRasterYSize(dataset), t[1], -t[5], layout ? layout : "none",
                      compression ? compression : "none", blockWidth, blockHeight);
        std::string text = line;
        for (int i = 0; i < GDALGetOverviewCount(band); ++i) {
            GDALRasterBandH overview = GDALGetOverview(band, i);
            text += (i ? ", " : " ") + std::to_string(GDALGetRasterBandXSize(overview)) + " x " + std::to_string(GDALGetRasterBandYSize(overview));
        }
        GDALClose(dataset);
        return text;
    }
 
    [[noreturn]] static void fail() {
        const std::string reason = CPLGetLastErrorMsg();
        throw std::runtime_error(reason.empty() ? "GDAL could not write the COG" : reason);
    }
};

main.js

import { initNative, CogWriter } from './native/cog_writer.h';
import { RasterInfo } from './native/raster_info.h';
 
await initNative();
const raster = await new RasterInfo();
await raster.create('/vsimem/utm.tif', 1000, 800, 500000, 4450000, 30, 32635); // 30 x 24 km in UTM zone 35N
const writer = await new CogWriter();
const report = await writer.warpToCog('/vsimem/utm.tif', 'EPSG:4326', '/vsimem/cog.tif');
for (const line of report.split('\n')) console.log(line);

PRINTSfirst run downloads 28.8 MB

1093 x 672 pixels of 0.000322 x 0.000322 degrees
LAYOUT=COG, COMPRESSION=DEFLATE, 256 x 256 blocks
overviews 546 x 336, 273 x 168, 136 x 84

GDALWarp and GDALTranslate take their arguments as NULL-terminated string lists that JavaScript builds with allocPointer and cstring; the block size comes back through two 4-byte out-parameters. The COG driver calls zstd even when it writes Deflate, so zstd has to stay in the link (see the configuration above).

main.js

import {
    initNative, GDALAllRegister, GDALGetDriverByName, GDALCreate, GDALDataType, GDALSetGeoTransform,
    GDALSetProjection, GDALGetRasterBand, GDALRasterIO, GDALRWFlag, GDALClose, GDALOpenEx,
    GDALGetRasterXSize, GDALGetRasterYSize, GDALGetGeoTransform, GDALGetBlockSize,
    GDALGetMetadataItem, GDALGetOverviewCount, GDALGetOverview, GDALGetRasterBandXSize,
    GDALGetRasterBandYSize, allocBuffer, allocPointer, writePointerAt, cstring, writeNumberAt,
    readNumberAt, writeBytes,
} from '@crossbind/port-gdal/gdal.h';
import {
    GDALWarpAppOptionsNew, GDALWarpAppOptionsFree, GDALWarp, GDALTranslateOptionsNew,
    GDALTranslateOptionsFree, GDALTranslate,
} from '@crossbind/port-gdal/gdal_utils.h';
import { VSIUnlink } from '@crossbind/port-gdal/cpl_vsi.h';
import { CPLGetLastErrorMsg } from '@crossbind/port-gdal/cpl_error.h';
 
await initNative();
await GDALAllRegister();
// A NULL-terminated list of strings, as GDAL's option and argv parameters take them.
const list = async (items) => {
    const argv = await allocPointer(items.length + 1);
    for (const [i, item] of items.entries()) await writePointerAt(argv, i, await cstring(item));
    return argv;
};
// 1000 x 800 pixels of 30 m in UTM zone 35N, 30 x 24 km, that rise by 1 m a pixel east and 2 m south
const [width, height] = [1000, 800];
const float32 = await GDALDataType.GDT_Float32;
const created = await GDALCreate(await GDALGetDriverByName('GTiff'), '/vsimem/utm.tif', width, height, 1, float32, await list(['COMPRESS=DEFLATE']));
if (!created) throw new Error(await CPLGetLastErrorMsg());
const transform = await allocBuffer(6 * 8);
for (const [i, value] of [500000, 30, 0, 4450000, 0, -30].entries()) await writeNumberAt(transform, i, 'float64', value);
await GDALSetGeoTransform(created, transform);
await GDALSetProjection(created, 'EPSG:32635');
const heights = Float32Array.from({ length: width * height }, (_, i) => 100 + (i % width) + 2 * Math.floor(i / width));
const pixels = await allocBuffer(heights.byteLength);
await writeBytes(pixels, Array.from(new Uint8Array(heights.buffer), (byte) => String.fromCharCode(byte)).join(''));
await GDALRasterIO(await GDALGetRasterBand(created, 1), await GDALRWFlag.GF_Write, 0, 0, width, height, pixels, width, height, float32, 0, 0);
await GDALClose(created);
 
// gdalwarp -of VRT: the reprojected raster stays virtual and is computed while the COG is written.
const input = await GDALOpenEx('/vsimem/utm.tif', 2, null, null, null); // 2 is GDAL_OF_RASTER
const sources = await allocPointer(1);
await writePointerAt(sources, 0, input);
const warpOptions = await GDALWarpAppOptionsNew(await list(['-of', 'VRT', '-r', 'bilinear', '-t_srs', 'EPSG:4326']), null);
const warped = await GDALWarp('', null, 1, sources, warpOptions, null);
await GDALWarpAppOptionsFree(warpOptions);
if (!warped) throw new Error(await CPLGetLastErrorMsg());
const cogOptions = await GDALTranslateOptionsNew(await list(['-of', 'COG', '-co', 'COMPRESS=DEFLATE', '-co', 'BLOCKSIZE=256']), null);
await VSIUnlink('/vsimem/cog.tif'); // replace the output of an earlier run
const cog = await GDALTranslate('/vsimem/cog.tif', warped, cogOptions, null);
await GDALTranslateOptionsFree(cogOptions);
await GDALClose(warped);
await GDALClose(input);
if (!cog) throw new Error(await CPLGetLastErrorMsg());
await GDALClose(cog);
 
// What a reader of the file sees.
const dataset = await GDALOpenEx('/vsimem/cog.tif', 2, null, null, null);
const band = await GDALGetRasterBand(dataset, 1);
await GDALGetGeoTransform(dataset, transform);
const pixelWidth = await readNumberAt(transform, 1, 'float64');
const pixelHeight = -(await readNumberAt(transform, 5, 'float64'));
console.log(`${await GDALGetRasterXSize(dataset)} x ${await GDALGetRasterYSize(dataset)} pixels of ${pixelWidth.toFixed(6)} x ${pixelHeight.toFixed(6)} degrees`);
const blockWidth = await allocBuffer(4);
const blockHeight = await allocBuffer(4);
await GDALGetBlockSize(band, blockWidth, blockHeight);
const layout = await GDALGetMetadataItem(dataset, 'LAYOUT', 'IMAGE_STRUCTURE');
const compression = await GDALGetMetadataItem(dataset, 'COMPRESSION', 'IMAGE_STRUCTURE');
console.log(`LAYOUT=${layout}, COMPRESSION=${compression}, ${await readNumberAt(blockWidth, 0, 'int32')} x ${await readNumberAt(blockHeight, 0, 'int32')} blocks`);
const overviews = [];
for (let i = 0; i < (await GDALGetOverviewCount(band)); i++) {
    const overview = await GDALGetOverview(band, i);
    overviews.push(`${await GDALGetRasterBandXSize(overview)} x ${await GDALGetRasterBandYSize(overview)}`);
}
console.log(`overviews ${overviews.join(', ')}`);
await GDALClose(dataset);

PRINTSfirst run downloads 38.1 MB

1093 x 672 pixels of 0.000322 x 0.000322 degrees
LAYOUT=COG, COMPRESSION=DEFLATE, 256 x 256 blocks
overviews 546 x 336, 273 x 168, 136 x 84

Hillshade, slope and contour lines from an elevation model

GDALDEMProcessing is the gdaldem tool: hillshade, slope, aspect, roughness, TRI and TPI by name. GDALContourGenerateEx draws the contour lines gdal_contour draws, into any vector layer; here an in-memory one, measured with OGR_G_Length.

src/native/dem_tools.h

#pragma once
 
#include <cpl_error.h>
#include <cpl_string.h>
#include <gdal.h>
#include <gdal_alg.h>
#include <gdal_frmts.h>
#include <gdal_utils.h>
#include <ogr_api.h>
#include <ogr_srs_api.h>
 
#include <algorithm>
#include <cstdio>
#include <stdexcept>
#include <string>
#include <vector>
 
// Terrain products from an elevation model: the gdaldem tool's hillshade and slope, and the contour
// lines gdal_contour draws.
class DemTools {
public:
    DemTools() {
        GDALRegister_GTiff();
        GDALRegister_MEM();
    }
 
    // A round hill, 900 m at the centre of a 100 m plain, in whole metres.
    void createHill(const std::string& path, int size, double pixelSize) {
        GDALDatasetH dataset = GDALCreate(GDALGetDriverByName("GTiff"), path.c_str(), size, size, 1, GDT_Float32, nullptr);
        if (!dataset) fail();
        double transform[6] = {500000, pixelSize, 0, 4450000, 0, -pixelSize};
        GDALSetGeoTransform(dataset, transform);
        OGRSpatialReferenceH crs = OSRNewSpatialReference(nullptr);
        OSRImportFromEPSG(crs, 32635);
        GDALSetSpatialRef(dataset, crs);
        OSRDestroySpatialReference(crs);
        std::vector<float> row(size);
        const int centre = size / 2;
        for (int y = 0; y < size; ++y) {
            for (int x = 0; x < size; ++x) {
                const int dx = x - centre, dy = y - centre;
                row[x] = static_cast<float>(std::max(100, 900 - (dx * dx + dy * dy) / 4));
            }
            if (GDALRasterIO(GDALGetRasterBand(dataset, 1), GF_Write, 0, y, size, 1, row.data(), size, 1, GDT_Float32, 0, 0) != CE_None) {
                GDALClose(dataset);
                fail();
            }
        }
        GDALClose(dataset);
    }
 
    // gdaldem <processing>: "hillshade", "slope", "aspect", "roughness", "TRI" or "TPI". With
    // -compute_edges the border pixels get values too.
    std::string derive(const std::string& dem, const std::string& processing, const std::string& output) {
        GDALDatasetH source = open(dem);
        CPLStringList args;
        args.AddString("-compute_edges");
        GDALDEMProcessingOptions* options = GDALDEMProcessingOptionsNew(args.List(), nullptr);
        GDALDatasetH result = GDALDEMProcessing(output.c_str(), source, processing.c_str(), nullptr, options, nullptr);
        GDALDEMProcessingOptionsFree(options);
        GDALClose(source);
        if (!result) fail();
        GDALRasterBandH band = GDALGetRasterBand(result, 1);
        double min = 0, max = 0, mean = 0, deviation = 0;
        GDALComputeRasterStatistics(band, FALSE, &min, &max, &mean, &deviation, nullptr, nullptr);
        const int checksum = GDALChecksumImage(band, 0, 0, GDALGetRasterXSize(result), GDALGetRasterYSize(result));
        GDALClose(result);
        char line[160];
        std::snprintf(line, sizeof line, "%s: %.2f to %.2f, mean %.2f, checksum %d", processing.c_str(), min, max, mean, checksum);
        return line;
    }
 
    // gdal_contour -i <interval>: the lines go to an in-memory layer, one feature per line.
    std::string contours(const std::string& dem, double interval) {
        GDALDatasetH source = open(dem);
        GDALDatasetH store = GDALCreate(GDALGetDriverByName("MEM"), "", 0, 0, 0, GDT_Unknown, nullptr);
        OGRLayerH layer = GDALDatasetCreateLayer(store, "contours", GDALGetSpatialRef(source), wkbLineString, nullptr);
        OGRFieldDefnH field = OGR_Fld_Create("elevation", OFTReal);
        OGR_L_CreateField(layer, field, TRUE);
        OGR_Fld_Destroy(field);
 
        char value[32];
        std::snprintf(value, sizeof value, "%g", interval);
        CPLStringList options;
        options.SetNameValue("LEVEL_INTERVAL", value);
        options.SetNameValue("ELEV_FIELD", "0");
        const CPLErr error = GDALContourGenerateEx(GDALGetRasterBand(source, 1), layer, options.List(), nullptr, nullptr);
        GDALClose(source);
        if (error != CE_None) {
            GDALClose(store);
            fail();
        }
 
        int lines = 0;
        double lowest = 0, highest = 0, length = 0;
        OGR_L_ResetReading(layer);
        for (OGRFeatureH feature; (feature = OGR_L_GetNextFeature(layer)) != nullptr; OGR_F_Destroy(feature)) {
            const double elevation = OGR_F_GetFieldAsDouble(feature, 0);
            lowest = lines ? std::min(lowest, elevation) : elevation;
            highest = lines ? std::max(highest, elevation) : elevation;
            length += OGR_G_Length(OGR_F_GetGeometryRef(feature));
            ++lines;
        }
        GDALClose(store);
        char line[160];
        std::snprintf(line, sizeof line, "contours every %g m: %d lines from %g to %g m, %.1f km long", interval, lines, lowest, highest, length / 1000);
        return line;
    }
 
private:
    static GDALDatasetH open(const std::string& path) {
        GDALDatasetH dataset = GDALOpenEx(path.c_str(), GDAL_OF_RASTER, nullptr, nullptr, nullptr);
        if (!dataset) fail();
        return dataset;
    }
 
    [[noreturn]] static void fail() {
        const std::string reason = CPLGetLastErrorMsg();
        throw std::runtime_error(reason.empty() ? "GDAL could not process the elevation model" : reason);
    }
};

main.js

import { initNative, DemTools } from './native/dem_tools.h';
 
await initNative();
const tools = await new DemTools();
await tools.createHill('/vsimem/hill.tif', 101, 30); // 101 x 101 pixels of 30 m
console.log(await tools.derive('/vsimem/hill.tif', 'hillshade', '/vsimem/hillshade.tif'));
console.log(await tools.derive('/vsimem/hill.tif', 'slope', '/vsimem/slope.tif'));
console.log(await tools.contours('/vsimem/hill.tif', 100));

PRINTSfirst run downloads 28.8 MB

hillshade: 12.00 to 255.00, mean 156.63, checksum 58516
slope: 0.00 to 42.97, mean 27.46, checksum 54054
contours every 100 m: 11 lines from 200 to 900 m, 46.9 km long

GDALDEMProcessing and GDALContourGenerateEx are called as in C++. The options are string lists built with allocPointer and cstring, the statistics come back through four 8-byte out-parameters, and GDALContourGenerateEx returns a CPLErr enum member, so its .value is what is compared with 0.

main.js

import {
    initNative, GDALAllRegister, GDALGetDriverByName, GDALCreate, GDALDataType, GDALSetGeoTransform,
    GDALSetProjection, GDALGetSpatialRef, GDALGetRasterBand, GDALRasterIO, GDALRWFlag, GDALClose,
    GDALOpenEx, GDALGetRasterXSize, GDALGetRasterYSize, GDALComputeRasterStatistics,
    GDALDatasetCreateLayer, allocBuffer, allocPointer, writePointerAt, cstring, writeNumberAt,
    readNumberAt, writeBytes,
} from '@crossbind/port-gdal/gdal.h';
import {
    GDALDEMProcessingOptionsNew, GDALDEMProcessingOptionsFree, GDALDEMProcessing,
} from '@crossbind/port-gdal/gdal_utils.h';
import { GDALChecksumImage, GDALContourGenerateEx } from '@crossbind/port-gdal/gdal_alg.h';
import {
    OGR_Fld_Create, OGR_Fld_Destroy, OGR_L_CreateField, OGR_L_ResetReading, OGR_L_GetNextFeature,
    OGR_F_GetFieldAsDouble, OGR_F_GetGeometryRef, OGR_F_Destroy, OGR_G_Length,
} from '@crossbind/port-gdal/ogr_api.h';
import { OGRwkbGeometryType, OGRFieldType } from '@crossbind/port-gdal/ogr_core.h';
import { CPLGetLastErrorMsg } from '@crossbind/port-gdal/cpl_error.h';
 
await initNative();
await GDALAllRegister();
// A NULL-terminated list of strings, as GDAL's option and argv parameters take them.
const list = async (items) => {
    const argv = await allocPointer(items.length + 1);
    for (const [i, item] of items.entries()) await writePointerAt(argv, i, await cstring(item));
    return argv;
};
// A round hill, 900 m at the centre of a 100 m plain, in whole metres: 101 x 101 pixels of 30 m.
const size = 101;
const float32 = await GDALDataType.GDT_Float32;
const created = await GDALCreate(await GDALGetDriverByName('GTiff'), '/vsimem/hill.tif', size, size, 1, float32, null);
if (!created) throw new Error(await CPLGetLastErrorMsg());
const transform = await allocBuffer(6 * 8);
for (const [i, value] of [500000, 30, 0, 4450000, 0, -30].entries()) await writeNumberAt(transform, i, 'float64', value);
await GDALSetGeoTransform(created, transform);
await GDALSetProjection(created, 'EPSG:32635');
const centre = Math.floor(size / 2);
const heights = Float32Array.from({ length: size * size }, (_, i) => {
    const dx = (i % size) - centre;
    const dy = Math.floor(i / size) - centre;
    return Math.max(100, 900 - Math.floor((dx * dx + dy * dy) / 4));
});
const pixels = await allocBuffer(heights.byteLength);
await writeBytes(pixels, Array.from(new Uint8Array(heights.buffer), (byte) => String.fromCharCode(byte)).join(''));
await GDALRasterIO(await GDALGetRasterBand(created, 1), await GDALRWFlag.GF_Write, 0, 0, size, size, pixels, size, size, float32, 0, 0);
await GDALClose(created);
 
// gdaldem hillshade and slope; with -compute_edges the border pixels get values too.
const hill = await GDALOpenEx('/vsimem/hill.tif', 2, null, null, null); // 2 is GDAL_OF_RASTER
for (const processing of ['hillshade', 'slope']) {
    const options = await GDALDEMProcessingOptionsNew(await list(['-compute_edges']), null);
    const result = await GDALDEMProcessing(`/vsimem/${processing}.tif`, hill, processing, null, options, null);
    await GDALDEMProcessingOptionsFree(options);
    if (!result) throw new Error(await CPLGetLastErrorMsg());
    const band = await GDALGetRasterBand(result, 1);
    const [min, max, mean, deviation] = [await allocBuffer(8), await allocBuffer(8), await allocBuffer(8), await allocBuffer(8)];
    await GDALComputeRasterStatistics(band, 0, min, max, mean, deviation, null, null);
    const checksum = await GDALChecksumImage(band, 0, 0, await GDALGetRasterXSize(result), await GDALGetRasterYSize(result));
    await GDALClose(result);
    const value = async (handle) => (await readNumberAt(handle, 0, 'float64')).toFixed(2);
    console.log(`${processing}: ${await value(min)} to ${await value(max)}, mean ${await value(mean)}, checksum ${checksum}`);
}
 
// gdal_contour -i 100: the lines go to an in-memory layer, one feature per line.
const store = await GDALCreate(await GDALGetDriverByName('MEM'), '', 0, 0, 0, await GDALDataType.GDT_Unknown, null);
const layer = await GDALDatasetCreateLayer(store, 'contours', await GDALGetSpatialRef(hill), await OGRwkbGeometryType.wkbLineString, null);
const field = await OGR_Fld_Create('elevation', await OGRFieldType.OFTReal);
await OGR_L_CreateField(layer, field, 1);
await OGR_Fld_Destroy(field);
const error = await GDALContourGenerateEx(await GDALGetRasterBand(hill, 1), layer, await list(['LEVEL_INTERVAL=100', 'ELEV_FIELD=0']), null, null);
await GDALClose(hill);
if (error.value !== 0) throw new Error(await CPLGetLastErrorMsg());
let lines = 0;
let lowest = 0;
let highest = 0;
let length = 0;
await OGR_L_ResetReading(layer);
for (let feature; (feature = await OGR_L_GetNextFeature(layer)); await OGR_F_Destroy(feature)) {
    const elevation = await OGR_F_GetFieldAsDouble(feature, 0);
    lowest = lines ? Math.min(lowest, elevation) : elevation;
    highest = lines ? Math.max(highest, elevation) : elevation;
    length += await OGR_G_Length(await OGR_F_GetGeometryRef(feature));
    lines++;
}
await GDALClose(store);
console.log(`contours every 100 m: ${lines} lines from ${lowest} to ${highest} m, ${(length / 1000).toFixed(1)} km long`);

PRINTSfirst run downloads 38.1 MB

hillshade: 12.00 to 255.00, mean 156.63, checksum 58516
slope: 0.00 to 42.97, mean 27.46, checksum 54054
contours every 100 m: 11 lines from 200 to 900 m, 46.9 km long

Read features and filter them by attribute and area

OGR reads every vector format through one API: the schema from OGR_L_GetLayerDefn, then OGR_L_GetNextFeature over the features that pass OGR_L_SetAttributeFilter, a SQL WHERE clause, and OGR_L_SetSpatialFilterRect. Open options turn the lon and lat columns of a CSV into points.

src/native/feature_query.h

#pragma once
 
#include <cpl_conv.h>
#include <cpl_error.h>
#include <cpl_vsi.h>
#include <gdal.h>
#include <ogr_api.h>
#include <ogrsf_frmts.h>
 
#include <stdexcept>
#include <string>
 
// Reads a layer with OGR: its schema, then the features that pass an attribute filter (a SQL WHERE
// clause) inside a rectangle, with their attributes and geometry.
class FeatureQuery {
public:
    FeatureQuery() { RegisterOGRCSV(); }
 
    // `csv` is text with lon and lat columns, which the CSV driver turns into point geometries.
    std::string select(const std::string& csv, const std::string& where, double west, double south, double east, double north) {
        const char* path = "/vsimem/sensors.csv";
        VSIFCloseL(VSIFileFromMemBuffer(path, reinterpret_cast<GByte*>(const_cast<char*>(csv.data())), csv.size(), FALSE));
        const char* const openOptions[] = {"X_POSSIBLE_NAMES=lon", "Y_POSSIBLE_NAMES=lat", "KEEP_GEOM_COLUMNS=NO", "AUTODETECT_TYPE=YES", nullptr};
        GDALDatasetH dataset = GDALOpenEx(path, GDAL_OF_VECTOR, nullptr, openOptions, nullptr);
        if (!dataset) fail(path);
        OGRLayerH layer = GDALDatasetGetLayer(dataset, 0);
        OGRFeatureDefnH schema = OGR_L_GetLayerDefn(layer);
 
        std::string text = std::string(OGR_L_GetName(layer)) + ": " + std::to_string(OGR_L_GetFeatureCount(layer, TRUE)) + " features of " +
            OGRGeometryTypeToName(OGR_L_GetGeomType(layer)) + ", fields";
        for (int i = 0; i < OGR_FD_GetFieldCount(schema); ++i) {
            OGRFieldDefnH field = OGR_FD_GetFieldDefn(schema, i);
            text += std::string(i ? ", " : " ") + OGR_Fld_GetNameRef(field) + " " + OGR_GetFieldTypeName(OGR_Fld_GetType(field));
        }
 
        if (OGR_L_SetAttributeFilter(layer, where.c_str()) != OGRERR_NONE) {
            GDALClose(dataset);
            fail(path);
        }
        OGR_L_SetSpatialFilterRect(layer, west, south, east, north);
        OGR_L_ResetReading(layer);
        for (OGRFeatureH feature; (feature = OGR_L_GetNextFeature(layer)) != nullptr; OGR_F_Destroy(feature)) {
            text += "\n";
            for (int i = 0; i < OGR_F_GetFieldCount(feature); ++i) text += std::string(OGR_F_GetFieldAsString(feature, i)) + " ";
            char* wkt = nullptr;
            OGR_G_ExportToWkt(OGR_F_GetGeometryRef(feature), &wkt);
            text += wkt ? wkt : "";
            CPLFree(wkt);
        }
        GDALClose(dataset);
        VSIUnlink(path);
        return text;
    }
 
private:
    [[noreturn]] static void fail(const char* path) {
        const std::string reason = CPLGetLastErrorMsg();
        VSIUnlink(path);
        throw std::runtime_error(reason.empty() ? "GDAL could not read the features" : reason);
    }
};

main.js

import { initNative, FeatureQuery } from './native/feature_query.h';
 
await initNative();
const csv = [
    'id,kind,reading,lon,lat',
    '1,air,31.5,28.9784,41.0082',
    '2,air,18.2,32.8597,39.9334',
    '3,water,22.7,27.1428,38.4237',
    '4,air,12.9,39.7168,41.0027',
    '5,water,19.4,30.7133,36.8969',
    '6,air,27.3,29.0610,40.1885',
].join('\n');
const query = await new FeatureQuery();
// readings above 20 between 26 and 31 degrees east, 36 and 42 degrees north
const found = await query.select(csv, 'reading > 20', 26, 36, 31, 42);
for (const line of found.split('\n')) console.log(line);

PRINTSfirst run downloads 28.8 MB

sensors: 6 features of Point, fields id Integer, kind String, reading Real
1 air 31.5 POINT (28.9784 41.0082)
3 water 22.7 POINT (27.1428 38.4237)
6 air 27.3 POINT (29.061 40.1885)

Not possible from JavaScript alone

A spatial filter makes OGR build a GEOS prepared geometry, and GEOS is left out of this module: OGR_L_SetSpatialFilterRect then aborts it with "missing function: initGEOS_r". With GEOS linked the wasm is 27,393,760 bytes, over the 25 MiB (26,214,400-byte) limit the site's host puts on one file, and no configuration wins that back: crossbind puts -O3 after the emccFlags a config adds, so -Oz changes nothing. Binding gdal.h links GDALAllRegister and every driver with it, which already takes this module to 26,159,961 bytes without GEOS; the C++ version registers only the drivers it uses and is 16,451,235 bytes with GEOS.

What is different on WebAssembly

In a browser the module runs in a Worker by default (useWorker), so every call returns a promise: await calls and constructors alike.
The module has its own filesystem: m.FS writes files, m.getFileBytes reads them back and m.autoMountFiles mounts File objects from an <input type=file>. /memfs lives in memory; /opfs persists across reloads and needs the Worker. See Filesystem.
In Node.js, m.FS is the real disk, so use real paths there.
Multi-threaded builds (runtime: 'mt') need COOP and COEP headers in production. See Threading.

Other platforms

GDAL overview: the apps, every platform's setup and the packages.
GDAL for Android: React Native apps on Android.
GDAL for iOS: React Native apps on iOS.
GDAL for WASI: command-line programs under wasmtime.

Facts on this page come from the port manifests in the repository and from what npm served on beta when the site was built. See the Libraries guide for the full consumer flow.

MORE LIBRARIES

cURL Expat GEOS GeoTIFF iconv LERC libjpeg-turbo libTIFF OpenSSL PROJ SpatiaLite SQLite WebP zlib Zstandard