Working examples (to test them on StackBlitz)

qgis · Dec 16, 2023 · cc9ac86 · cc9ac86
1 parent 501c7f8
commit cc9ac86
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 6 deletions.
diff --git a/docs/examples/qgis-js-example-api/index.html b/docs/examples/qgis-js-example-api/index.html
@@ -3,8 +3,18 @@
   <head>
     <meta charset="utf-8" />
     <title>qgis-js-example-api</title>
+    <link rel="icon" href="data:," />
+    <style>
+      body {
+        font-family: sans-serif;
+        margin: 1em;
+        padding: 1em;
+      }
+    </style>
   </head>
   <body>
-    <p>qgis-js-example-api</p>
+    <h2>📐 Using the qgis-js API example</h2>
+    <p>Open the Console to see the result 🤓</p>
+    <script type="module" src="main.js"></script>
   </body>
 </html>
diff --git a/docs/examples/qgis-js-example-api/main.js 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
@@ -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
@@ -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
@@ -3,8 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <title>qgis-js-example-ol</title>
+    <link rel="icon" href="data:," />
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <p>qgis-js-example-ol</p>
+    <h2>🗺️ Minimal OpenLayers example</h2>
+    <div id="map"></div>
+    <script type="module" src="main.js"></script>
   </body>
 </html>
diff --git a/docs/examples/qgis-js-example-ol/main.js 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
@@ -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
@@ -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
@@ -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
@@ -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",