Skip to content

Commit 08ea4fc

Browse files
ibgreenibgreen
authored
feat(geo-layers): Fix the geo-layers module (#265)
1 parent 63ffab4 commit 08ea4fc

34 files changed

Lines changed: 1705 additions & 11 deletions

File tree

‎docs/modules/geo-layers/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ The deck.gl-community repo is specifically set up to collect useful code that no
77
![deck.gl v9](https://img.shields.io/badge/deck.gl-v9-green.svg?style=flat-square")
88
![WebGPU not supported](https://img.shields.io/badge/webgpu-no-red.svg?style=flat-square")
99

10-
This module provides a suite of non-official layers for [deck.gl](https://deck.gl).
10+
This module provides a suite of non-official geospatial layers for [deck.gl](https://deck.gl).
1111

1212
## Installation
1313

1414
```bash
15-
npm install @deck.gl-community/infovis-layers
15+
npm install @deck.gl-community/geo-layers
1616
```
1717

18-
## History
18+
## Background
1919

20-
Various layers developed by deck.gl maintainers that could be of use to others.
20+
This modules exports various geospatial deck.gl layers developed by the community that could be of use to others.

‎docs/modules/geo-layers/api-reference/global-grid-layer.md‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
# GlobalGridLayer
2+
3+
<!--
4+
import {GlobalGridLayerDemo} from '@site/src/doc-demos/geo-layers';
5+
<GlobalGridLayerDemo />
6+
-->
7+
8+
The `GlobalGridLayer` renders filled and/or stroked polygons based on the specified DGGS geospatial indexing system.
9+
10+
`GlobalGridLayer` is a [CompositeLayer](https://deck.gl/docs/api-reference/core/composite-layer).
11+
12+
13+
import Tabs from '@theme/Tabs';
14+
import TabItem from '@theme/TabItem';
15+
16+
<Tabs groupId="language">
17+
<TabItem value="js" label="JavaScript">
18+
19+
```js
20+
import {Deck} from '@deck.gl/core';
21+
import {GlobalGridLayer, A5Decoder} from '@deck.gl/geo-layers';
22+
23+
const layer = new SGGSLayer({
24+
id: 'GlobalGridLayer',
25+
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf.bike.parking.a5.json',
26+
globalGrid: A5Decoder,
27+
28+
extruded: true,
29+
getPentagon: f => f.pentagon,
30+
getFillColor: f => {
31+
const value = f.count / 211;
32+
return [(1 - value) * 235, 255 - 85 * value, 255 - 170 * value];
33+
},
34+
getElevation: f => f.count,
35+
elevationScale: 10,
36+
pickable: true
37+
});
38+
39+
new Deck({
40+
initialViewState: {
41+
longitude: -122.4,
42+
latitude: 37.74,
43+
zoom: 11
44+
},
45+
controller: true,
46+
getTooltip: ({object}) => object && `${object.pentagon} count: ${object.count}`,
47+
layers: [layer]
48+
});
49+
```
50+
51+
</TabItem>
52+
<TabItem value="ts" label="TypeScript">
53+
54+
```ts
55+
import {Deck, PickingInfo} from '@deck.gl/core';
56+
import {GlobalGridLayer} from '@deck.gl/geo-layers';
57+
58+
type DataType = {
59+
pentagon: string;
60+
count: number;
61+
};
62+
63+
const layer = new GlobalGridLayer<DataType>({
64+
id: 'GlobalGridLayer',
65+
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf.bike.parking.a5.json',
66+
globalGrid: A5Decoder,
67+
68+
extruded: true,
69+
getPentagon: (f: DataType) => f.pentagon,
70+
getFillColor: (f: DataType) => {
71+
const value = f.count / 211;
72+
return [(1 - value) * 235, 255 - 85 * value, 255 - 170 * value];
73+
},
74+
getElevation: (f: DataType) => f.count,
75+
elevationScale: 10,
76+
pickable: true
77+
});
78+
79+
new Deck({
80+
initialViewState: {
81+
longitude: -122.4,
82+
latitude: 37.74,
83+
zoom: 11
84+
},
85+
controller: true,
86+
getTooltip: ({object}: PickingInfo<DataType>) => object && `${object.pentagon} count: ${object.count}`,
87+
layers: [layer]
88+
});
89+
```
90+
91+
</TabItem>
92+
<TabItem value="react" label="React">
93+
94+
```tsx
95+
import React from 'react';
96+
import {DeckGL} from '@deck.gl/react';
97+
import {GlobalGridLayer} from '@deck.gl/geo-layers';
98+
import type {PickingInfo} from '@deck.gl/core';
99+
100+
type DataType = {
101+
pentagon: string;
102+
count: number;
103+
};
104+
105+
function App() {
106+
const layer = new GlobalGridLayer<DataType>({
107+
id: 'GlobalGridLayer',
108+
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf.bike.parking.a5.json',
109+
globalGrid: A5Decoder,
110+
111+
extruded: true,
112+
getPentagon: (f: DataType) => f.pentagon,
113+
getFillColor: (f: DataType) => {
114+
const value = f.count / 211;
115+
return [(1 - value) * 235, 255 - 85 * value, 255 - 170 * value];
116+
},
117+
getElevation: (f: DataType) => f.count,
118+
elevationScale: 10,
119+
pickable: true
120+
});
121+
122+
return <DeckGL
123+
initialViewState={{
124+
longitude: -122.4,
125+
latitude: 37.74,
126+
zoom: 11
127+
}}
128+
controller
129+
getTooltip={({object}: PickingInfo<DataType>) => object && `${object.pentagon} count: ${object.count}`}
130+
layers={[layer]}
131+
/>;
132+
}
133+
```
134+
135+
</TabItem>
136+
</Tabs>
137+
138+
139+
## Installation
140+
141+
To install the dependencies from NPM:
142+
143+
```bash
144+
npm install deck.gl
145+
# or
146+
npm install @deck.gl/core @deck.gl/layers @deck.gl/geo-layers
147+
```
148+
149+
```ts
150+
import {GlobalGridLayer} from '@deck.gl/geo-layers';
151+
import type {GlobalGridLayerProps} from '@deck.gl/geo-layers';
152+
153+
new GlobalGridLayer<DataT>(...props: GlobalGridLayerProps<DataT>[]);
154+
```
155+
156+
To use pre-bundled scripts:
157+
158+
```html
159+
<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
160+
<!-- or -->
161+
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
162+
<script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"></script>
163+
<script src="https://unpkg.com/@deck.gl/geo-layers@^9.0.0/dist.min.js"></script>
164+
```
165+
166+
```js
167+
new deck.GlobalGridLayer({});
168+
```
169+
170+
171+
## Properties
172+
173+
174+
175+
176+
Inherits from all [Base Layer](https://deck.gl/docs/api-reference/core/layer), [CompositeLayer](https://deck.gl/docs/api-reference/core/composite-layer), and [PolygonLayer](https://deck.gl/docs/api-reference/layers/polygon-layer) properties, plus the following:
177+
178+
### Data Accessors
179+
180+
#### `getPentagon` (Accessor&lt;bigint | string&gt;] ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square") {#getpentagon}
181+
182+
Called for each data object to retrieve the identifier of the DGGS cell id. May return one of the following:
183+
184+
- A 64-bit [BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) identifier for the cell.
185+
- A string token representing the DGGS-specific string encoding of the 64-bit integer
186+
187+
188+
* default: `object => object.pentagon`
189+
190+
191+
## Sub Layers
192+
193+
The `GlobalGridLayer` renders the following sublayers:
194+
195+
* `cell` - a [PolygonLayer](https://deck.gl/docs/api-reference/layers/polygon-layer) rendering the DGGS cells.
196+
197+
198+
## Source
199+
200+
[modules/geo-layers/src/global-grid-layer](https://github.com/visgl/deck.gl/tree/master/modules/geo-layers/src/global-grid-layer)

‎docs/modules/geo-layers/api-reference/tile-source-layer.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# TileSourceLayer

‎docs/modules/geo-layers/sidebar.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
"type": "category",
33
"label": "@deck.gl-community/geo-layers",
44
"items": [
5-
"modules/geo-layers/README"
5+
"modules/geo-layers/README",
6+
"modules/geo-layers/api-reference/global-grid-layer",
7+
"modules/geo-layers/api-reference/tile-source-layer"
68
]
79
}

‎examples/graph-layers/graph-viewer-legacy/LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
Copyright (c) 2015 - 2021 Uber Technologies, Inc.
2-
Copyright (c) 2022 - 2023 vis.gl contributors
2+
Copyright (c) 2022 - 2025 vis.gl contributors
33

44
Permission is hereby granted, free of charge, to any person obtaining a copy
55
of this software and associated documentation files (the "Software"), to deal

‎examples/graph-layers/graph-viewer/LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
Copyright (c) 2015 - 2021 Uber Technologies, Inc.
2-
Copyright (c) 2022 - 2023 vis.gl contributors
2+
Copyright (c) 2022 - 2025 vis.gl contributors
33

44
Permission is hereby granted, free of charge, to any person obtaining a copy
55
of this software and associated documentation files (the "Software"), to deal

‎modules/experimental/LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
Copyright (c) 2015 - 2021 Uber Technologies, Inc.
2-
Copyright (c) 2022 - 2023 vis.gl contributors
2+
Copyright (c) 2022 - 2025 vis.gl contributors
33

44
Permission is hereby granted, free of charge, to any person obtaining a copy
55
of this software and associated documentation files (the "Software"), to deal

‎modules/geo-layers/LICENSE‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) 2022 - 2025 vis.gl contributors
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in
11+
all copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19+
THE SOFTWARE.

‎modules/geo-layers/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# @deck.gl-community/layers
2+
3+
This module contains a suite of non-official deck.gl layers.
4+
5+
They can be quite useful in applications, however they are not officially supported by the deck.gl team, so use at your own risk.

‎modules/geo-layers/package.json‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "@deck.gl-community/geo-layers",
3+
"version": "9.1.0-beta.5",
4+
"description": "Add-0n geospatial layers for deck.gl",
5+
"license": "MIT",
6+
"keywords": [
7+
"layers",
8+
"visualization",
9+
"gpu",
10+
"deck.gl"
11+
],
12+
"type": "module",
13+
"sideEffects": false,
14+
"types": "./dist/index.d.ts",
15+
"main": "./dist/index.cjs",
16+
"module": "./dist/index.js",
17+
"exports": {
18+
".": {
19+
"types": "./dist/index.d.ts",
20+
"require": "./dist/index.cjs",
21+
"import": "./dist/index.js"
22+
}
23+
},
24+
"files": [
25+
"dist",
26+
"src"
27+
],
28+
"scripts": {
29+
"test": "vitest run",
30+
"test-watch": "vitest"
31+
},
32+
"dependencies": {
33+
"@deck.gl/core": "^9.1.12",
34+
"@deck.gl/extensions": "^9.1.0",
35+
"@deck.gl/geo-layers": "^9.1.0",
36+
"@deck.gl/layers": "^9.1.0",
37+
"@deck.gl/mesh-layers": "^9.1.0",
38+
"@deck.gl/react": "^9.1.0",
39+
"@loaders.gl/core": "^4.2.0",
40+
"@loaders.gl/i3s": "^4.2.0",
41+
"@loaders.gl/loader-utils": "^4.2.0",
42+
"@loaders.gl/schema": "^4.2.0",
43+
"@loaders.gl/tiles": "^4.2.0",
44+
"@luma.gl/constants": "^9.1.9",
45+
"@luma.gl/core": "^9.1.9",
46+
"@luma.gl/engine": "^9.1.9",
47+
"@math.gl/core": "^4.0.0",
48+
"a5-js": "^0.1.4",
49+
"h3-js": "^4.2.1"
50+
},
51+
"devDependencies": {
52+
"@deck.gl/test-utils": "^9.1.12",
53+
"@luma.gl/webgpu": "^9.1.9"
54+
}
55+
}

0 commit comments

Comments
 (0)