Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add(examples): react widgets get started #8889

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/get-started/pure-js/widgets/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "deckgl-example-pure-js-basic",
"name": "deckgl-example-pure-js-widgets",
"version": "0.0.0",
"private": true,
"license": "MIT",
Expand Down
17 changes: 17 additions & 0 deletions examples/get-started/react/widgets/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
## Example: Use deck.gl with widgets

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.
87 changes: 87 additions & 0 deletions examples/get-started/react/widgets/app.jsx
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Pessimistress if this too complex for get-started then maybe I can write a custom widget developer guide. I think it'd be common for a react user to want to implement their own widget, and we could document a basic pattern they could use.

Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import React from 'react';
import {createRoot} from 'react-dom/client';
import DeckGL, {GeoJsonLayer, ArcLayer} from 'deck.gl';
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)');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: I wasn't aware that there was a standardized way to query for dark mode. Seems like something that could be built into the widget theming system as a default? PreferredTheme or something like that? Though maybe it is better for exposition to show it here.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer the exposition here since apps implement their themes in so many different ways. Maybe they don't want the "Glass" version, maybe they let the user override theme in a setting, etc..

const widgetTheme = prefersDarkScheme.matches ? DarkGlassTheme : LightGlassTheme;

// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
const COUNTRIES =
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson'; //eslint-disable-line
const AIR_PORTS =
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

const INITIAL_VIEW_STATE = {
latitude: 51.47,
longitude: 0.45,
zoom: 4,
bearing: 0,
pitch: 30
};

function Root() {
const onClick = info => {
if (info.object) {
// eslint-disable-next-line
alert(`${info.object.properties.name} (${info.object.properties.abbrev})`);
}
};

return (
<DeckGL
controller={true}
initialViewState={INITIAL_VIEW_STATE}
widgets={[
new ZoomWidget({style: widgetTheme}),
new CompassWidget({style: widgetTheme}),
new FullscreenWidget({style: widgetTheme})
]}
>
<GeoJsonLayer
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated: should we move get-started to TypeScript? Maybe pure-js can be reserved for JS examples, but react projects are more likely to be using bundlers/plugins/dev frameworks that already support TS.

It's known that JSX layers do not work with TS, though

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if the fiber renderer works with TSX? visgl/deck.gl-community#35

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a value in using JSX layers when the stars of the show, the Widgets, are not expressed as JSX?

Copy link
Collaborator Author

@chrisgervang chrisgervang Aug 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This got me thinking, if I'm writing a react app and making a custom widget then I'd probably like to write a widget in react. I think we could show how React Portals offer a pretty seamless interface for this.

id="base-map"
data={COUNTRIES}
stroked={true}
filled={true}
lineWidthMinPixels={2}
opacity={0.4}
getLineColor={[60, 60, 60]}
getFillColor={[200, 200, 200]}
/>
<GeoJsonLayer
id="airports"
data={AIR_PORTS}
filled={true}
pointRadiusMinPixels={2}
pointRadiusScale={2000}
getPointRadius={f => 11 - f.properties.scalerank}
getFillColor={[200, 0, 80, 180]}
pickable={true}
autoHighlight={true}
onClick={onClick}
/>
<ArcLayer
id="arcs"
data={AIR_PORTS}
dataTransform={d => d.features.filter(f => f.properties.scalerank < 4)}
getSourcePosition={f => [-0.4531566, 51.4709959]}
getTargetPosition={f => f.geometry.coordinates}
getSourceColor={[0, 128, 200]}
getTargetColor={[200, 0, 80]}
getWidth={1}
/>
</DeckGL>
);
}

/* global document */
const container = document.body.appendChild(document.createElement('div'));
createRoot(container).render(<Root />);
12 changes: 12 additions & 0 deletions examples/get-started/react/widgets/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>deck.gl Example</title>
<style>
body {margin: 0; width: 100vw; height: 100vh; overflow: hidden;}
</style>
</head>
<body></body>
<script type="module" src="app.jsx"></script>
</html>
20 changes: 20 additions & 0 deletions examples/get-started/react/widgets/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "deckgl-example-react-widgets",
"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": "^9.0.0",
"@deck.gl/widgets": "^9.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"vite": "^4.0.0"
}
}
Loading