I have a map-tool built in vue3, that has a bunch of different layers. I want to export all of these layers into a geopackage that the user can download. The layers can be toggled on and off and will be updated with new data on a weekly basis, so it's important that the geopackage is exported with the existing geojson-data. I first succesfully exported each layer as shapefiles, but since shapefiles doesnt support multiple layers I want to instead export it as a geopackage consisting of all the layers.
I found this library: https://github.com/ngageoint/geopackage-js which is supposed to work in a browser environment. However, I am not quite understanding how to initialize and create the geopackage with it. From my understanding it is using sql.js under the hood to create a "database" in the browser memory? How would I go about creating a geopackage from geojson?
Is anyone familiar with this library or has any other tips?
I have succesfully created a sql database in the browser memory with sql.js, however I am not sure how to move forward with the geopackage part:
const SQL = await initSqlJs(file =>/node_modules/sql.js/dist/${file}) const db = new SQL.Database();
After some days of trying to figure this out, I was finally able to. The documentation for the geopackage-js library is a very outdated; there are multiple types and methods that exist in their documentation but not in the actual library.
In order for *ngageoint/geopackage-js * to connect to the wasm-file, I copied the sql-wasm.wasm from ./node_modules/@ngageoint/geopackage/dist/sql-wasm.wasm to my assets folder and then ran this function provided by them setSqljsWasmLocateFile(file => /src/assets/${file})
After that I could succesfully create a geopackage using this method const geoPackage = await GeoPackageAPI.create(); and then I was able to, with some trial and error, figure out how to add geojson to it.
After adding my columns, tables and data I finally exported the geopackage with some help from the file-saver library:
const file = await geoPackage.export();
const blob = new Blob([file], { type: 'application/octet-stream' });
saveAs(blob, 'example.gpkg');