add(examples): react widgets get started #8889
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "name": "deckgl-example-pure-js-widgets", | ||
| "version": "0.0.0", | ||
| "private": true, | ||
| "license": "MIT", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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)'); | ||
|
There was a problem hiding this comment. 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? There was a problem hiding this comment. 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 | ||
|
There was a problem hiding this comment. 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 There was a problem hiding this comment. I wonder if the fiber renderer works with TSX? visgl/deck.gl-community#35 There was a problem hiding this comment. Is there a value in using JSX layers when the stars of the show, the Widgets, are not expressed as JSX? There was a problem hiding this comment. 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 />); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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.