diff --git a/examples/geo-layers/globe-views/app.ts b/examples/geo-layers/globe-views/app.ts
new file mode 100644
index 0000000..052a56e
--- /dev/null
+++ b/examples/geo-layers/globe-views/app.ts
@@ -0,0 +1,94 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+
+import { Deck, _GlobeView } from '@deck.gl/core';
+import { GlobalGridLayer, H3Grid, A5Grid, S2Grid, GeohashGrid, QuadkeyGrid } from '@deck.gl-community/layers';
+import { getRes0Cells } from 'h3-js';
+
+const INITIAL_VIEW_STATE = {
+ latitude: 0,
+ longitude: 0,
+ zoom: 1,
+ minZoom: 1,
+ maxZoom: 1,
+ pitch: 0,
+ bearing: 0
+};
+
+const GRIDS = [
+ {
+ globalGrid: H3Grid,
+ data: getRes0Cells(),
+ // data: ['85283473fffffff', '85283477fffffff'],
+ color: [255, 0, 0, 100],
+ padding: { left: 100, right: 0, top: 100, bottom: 0 }
+ },
+ {
+ globalGrid: H3Grid,
+ data: getRes0Cells(),
+ // data: ['85283473fffffff', '85283477fffffff'],
+ color: [0, 255, 0, 100],
+ padding: { left: 0, right: 0, top: 400, bottom: 0 }
+ },
+ // {
+ // grid: A5Grid,
+ // data: ['63605e0000000000', '63606a0000000000']
+ // },
+ // {
+ // grid: S2Grid,
+ // data: ['89c25', '89c259']
+ // },
+ // {
+ // grid: GeohashGrid,
+ // data: ['u4pruydqqvj', 'u4pruydqqvm']
+ // },
+ // {
+ // grid: QuadkeyGrid,
+ // data: ['023112232', '023112233']
+ // }
+];
+
+const ViewProps = [
+ [255, 0, 0, 100],
+ [0, 128, 255, 100],
+ [0, 255, 0, 100],
+ [255, 255, 0, 100],
+ [255, 0, 255, 100]
+] as const satisfies [number, number, number, number][];
+
+
+export function exampleApplication() {
+ const views = GRIDS.map(({ globalGrid, padding }, i) => new _GlobeView({
+ id: globalGrid.name,
+ controller: true,
+ padding,
+ }));
+
+ const layers = GRIDS.map(({ globalGrid, data, color }, i) => new GlobalGridLayer({
+ id: globalGrid.name,
+ data: data.map(cellId => ({ cellId })),
+ globalGrid,
+ filled: true,
+ stroked: true,
+ getFillColor: color as [number, number, number, number],
+ getLineColor: [255, 255, 255],
+ lineWidthUnits: 'pixels',
+ lineWidthScale: 10,
+ lineWidthMinPixels: 1,
+ parameters: {
+ depthWriteEnabled: true,
+ depthCompare: 'less-equal',
+ cullMode: 'back'
+ }
+ }));
+
+ const deck = new Deck<_GlobeView[]>({
+ initialViewState: {
+ H3: INITIAL_VIEW_STATE,
+ A5: INITIAL_VIEW_STATE,
+ },
+ views,
+ layerFilter: ({ layer, viewport }) => layer.id == viewport.id,
+ layers
+ });
+}
diff --git a/examples/geo-layers/globe-views/index.html b/examples/geo-layers/globe-views/index.html
new file mode 100644
index 0000000..8deab49
--- /dev/null
+++ b/examples/geo-layers/globe-views/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+ GlobalGridLayer Globe Views
+
+
+
+
+
+
+
diff --git a/examples/geo-layers/globe-views/package.json b/examples/geo-layers/globe-views/package.json
new file mode 100644
index 0000000..4ecac2d
--- /dev/null
+++ b/examples/geo-layers/globe-views/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "global-grid-layer-globe-views",
+ "private": true,
+ "license": "MIT",
+ "type": "module",
+ "scripts": {
+ "start": "vite --open",
+ "start-local": "vite --config ../../vite.config.local.mjs"
+ },
+ "dependencies": {
+ "@deck.gl-community/layers": "^9.1.0-beta.5",
+ "@deck.gl/core": "^9.1.12"
+ },
+ "devDependencies": {
+ "typescript": "^5.4.4",
+ "vite": "^5.2.8"
+ }
+}
diff --git a/examples/geo-layers/globe-views/tsconfig.json b/examples/geo-layers/globe-views/tsconfig.json
new file mode 100644
index 0000000..ce0228c
--- /dev/null
+++ b/examples/geo-layers/globe-views/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "extends": "../../../tsconfig.json",
+ "include": ["./*.ts"]
+}
diff --git a/yarn.lock b/yarn.lock
index d37dea8..6f4ceba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1939,7 +1939,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@deck.gl-community/layers@workspace:modules/layers":
+"@deck.gl-community/layers@npm:^9.1.0-beta.5, @deck.gl-community/layers@workspace:modules/layers":
version: 0.0.0-use.local
resolution: "@deck.gl-community/layers@workspace:modules/layers"
dependencies:
@@ -14456,6 +14456,17 @@ __metadata:
languageName: node
linkType: hard
+"global-grid-layer-globe-views@workspace:examples/geo-layers/globe-views":
+ version: 0.0.0-use.local
+ resolution: "global-grid-layer-globe-views@workspace:examples/geo-layers/globe-views"
+ dependencies:
+ "@deck.gl-community/layers": "npm:^9.1.0-beta.5"
+ "@deck.gl/core": "npm:^9.1.12"
+ typescript: "npm:^5.4.4"
+ vite: "npm:^5.2.8"
+ languageName: unknown
+ linkType: soft
+
"global-modules@npm:^1.0.0":
version: 1.0.0
resolution: "global-modules@npm:1.0.0"