Skip to content

Commit e4891a2

Browse files
ibgreenibgreen
authored
[chore] Move 9.2 widget example to test/apps (#9574)
1 parent 99f45c0 commit e4891a2

File tree

11 files changed

+132
-1
lines changed

11 files changed

+132
-1
lines changed

‎examples/get-started/pure-js/widgets/app.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
// deck.gl
2+
// SPDX-License-Identifier: MIT
3+
// Copyright (c) vis.gl contributors
4+
5+
import {Deck} from '@deck.gl/core';
6+
import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
7+
import {
8+
CompassWidget,
9+
ZoomWidget,
10+
FullscreenWidget,
11+
DarkGlassTheme,
12+
LightGlassTheme
13+
} from '@deck.gl/widgets';
14+
import '@deck.gl/widgets/stylesheet.css';
15+
16+
/* global window */
17+
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
18+
const widgetTheme = prefersDarkScheme.matches ? DarkGlassTheme : LightGlassTheme;
19+
20+
// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
21+
const COUNTRIES =
22+
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson'; //eslint-disable-line
23+
const AIR_PORTS =
24+
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
25+
26+
const INITIAL_VIEW_STATE = {
27+
latitude: 51.47,
28+
longitude: 0.45,
29+
zoom: 4,
30+
bearing: 0,
31+
pitch: 30
32+
};
33+
34+
new Deck({
35+
initialViewState: INITIAL_VIEW_STATE,
36+
controller: true,
37+
layers: [
38+
new GeoJsonLayer({
39+
id: 'base-map',
40+
data: COUNTRIES,
41+
// Styles
42+
stroked: true,
43+
filled: true,
44+
lineWidthMinPixels: 2,
45+
opacity: 0.4,
46+
getLineColor: [60, 60, 60],
47+
getFillColor: [200, 200, 200]
48+
}),
49+
new GeoJsonLayer({
50+
id: 'airports',
51+
data: AIR_PORTS,
52+
// Styles
53+
filled: true,
54+
pointRadiusMinPixels: 2,
55+
pointRadiusScale: 2000,
56+
getPointRadius: f => 11 - f.properties.scalerank,
57+
getFillColor: [200, 0, 80, 180],
58+
// Interactive props
59+
pickable: true,
60+
autoHighlight: true,
61+
onClick: info =>
62+
// eslint-disable-next-line
63+
info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
64+
}),
65+
new ArcLayer({
66+
id: 'arcs',
67+
data: AIR_PORTS,
68+
dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
69+
// Styles
70+
getSourcePosition: f => [-0.4531566, 51.4709959], // London
71+
getTargetPosition: f => f.geometry.coordinates,
72+
getSourceColor: [0, 128, 200],
73+
getTargetColor: [200, 0, 80],
74+
getWidth: 1
75+
})
76+
],
77+
widgets: [
78+
new ZoomWidget({style: widgetTheme}),
79+
new CompassWidget({style: widgetTheme}),
80+
new FullscreenWidget({style: widgetTheme})
81+
]
82+
});

‎examples/get-started/pure-js/widgets/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@
88
</style>
99
</head>
1010
<body></body>
11-
<script type="module" src="app.ts"></script>
11+
<script type="module" src="app.js"></script>
1212
</html>

‎test/apps/widgets-example-9.2/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## Example: Use deck.gl with widgets
2+
3+
Uses [Vite](https://vitejs.dev/) to bundle and serve files.
4+
5+
## Usage
6+
7+
To install dependencies:
8+
9+
```bash
10+
npm install
11+
# or
12+
yarn
13+
```
14+
15+
Commands:
16+
* `npm start` is the development target, to serve the app and hot reload.
17+
* `npm run build` is the production target, to create the final bundle and write to disk.

‎examples/get-started/pure-js/widgets/app.ts‎ renamed to ‎test/apps/widgets-example-9.2/app.ts‎

File renamed without changes.

‎test/apps/widgets-example-9.2/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>deck.gl Example</title>
6+
<style>
7+
body {margin: 0; width: 100vw; height: 100vh; overflow: hidden;}
8+
</style>
9+
</head>
10+
<body></body>
11+
<script type="module" src="app.ts"></script>
12+
</html>

‎test/apps/widgets-example-9.2/package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "deckgl-example-pure-js-basic",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"license": "MIT",
7+
"scripts": {
8+
"start": "vite --open",
9+
"start-local": "vite --config ../vite.config.local.mjs",
10+
"build": "vite build"
11+
},
12+
"dependencies": {
13+
"@deck.gl/core": "^9.1.0",
14+
"@deck.gl/layers": "^9.1.0",
15+
"@deck.gl/widgets": "^9.1.0"
16+
},
17+
"devDependencies": {
18+
"vite": "^4.0.0"
19+
}
20+
}

‎test/apps/widgets/app.js‎ renamed to ‎test/apps/widgets-layerlist/app.js‎

File renamed without changes.

‎test/apps/widgets/index.html‎ renamed to ‎test/apps/widgets-layerlist/index.html‎

File renamed without changes.

‎test/apps/widgets/layer-list-widget.ts‎ renamed to ‎test/apps/widgets-layerlist/layer-list-widget.ts‎

File renamed without changes.

‎test/apps/widgets/map.jpg‎ renamed to ‎test/apps/widgets-layerlist/map.jpg‎

File renamed without changes.

0 commit comments

Comments
 (0)