diff --git a/docs/examples/qgis-js-example-api/index.html b/docs/examples/qgis-js-example-api/index.html index a10e92d..d114aa5 100644 --- a/docs/examples/qgis-js-example-api/index.html +++ b/docs/examples/qgis-js-example-api/index.html @@ -3,8 +3,18 @@ qgis-js-example-api + + -

qgis-js-example-api

+

📐 Using the qgis-js API example

+

Open the Console to see the result 🤓

+ diff --git a/docs/examples/qgis-js-example-api/main.js b/docs/examples/qgis-js-example-api/main.js new file mode 100644 index 0000000..d51d12b --- /dev/null +++ b/docs/examples/qgis-js-example-api/main.js @@ -0,0 +1,29 @@ +const QGIS_JS_DIST = window.location.pathname + "node_modules/qgis-js/dist"; + +// loading the qgis-js library +const { qgis, QGIS_JS_VERSION } = await import(QGIS_JS_DIST + "/qgis.js"); +console.log(`qgis-js (v${QGIS_JS_VERSION})`); + +// booting the qgis-js runtime +console.log(`- loading qgis-js`); +const { api } = await qgis({ + prefix: QGIS_JS_DIST + "/assets/wasm", +}); +console.log(`- qgis-js ready`); + +// qgis-js API example +console.log(`- creating a rectangle`); +const rect = new api.Rectangle(1, 2, 3, 4); +console.log("-> " + printRect(rect)); + +console.log(`- scaling the rectangle`); +rect.scale(5); +console.log("-> " + printRect(rect)); + +console.log(`- getting the center of the rectangle`); +const center = rect.center(); +console.log(`-> Point: x: ${center.x}, y: ${center.y}`); + +function printRect(rect) { + return `Rectangle: xMaximum: ${rect.xMaximum}, xMinimum: ${rect.xMinimum}, yMaximum: ${rect.yMaximum}, yMinimum: ${rect.yMinimum}`; +} diff --git a/docs/examples/qgis-js-example-api/package.json b/docs/examples/qgis-js-example-api/package.json index be02d58..357b7c3 100644 --- a/docs/examples/qgis-js-example-api/package.json +++ b/docs/examples/qgis-js-example-api/package.json @@ -1,10 +1,14 @@ { "name": "qgis-js-example-api", "private": true, + "type": "module", "scripts": { - "start": "http-server --cors" + "start": "vite preview --outDir ." + }, + "dependencies": { + "qgis-js": "0.0.1" }, "devDependencies": { - "http-server": "^14.1.1" + "vite": "^5.0.10" } } diff --git a/docs/examples/qgis-js-example-api/vite.config.js b/docs/examples/qgis-js-example-api/vite.config.js new file mode 100644 index 0000000..8c3b57f --- /dev/null +++ b/docs/examples/qgis-js-example-api/vite.config.js @@ -0,0 +1,10 @@ +import { defineConfig } from "vite"; + +export default defineConfig({ + preview: { + headers: { + "Cross-Origin-Opener-Policy": "same-origin", + "Cross-Origin-Embedder-Policy": "require-corp", + }, + }, +}); diff --git a/docs/examples/qgis-js-example-ol/index.html b/docs/examples/qgis-js-example-ol/index.html index de01950..3cf73b0 100644 --- a/docs/examples/qgis-js-example-ol/index.html +++ b/docs/examples/qgis-js-example-ol/index.html @@ -3,8 +3,12 @@ qgis-js-example-ol + + -

qgis-js-example-ol

+

🗺️ Minimal OpenLayers example

+
+ diff --git a/docs/examples/qgis-js-example-ol/main.js b/docs/examples/qgis-js-example-ol/main.js new file mode 100644 index 0000000..d964b36 --- /dev/null +++ b/docs/examples/qgis-js-example-ol/main.js @@ -0,0 +1,54 @@ +import { qgis } from "qgis-js"; + +import { QgisCanvasDataSource } from "@qgis-js/ol"; + +import { Map, View } from "ol"; + +import ImageLayer from "ol/layer/Image"; +import Projection from "ol/proj/Projection.js"; + +// start the qgis-js runtime +const { api, fs } = await qgis({ + prefix: "/assets/wasm", +}); + +// prepare the upload directory +const uploadDir = "/upload"; +fs.mkdir(uploadDir); + +// fetch demo project and upload it to the runtime +const source = + "https://raw.githubusercontent.com/boardend/qgis-js-projects/main/demo/World%20GPKG"; +const files = ["project.qgz", "world_map.gpkg"]; +for (const file of files) { + const url = `${source}/${file}`; + const response = await fetch(url); + const blob = await response.blob(); + const buffer = await blob.arrayBuffer(); + fs.writeFile(`${uploadDir}/${file}`, new Uint8Array(buffer)); +} + +// load the uploaded project +api.loadProject(`${uploadDir}/${files[0]}`); + +// create the ol map with the projection from the project +const projection = new Projection({ + code: api.srid(), + units: "m", +}); + +new Map({ + target: "map", + layers: [ + new ImageLayer({ + source: new QgisCanvasDataSource(api, { + projection, + }), + }), + ], + view: new View({ + center: [0, 0], + zoom: 2, + projection, + }), +}); diff --git a/docs/examples/qgis-js-example-ol/package.json b/docs/examples/qgis-js-example-ol/package.json index be02d58..2a24e3c 100644 --- a/docs/examples/qgis-js-example-ol/package.json +++ b/docs/examples/qgis-js-example-ol/package.json @@ -1,10 +1,19 @@ { "name": "qgis-js-example-api", "private": true, + "type": "module", "scripts": { - "start": "http-server --cors" + "start": "vite dev", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "ol": "^8.2.0", + "@qgis-js/ol": "0.0.1", + "qgis-js": "0.0.1" }, "devDependencies": { - "http-server": "^14.1.1" + "vite": "^5.0.10", + "vite-plugin-static-copy": "^1.0.0" } } diff --git a/docs/examples/qgis-js-example-ol/style.css b/docs/examples/qgis-js-example-ol/style.css new file mode 100644 index 0000000..165fb3a --- /dev/null +++ b/docs/examples/qgis-js-example-ol/style.css @@ -0,0 +1,12 @@ +@import "node_modules/ol/ol.css"; + +body { + font-family: sans-serif; + margin: 1em; + padding: 1em; +} +#map { + width: 800px; + height: 600px; + border: 1px solid grey; +} diff --git a/docs/examples/qgis-js-example-ol/vite.config.js b/docs/examples/qgis-js-example-ol/vite.config.js new file mode 100644 index 0000000..a661496 --- /dev/null +++ b/docs/examples/qgis-js-example-ol/vite.config.js @@ -0,0 +1,39 @@ +import { defineConfig } from "vite"; + +import { viteStaticCopy } from "vite-plugin-static-copy"; + +const headers = { + "Cross-Origin-Opener-Policy": "same-origin", + "Cross-Origin-Embedder-Policy": "require-corp", +}; + +export default defineConfig({ + build: { + target: "esnext", + }, + plugins: [ + { + name: "headers-after-static-copy", + configureServer(server) { + server.middlewares.use((_req, res, next) => { + Object.entries(headers).forEach(([key, value]) => { + res.setHeader(key, value); + }); + next(); + }); + }, + }, + viteStaticCopy({ + silent: true, + targets: [ + { + src: "node_modules/qgis-js/dist/assets/wasm/**", + dest: "assets/wasm", + }, + ], + }), + ], + preview: { + headers, + }, +}); diff --git a/package.json b/package.json index 10d66c6..9c6c1e1 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "dev:preview": "npm run dev:build && pnpm --filter @qgis-js/dev preview", "site": "vite dev", "deploy": "pnpm -r --filter=./sites/** run deploy", + "publish": "pnpm publish -r --filter=./packages/qgis-js-** --access=public", "lint": "npm run lint:prettier && npm run lint:clang-format", "lint:prettier": "npx prettier . --write", "lint:pretty-quick": "pretty-quick --staged",