test: New test app for non-geospatial widgets (#9612)

ibgreen-openai · web-flow · commit 9c213f4f4679 · 2025-05-01T20:31:47.000-04:00
diff --git a/test/apps/widgets-infovis/README.md b/test/apps/widgets-infovis/README.md
@@ -0,0 +1,17 @@
+## Example: deck.gl widgets with non-geospatial data
+
+Uses [Vite](https://vitejs.dev/) to bundle and serve files.
+
+## Usage
+
+To install dependencies:
+
+```bash
+npm install
+# or
+yarn
+```
+
+Commands:
+* `npm start` is the development target, to serve the app and hot reload.
+* `npm run build` is the production target, to create the final bundle and write to disk.
diff --git a/test/apps/widgets-infovis/app.js b/test/apps/widgets-infovis/app.js
@@ -0,0 +1,58 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Deck, OrbitView} from '@deck.gl/core';
+import {ScatterplotLayer} from '@deck.gl/layers';
+import {
+  CompassWidget,
+  ZoomWidget,
+  FullscreenWidget,
+  DarkGlassTheme,
+  LightGlassTheme
+} from '@deck.gl/widgets';
+import '@deck.gl/widgets/stylesheet.css';
+
+/* global window */
+const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+const widgetTheme = prefersDarkScheme.matches ? DarkGlassTheme : LightGlassTheme;
+
+function generateData(count) {
+  const result = [];
+  for (let i = 0; i < count; i++) {
+    result.push({
+      position: [Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50],
+      color: [Math.random() * 255, Math.random() * 255, Math.random() * 255]
+    });
+  }
+  return result;
+}
+
+const INITIAL_VIEW_STATE = {
+  target: [0, 0, 0],
+  rotationX: 45,
+  rotationOrbit: 0,
+  zoom: 0
+};
+
+new Deck({
+  views: new OrbitView(),
+  initialViewState: INITIAL_VIEW_STATE,
+  controller: true,
+  layers: [
+    new ScatterplotLayer({
+      id: 'scatter',
+      data: generateData(500),
+      getPosition: d => d.position,
+      getFillColor: d => d.color,
+      getRadius: 3,
+      pickable: true,
+      autoHighlight: true
+    })
+  ],
+  widgets: [
+    new ZoomWidget({style: widgetTheme}),
+    new CompassWidget({style: widgetTheme}),
+    new FullscreenWidget({style: widgetTheme})
+  ]
+});
diff --git a/test/apps/widgets-infovis/index.html b/test/apps/widgets-infovis/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>deck.gl non-geospatial widgets example</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
+  </head>
+  <body>
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>
diff --git a/test/apps/widgets-infovis/package.json b/test/apps/widgets-infovis/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "deckgl-example-pure-js-widgets-infovis",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "start": "vite --open",
+    "start-local": "vite --config ../../../vite.config.local.mjs",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@deck.gl/core": "^9.0.0",
+    "@deck.gl/layers": "^9.0.0",
+    "@deck.gl/widgets": "^9.0.0"
+  },
+  "devDependencies": {
+    "vite": "^4.0.0"
+  }
+}
