### Install and Run Wild-Forest Example

Source: https://github.com/visgl/deck.gl-community/blob/master/modules/three/README.md

Steps to set up and run the wild-forest example. This includes navigating to the example directory, installing dependencies, and starting the development server.

```bash
cd examples/three/wild-forest
yarn          # first time only
yarn start    # opens http://localhost:8080
```

--------------------------------

### Run a deck.gl-community Example Locally

Source: https://github.com/visgl/deck.gl-community/blob/master/CONTRIBUTING.md

Navigate to an example directory, install its dependencies, and start the local development server. Use the --force flag to restart after dependency changes.

```bash
cd examples/bing-maps
yarn
yarn start-local
```

--------------------------------

### Install and Run Timeline Layer Example

Source: https://github.com/visgl/deck.gl-community/blob/master/dev/timeline-layers/examples/timeline-layer/README.md

Use these commands to either run the example against installed packages or against local source code for development.

```bash
# Against installed packages
yarn start

# Against local source (dev)
yarn start-local
```

--------------------------------

### Install @deck.gl-community/three

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/three/README.md

Install the deck.gl-community/three module using npm.

```bash
npm install @deck.gl-community/three
```

--------------------------------

### Install Deck.gl Community Widgets

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/widgets/README.md

Install the @deck.gl-community/widgets package using npm.

```bash
npm install @deck.gl-community/widgets
```

--------------------------------

### Start Local Development Server

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/developer-guide/get-started.md

Commands to navigate to the website directory and start the local development server.

```bash
cd website
yarn
yarn start

```

--------------------------------

### Install deck.gl-community Layers

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/layers/README.md

Install the @deck.gl-community/layers module using npm.

```bash
npm install @deck.gl-community/layers
```

--------------------------------

### Install Experimental Deck.gl Module

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/experimental/README.md

Install the experimental deck.gl module using npm.

```bash
npm install @deck.gl-community/experimental
```

--------------------------------

### Install Timeline Layers

Source: https://github.com/visgl/deck.gl-community/blob/master/dev/timeline-layers/README.md

Install the @deck.gl-community/timeline-layers package using npm.

```bash
npm install @deck.gl-community/timeline-layers
```

--------------------------------

### Mount Graph Viewer Example

Source: https://github.com/visgl/deck.gl-community/blob/master/examples/graph-layers/graph-viewer/index.html

Initializes and mounts the Graph Viewer example. Ensure the container element exists and has the correct styling for full viewport coverage.

```javascript
import {mountGraphViewerExample} from "./app.ts";

const container = document.getElementById("app");

if (!(container instanceof HTMLElement)) {
  throw new Error("Unable to find #app container");
}

document.documentElement.style.height = "100%";
document.body.style.margin = "0";
document.body.style.height = "100%";
container.style.width = "100vw";
container.style.height = "100vh";

mountGraphViewerExample(container);
```

--------------------------------

### Install GlobalGridLayer

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/geo-layers/api-reference/global-grid-layer.md

Install the GlobalGridLayer by adding deck.gl to your project dependencies. You can install the entire deck.gl package or specific modules.

```bash
npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers @deck.gl/geo-layers
```

--------------------------------

### Implement Layout Start and Update Logic

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/developer-guide/layouts.md

The start method calculates node positions based on spiral parameters and emits lifecycle events. The update method re-runs start for deterministic layouts.

```javascript
start() {
  if (!this._graph) {
    return;
  }
  this.state = 'start';
  this._onLayoutStart();

  const positions = [];
  let index = 0;
  for (const node of this._graph.getNodes()) {
    const radius = this.props.radiusStep * (index + 1);
    const angle = this.props.angleStep * index++;
    const nextPosition = [Math.cos(angle) * radius, Math.sin(angle) * radius];
    this._nodePositions.set(node.getId(), nextPosition);
    positions.push(nextPosition);
  }

  this._bounds = this._calculateBounds(positions);
  this.state = 'done';
  this._onLayoutChange();
  this._onLayoutDone();
}

update() {
  // For this deterministic layout, recomputing is identical to start().
  this.start();
}

stop() {
  this.state = 'done';
}
```

--------------------------------

### Example CropConfig

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/three/api-reference/tree-layer.md

An example of how to configure crops for an orange orchard.

```tsx
import type {CropConfig} from '@deck.gl-community/three';

// Orange orchard
const citrusCrop: CropConfig = {
  color: [255, 140, 0, 255],
  count: 30,
  droppedCount: 10,
  radius: 0.12
};
```

--------------------------------

### Install Dependencies

Source: https://github.com/visgl/deck.gl-community/blob/master/dev/arrow-layers/linestring/README.md

Install project dependencies using npm or yarn.

```bash
npm install
# or
yarn
```

--------------------------------

### Instantiate DeviceTabsWidget

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/widgets/api-reference/device-tabs-widget.md

Example of how to create and configure a new instance of DeviceTabsWidget.

```typescript
import {DeviceManager, DeviceTabsWidget} from '@deck.gl-community/widgets';

const widget = new DeviceTabsWidget({
  id: 'backend-tabs',
  placement: 'top-left',
  devices: ['webgpu', 'webgl2'],
  manager: DeviceManager
});

```

--------------------------------

### Install Basemap Layers

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/basemap-layers/api-reference/basemap-layer.md

Install the @deck.gl-community/basemap-layers package using yarn.

```sh
yarn add @deck.gl-community/basemap-layers
```

--------------------------------

### Instantiate TreeLayer

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/three/api-reference/tree-layer.md

Example of how to instantiate and configure a TreeLayer with sample data and accessors.

```tsx
import {TreeLayer} from '@deck.gl-community/three';

new TreeLayer({
  id: 'trees',
  data: myForestData,
  getPosition: d => d.coordinates,
  getTreeType: d => d.species,
  getHeight: d => d.heightMetres,
  getSeason: () => 'autumn',
  sizeScale: 1,
  pickable: true
});
```

--------------------------------

### Install Basemap Layers

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/basemap-layers/developer-guide/get-started.md

Install the necessary packages for using BasemapLayer in your project.

```sh
yarn add @deck.gl/core @deck.gl-community/basemap-layers
```

--------------------------------

### Development and Production Commands

Source: https://github.com/visgl/deck.gl-community/blob/master/dev/arrow-layers/linestring/README.md

Commands for starting the development server with hot reloading or building the production bundle.

```bash
npm start
# or
yarn start
```

```bash
npm run build
# or
yarn build
```

--------------------------------

### Install Deck.gl and Map Dependencies

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/editable-layers/developer-guide/get-started.md

Install deck.gl and necessary map provider packages. These are required for rendering and interacting with map data.

```bash
npm install deck.gl @deck.gl/react @deck.gl/core @deck.gl/layers maplibre-gl react-map-gl
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/developer-guide/get-started.md

Command to install all project dependencies using Yarn.

```bash
yarn install

```

--------------------------------

### Install Yarn Package Manager

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/developer-guide/get-started.md

Commands to install Yarn using Homebrew.

```bash
brew update
brew install yarn

```

--------------------------------

### EdgeLayer Usage Example

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/api-reference/layers/edge-layer.md

Demonstrates how to instantiate and configure an EdgeLayer with data, layout information, and a stylesheet.

```APIDOC
## EdgeLayer

### Description

Renders graph connections using reusable edge sublayers. It buckets edges by layout type and instantiates the matching renderer ('line', 'path', or 'spline-curve'). Applications can use it directly to visualize graphs without adopting the full GraphLayer orchestration.

### Constructor

```javascript
new EdgeLayer(props)
```

### Properties

`EdgeLayer` inherits all standard [Deck.gl layer props](https://deck.gl/docs/api-reference/core/layer) in addition to the edge-specific options below.

#### `data` (array, optional)

Edges to render. Each object is forwarded to `getLayoutInfo` so the layer can derive its geometry. Defaults to an empty array.

#### `getLayoutInfo` (function, optional)

Accessor invoked with each datum. It must return an object containing:

- `type` – One of `'line'`, `'path'`, or `'spline-curve'`. Unknown types are ignored.
- `sourcePosition` – `[x, y]` (or `[x, y, z]`) coordinate for the start of the segment.
- `targetPosition` – `[x, y]` (or `[x, y, z]`) coordinate for the end of the segment.
- `controlPoints` – Array of intermediate points. Straight-line edges can return an empty array.

When omitted the layer renders nothing until you provide a function. `GraphLayer` installs a helper that snaps edges to the visible node geometry.

#### `stylesheet` ([`GraphStylesheetEngine`](../internal/graph-stylesheet-engine.md), required)

Runtime stylesheet that maps graph styling declarations to Deck.gl accessors. Instantiate it with a [`GraphLayerEdgeStyle`](../styling/graph-stylesheet.md#edge-styles) or reuse the instance that `GraphLayer` supplies to its internal edge layers.

#### `positionUpdateTrigger` (any, optional)

Value forwarded to the underlying sublayers so Deck.gl knows when edge positions change. Supply layout timestamps or state hashes to force re-evaluation when geometry updates.

#### `pickable` (boolean, optional)

Enables Deck.gl picking for the rendered edges. Defaults to `true` so hover and click interactions work out of the box.

#### `visible` (boolean, optional)

Standard Deck.gl visibility flag. `GraphLayer` forwards the value from each edge style in the graph stylesheet.

### Example

```javascript
import {EdgeLayer, GraphStylesheetEngine} from '@deck.gl-community/graph-layers';

const edgeStylesheet = new GraphStylesheetEngine({
  type: 'edge',
  stroke: '#1E40AF',
  strokeWidth: {default: 1.5, hover: 3}
});

const layer = new EdgeLayer({
  id: 'edges',
  data: graphEngine.getEdges(),
  getLayoutInfo: (edge) => ({
    type: edge.layout?.type ?? 'line',
    sourcePosition: edge.layout?.sourcePosition,
    targetPosition: edge.layout?.targetPosition,
    controlPoints: edge.layout?.controlPoints ?? []
  }),
  stylesheet: edgeStylesheet,
  pickable: true
});
```
```

--------------------------------

### CurvedEdgeLayer Usage Example

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/api-reference/layers/curved-edge-layer.md

Demonstrates how to instantiate and configure the CurvedEdgeLayer with essential accessors like getLayoutInfo, getColor, and getWidth.

```javascript
import {CurvedEdgeLayer} from '@deck.gl-community/graph-layers';

const layer = new CurvedEdgeLayer({
  id: 'edges-spline',
  data: edges,
  getLayoutInfo: (edge) => edge.layout,
  getColor: (edge) => edge.color,
  getWidth: (edge) => edge.width,
  positionUpdateTrigger: layoutVersion
});
```

--------------------------------

### FlowPathLayer Usage Example

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/api-reference/layers/flow-path-layer.md

Demonstrates how to instantiate and configure a FlowPathLayer with custom data and accessors for flow animation.

```javascript
import {FlowPathLayer} from '@deck.gl-community/graph-layers';

const layer = new FlowPathLayer({
  id: 'flow-paths',
  data: edges,
  getSourcePosition: (edge) => edge.source,
  getTargetPosition: (edge) => edge.target,
  getColor: (edge) => edge.color,
  getWidth: (edge) => edge.width,
  getSpeed: (edge) => edge.speed,
  getTailLength: (edge) => edge.tailLength
});
```

--------------------------------

### CurvedEdgeLayer Usage

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/api-reference/layers/curved-edge-layer.md

Example of how to instantiate and configure the CurvedEdgeLayer with essential properties.

```APIDOC
## CurvedEdgeLayer

### Description

Renders Catmull–Rom spline curves between nodes. It relies on the reusable `SplineLayer` to generate interpolated points.

### Usage

```js
import {CurvedEdgeLayer} from '@deck.gl-community/graph-layers';

const layer = new CurvedEdgeLayer({
  id: 'edges-spline',
  data: edges,
  getLayoutInfo: (edge) => edge.layout,
  getColor: (edge) => edge.color,
  getWidth: (edge) => edge.width,
  positionUpdateTrigger: layoutVersion
});
```

### Properties

All [Deck.gl layer props](https://deck.gl/docs/api-reference/core/layer) apply. Notable additions include:

#### `getLayoutInfo` (function, required)

Accessor returning edge geometry and an array of control points that define the curve. The returned object should have the shape `{sourcePosition, targetPosition, controlPoints}`.

#### `positionUpdateTrigger` / `colorUpdateTrigger` / `widthUpdateTrigger` (any, optional)

Triggers forwarded to the sublayers so Deck.gl recomputes positions, colors, and widths when layout state changes.

#### `getColor` / `getWidth` (functions or constants, optional)

Styling accessors forwarded to `SplineLayer`. These usually come from a [`GraphStylesheetEngine`](../internal/graph-stylesheet-engine.md).
```

--------------------------------

### Define and Install Keyboard Shortcuts

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/panels/developer-guide/using-managers.md

Define keyboard shortcuts once using `KeyboardShortcut[]`, install them via `KeyboardShortcutsManagerDocument`, and pass the same array to `KeyboardShortcutsPanel` for UI display. Ensure `shortcutManager.stop()` is called when shortcuts are removed.

```typescript
import {
  KeyboardShortcutsManagerDocument,
  KeyboardShortcutsPanel,
  type KeyboardShortcut
} from '@deck.gl-community/panels';

const keyboardShortcuts: KeyboardShortcut[] = [
  {
    key: '/',
    commandKey: true,
    name: 'Show help',
    description: 'Open help.',
    preventDefault: true,
    onKeyPress: () => setHelpOpen(true)
  }
];

const shortcutManager = new KeyboardShortcutsManagerDocument(keyboardShortcuts);
shortcutManager.start();

const helpPanel = new KeyboardShortcutsPanel({keyboardShortcuts});

// Call shortcutManager.stop() when the app removes these shortcuts.

```

--------------------------------

### Initialize TraceStoreLayer

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/trace-layers/api-reference/layers/trace-store-layer.md

Example of initializing the TraceStoreLayer within a DeckGL component, providing trace sources and settings.

```tsx
<DeckGL
  views={views}
  layers={[
    new TraceStoreLayer({
      id: 'trace-store',
      traceSources: [{traceChunkStore, traceWindow, loadChunk, materializeTraceGraphData}],
      settings
    })
  ]}
/>;
```

--------------------------------

### RectangleLayer Usage Example

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/api-reference/layers/rectangle-layer.md

Demonstrates how to instantiate and configure a RectangleLayer with a GraphStylesheetEngine. Ensure RectangleLayer and GraphStylesheetEngine are imported.

```javascript
import {RectangleLayer, GraphStylesheetEngine} from '@deck.gl-community/graph-layers';

const rectangleStyle = new GraphStylesheetEngine({
  type: 'rectangle',
  width: 120,
  height: 48,
  fill: '#EFF6FF',
  stroke: '#3B82F6',
  strokeWidth: 1
});

const layer = new RectangleLayer({
  id: 'nodes-rectangles',
  data: nodes,
  getPosition: (node) => node.position,
  stylesheet: rectangleStyle,
  positionUpdateTrigger: layoutVersion
});
```

--------------------------------

### TimeDeltaLayer

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/infovis-layers/api-reference/time-delta-layer.md

Renders a selected time interval as either full-height guide lines or a compact header label. Trace-style measurement interactions can render the header and viewport guides from the same start and end values.

```APIDOC
## TimeDeltaLayer

### Description

Renders a selected time interval as either full-height guide lines or a compact header label. Trace-style measurement interactions can render the header and viewport guides from the same start and end values.

### Properties

Inherits from all [CompositeLayer](https://deck.gl/docs/api-reference/core/composite-layer) properties.

### `header` (`boolean`, required)

When `true`, render a compact interval label and header guides. When `false`, render full-height start and end guide lines.

### `startTimeMs` / `endTimeMs` (Number, required)

Interval start and end values in milliseconds.

### `y` (Number, optional)

Y coordinate used by the compact header guide. Default: `0`.

### `yMin` / `yMax` (Number, optional)

Vertical extent used by full-height guide lines. Defaults: `-1e6` and `1e6`.

### `fontSize`, `fontFamily`, `fontSettings`, `fontWeight` (optional)

Text props forwarded to the header label `TextLayer`.

### `color` (Color, optional)

RGBA color used by guide lines and the header label. Default: `[0, 0, 0, 255]`.
```

--------------------------------

### Start Local Documentation Server

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/AGENTS.md

Run this command to preview documentation changes locally with live reload. Ensure you are in the root directory of the repository.

```bash
yarn --cwd website start
```

--------------------------------

### Build Documentation Site

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/AGENTS.md

Execute this command to build the documentation site and identify potential issues like broken links or missing front matter before publishing.

```bash
yarn --cwd website build
```

--------------------------------

### Example Thumbnail Overrides

Source: https://github.com/visgl/deck.gl-community/blob/master/website/src/examples/index.mdx

Defines custom thumbnail paths for specific deck.gl examples, allowing for personalized image selection for each example item.

```javascript
import {ExamplesIndex} from '../components';

export const thumbnailOverrides = {
  'layers/path-outline-and-markers': '/images/examples/layers/path-outline-and-markers.svg',
  'layers/skybox-map-view': '/images/layers.png',
  'layers/skybox-globe': '/images/layers.png',
  'layers/skybox-first-person': '/images/layers.png',
  'layers/basemap-layer-map-view': '/images/maps.jpg',
  'infovis-layers/layer-primitives': '/images/layers.png',
  'geo-layers/shared-tile-2d-layer': '/images/layers.png',
  'timeline-layers/horizon-graph-layer': '/images/examples/infovis-layers/horizon-graph-layer.jpg',
  'timeline-layers/multi-horizon-graph-layer': '/images/examples/infovis-layers/horizon-graph-layer.jpg',
  'trace-layers/tracevis': '/images/layers.png',
  'trace-layers/trace-graph-layer': '/images/layers.png',
  'editable-layers/getting-started': '/images/examples/editable-layers/editor.jpg',
  'editable-layers/editor-react': '/images/examples/editable-layers/editor.jpg',
  'editable-layers/3d-tiles': '/images/maps.jpg',
  'editable-layers/sf': '/images/examples/editable-layers/advanced.jpg',
  'editable-layers/no-map': '/images/examples/editable-layers/editor.jpg',
  'editable-layers/editable-h3-cluster-layer': '/images/examples/editable-layers/advanced.jpg',
  'widgets/html-overlays': '/images/layers.png',
  'widgets/overlays': '/images/layers.png',
  'widgets/pan-and-zoom-controls': '/images/layers.png',
  'widgets/widget-panels': '/images/layers.png',
  'leaflet/scripting': '/images/examples/leaflet/scripting.png'
};
```

--------------------------------

### Bootstrap and Test deck.gl-community

Source: https://github.com/visgl/deck.gl-community/blob/master/CONTRIBUTING.md

Clone the master branch and install dependencies, then run tests to ensure the development environment is set up correctly.

```bash
git checkout master
yarn bootstrap
yarn test
```

--------------------------------

### Project Commands

Source: https://github.com/visgl/deck.gl-community/blob/master/dev/arrow-layers/multipolygon/README.md

Run development or production builds for the application.

```bash
npm start
# or
yarn

npm run build
# or
yarn build
```

--------------------------------

### Development Commands

Source: https://github.com/visgl/deck.gl-community/blob/master/dev/arrow-layers/polygon/README.md

Run the development server for hot reloading or build the production bundle.

```bash
npm start
```

```bash
npm run build
```

--------------------------------

### Install @deck.gl-community/bing-maps

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/bing-maps/developer-guide/get-started.md

Install the necessary packages for using deck.gl with Bing Maps.

```bash
npm install deck.gl @deck.gl-community/bing-maps
```

--------------------------------

### Customize Guides Sub Layer

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/editable-layers/api-reference/layers/editable-geojson-layer.md

Override the rendering of guides in the guides sub-layer by providing custom accessor functions for properties like fill color, differentiating between tentative features and edit handles.

```javascript
new EditableGeoJsonLayer({
  // ...
  _subLayerProps: {
    guides: {
      getFillColor: (guide) => {
        if (guide.properties.guideType === 'tentative') {
          return TENTATIVE_FILL_COLOR;
        }
        return EDIT_HANDLE_FILL_COLOR;
      },
    },
  },
});
```

--------------------------------

### PathMarkerLayer Usage Example

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/layers/api-reference/path-marker-layer.md

Demonstrates how to instantiate and configure a PathMarkerLayer with custom data and accessors for path, color, direction, and marker placement.

```typescript
import {PathMarkerLayer} from '@deck.gl-community/layers';

const layer = new PathMarkerLayer({
  id: 'transit-routes',
  data: routes,
  widthUnits: 'pixels',
  widthScale: 10,
  getPath: (d) => d.path,
  getColor: (d) => d.color,
  getDirection: () => ({forward: true, backward: false}),
  getMarkerColor: (d) => d.markerColor,
  getMarkerPercentages: (object, {lineLength}) =>
    lineLength > 800 ? [0.2, 0.5, 0.8] : [0.5]
});
```

--------------------------------

### Basic DeviceManager Usage Example

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/widgets/api-reference/device-manager.md

Initializes the DeviceManager, sets the device type to WebGPU, reparents the canvas, and retrieves the current device state.

```typescript
import {DeviceManager} from '@deck.gl-community/widgets';

const canvasHost = document.getElementById('canvas-host') as HTMLElement;

await DeviceManager.initialize();
await DeviceManager.setDeviceType('webgpu');
DeviceManager.reparentCanvas(canvasHost);

const {device} = DeviceManager.getState();
```

--------------------------------

### Install Leaflet Integration Package

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/leaflet/developer-guide/get-started.md

Install the necessary packages for deck.gl Leaflet integration using npm.

```bash
npm install deck.gl @deck.gl-community/leaflet leaflet
```

--------------------------------

### Download and Prepare Data

Source: https://github.com/visgl/deck.gl-community/blob/master/dev/arrow-layers/multipolygon/README.md

Download the Admin 0 - Countries dataset and prepare it using a Python script. Ensure you have Poetry installed for dependency management.

```bash
wget https://naciscdn.org/naturalearth/10m/cultural/ne_10m_admin_0_countries.zip
poetry install
poetry run python generate_data.py
```

--------------------------------

### Install Editable Layers Package

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/editable-layers/developer-guide/get-started.md

Install the editable-layers package using npm. This is the first step to using the library.

```bash
npm install @deck.gl-community/editable-layers
```

--------------------------------

### Install Infovis Layers

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/infovis-layers/README.md

Install the infovis-layers module using npm. This command adds the necessary package to your project dependencies.

```bash
npm install @deck.gl-community/infovis-layers
```

--------------------------------

### Initialize TileSourceLayer with WMS Source (JavaScript)

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/geo-layers/api-reference/tile-source-layer.md

Demonstrates how to initialize the TileSourceLayer using a WMS source in JavaScript. Requires importing `Deck`, `TileSourceLayer`, and `WMSSource`.

```javascript
import {Deck} from '@deck.gl/core';
import {TileSourceLayer} from '@deck.gl/geo-layers';
import {WMSSource} from '@loaders.gl/wms';

const wmsSource = new WMSSource({
  data: 'https://ows.terrestris.de/osm/service',
  serviceType: 'wms',
  layers: ['OSM-WMS']
});

new Deck({
  layers: [
    new TileSourceLayer({source: wmsSource})
  ],
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 9
  },
  controller: true,
});
```

--------------------------------

### Install @deck.gl-community/geo-layers

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/geo-layers/README.md

Install the geospatial layers module using npm. This command adds the package to your project's dependencies.

```bash
npm install @deck.gl-community/geo-layers
```

--------------------------------

### Initialize Deck.gl Widgets for Panels

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/panels/developer-guide/using-with-deck-gl.md

Demonstrates how to create and configure `PanelWidget` and `SidebarPanelWidget` instances using components from `@deck.gl-community/panels`. These widgets are then passed to a deck.gl `Deck` instance.

```typescript
import {BoxPanelContainer, ColumnPanel, MarkdownPanel} from '@deck.gl-community/panels';
import {PanelWidget, SidebarPanelWidget} from '@deck.gl-community/widgets';

const sharedPanel = new ColumnPanel({
  id: 'summary',
  title: 'Summary',
  panels: [
    new MarkdownPanel({
      id: 'intro',
      title: 'Overview',
      markdown: 'Rendered through a deck.gl panel adapter.'
    })
  ]
});

const boxWidget = new PanelWidget({
  component: new BoxPanelContainer({
    id: 'box',
    title: 'Summary',
    panel: sharedPanel,
    placement: 'top-left'
  })
});

const sidebarWidget = new SidebarPanelWidget({
  id: 'sidebar',
  title: 'Details',
  panel: sharedPanel,
  placement: 'top-right'
});
```

--------------------------------

### GeoJSON FeatureCollection Example

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/editable-layers/developer-guide/data-model.md

The data prop for EditableGeoJsonLayer expects a GeoJSON FeatureCollection. This example shows a FeatureCollection containing a Point and a Polygon.

```typescript
const data = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {type: 'Point', coordinates: [-122.43, 37.77]},
      properties: {name: 'My Point'}
    },
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [[[-122.45, 37.78], [-122.47, 37.76], [-122.43, 37.75], [-122.45, 37.78]]]
      },
      properties: {name: 'My Polygon'}
    }
  ]
};
```

--------------------------------

### Production Build Command

Source: https://github.com/visgl/deck.gl-community/blob/master/examples/bing-maps/get-started/README.md

Create a production-ready bundle of the application. This command optimizes the code and writes the final output to disk for deployment.

```bash
npm run build
```

--------------------------------

### BasemapLayer Globe Example

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/basemap-layers/api-reference/basemap-layer.md

Example of using BasemapLayer to render a globe with a specific style. Requires @deck.gl/core and a style JSON file.

```ts
import {Deck, _GlobeView} from '@deck.gl/core';
import {BasemapLayer} from '@deck.gl-community/basemap-layers';
import styleJson from '../../../../website/static/mapstyle/deck-light.json';

new Deck({
  views: new _GlobeView(),
  controller: true,
  layers: [
    new BasemapLayer({
      id: 'earth',
      mode: 'globe',
      style: styleJson,
      globe: {
        config: {
          atmosphere: false,
          basemap: true,
          labels: false
        }
      }
    })
  ]
});
```

--------------------------------

### OmniBoxWidget Usage Example

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/widgets/api-reference/omni-box-widget.md

Demonstrates how to instantiate and configure the OmniBoxWidget with various props for placeholder text, query behavior, option fetching, and event handling.

```APIDOC
## OmniBoxWidget

### Description
Instantiates the OmniBoxWidget with custom configurations for search functionality.

### Props
- `placeholder` (string): Text to display when the input is empty.
- `defaultOpen` (boolean): Whether the widget should be open by default.
- `closeOnSelect` (boolean): Whether to close the widget after an option is selected.
- `rememberQueries` (boolean): Whether to remember recent queries.
- `queryHistoryStorageKey` (string): The localStorage key to use for storing query history.
- `minQueryLength` (number): The minimum number of characters required to trigger a search.
- `getOptions` (OmniBoxOptionProvider): A function that provides options based on the query string. Can be sync or async.
- `renderResultsSummary` (function): A function to render a summary of the search results.
- `onSelectOption` (function): Callback function executed when an option is selected.
- `onNavigateOption` (function): Callback function executed when navigating through options.

### Usage Example
```ts
const widget = new OmniBoxWidget({
  placeholder: 'Search items…',
  defaultOpen: true,
  closeOnSelect: false,
  rememberQueries: true,
  queryHistoryStorageKey: 'example-search-history',
  minQueryLength: 1,
  getOptions: (query) => searchItems(query),
  renderResultsSummary: ({options}) => `${options.length} matches`,
  onSelectOption: (option) => selectItem((option.data as any).id),
  onNavigateOption: (option) => previewItem((option.data as any).id)
});
```
```

--------------------------------

### Install Deck.gl Community Three.js Layer

Source: https://github.com/visgl/deck.gl-community/blob/master/modules/three/README.md

Install the TreeLayer package using npm or yarn. Three.js is a peer dependency and will be automatically handled.

```bash
npm install @deck.gl-community/three
# or
yarn add @deck.gl-community/three
```

--------------------------------

### Initialize GraphLayer with Data and Stylesheet

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/api-reference/layers/graph-layer.md

Demonstrates how to initialize the GraphLayer with data, a graph loader, a layout engine, and a stylesheet. This setup is useful for applications that need to visualize graph structures with custom node and edge styling, including interactive features like dragging.

```javascript
import {GraphLayer, JSONLoader, D3ForceLayout} from '@deck.gl-community/graph-layers';

const layer = new GraphLayer({
  id: 'graph',
  data: graphJson,
  graphLoader: JSONLoader,
  layout: new D3ForceLayout(),
  stylesheet: {
    nodes: [
      {type: 'circle', radius: {attribute: 'degree', fallback: 6}},
      {type: 'label', text: '@id', color: '#172B4D', offset: [0, 16]}
    ],
    edges: {
      stroke: {attribute: 'isCritical', fallback: false, scale: value => (value ? '#F97316' : '#CBD5F5')},
      strokeWidth: {default: 1, hover: 3},
      decorators: [{type: 'arrow', size: 8}]
    }
  },
  enableDragging: true
});
```

--------------------------------

### Embedded CodeSandbox for World Heritage Example

Source: https://github.com/visgl/deck.gl-community/blob/master/examples/editable-layers/world-heritage.md

This snippet represents the embedded CodeSandbox link for the World Heritage example. It allows users to interact with the visualization directly.

```markdown
[codesandbox](embedded-codesandbox://world-heritage)
```

--------------------------------

### Instantiate StraightLineEdgeLayer

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/api-reference/layers/straight-line-edge-layer.md

Example of how to instantiate and configure the StraightLineEdgeLayer. Requires data, a getLayoutInfo accessor, and optionally color and width accessors.

```javascript
import {StraightLineEdgeLayer} from '@deck.gl-community/graph-layers';

const layer = new StraightLineEdgeLayer({
  id: 'edges-straight',
  data: edges,
  getLayoutInfo: (edge) => edge.layout,
  getColor: (edge) => edge.color,
  getWidth: (edge) => edge.width,
  positionUpdateTrigger: layoutVersion
});
```

--------------------------------

### Deck.gl Examples Index Component

Source: https://github.com/visgl/deck.gl-community/blob/master/website/src/examples/index.mdx

Renders an index of deck.gl examples, dynamically fetching thumbnails using a provided getter function that checks overrides and default paths.

```jsx
<ExamplesIndex
  getThumbnail={item =>
    thumbnailOverrides[item.docId || item.label.toLowerCase()] ??
    `/images/examples/${item.docId || item.label.toLowerCase()}.jpg`
  }
/>
```

--------------------------------

### Initialize EdgeLayer with Stylesheet

Source: https://github.com/visgl/deck.gl-community/blob/master/docs/modules/graph-layers/api-reference/layers/edge-layer.md

Demonstrates how to instantiate an EdgeLayer with a GraphStylesheetEngine for defining edge appearance and a getLayoutInfo accessor for geometry.

```javascript
import {EdgeLayer, GraphStylesheetEngine} from '@deck.gl-community/graph-layers';

const edgeStylesheet = new GraphStylesheetEngine({
  type: 'edge',
  stroke: '#1E40AF',
  strokeWidth: {default: 1.5, hover: 3}
});

const layer = new EdgeLayer({
  id: 'edges',
  data: graphEngine.getEdges(),
  getLayoutInfo: (edge) => ({
    type: edge.layout?.type ?? 'line',
    sourcePosition: edge.layout?.sourcePosition,
    targetPosition: edge.layout?.targetPosition,
    controlPoints: edge.layout?.controlPoints ?? []
  }),
  stylesheet: edgeStylesheet,
  pickable: true
});
```