ArcGIS Maps SDK for JavaScript Resources

The Dashboard sample is a reference implementation for building responsive, data-driven analytics dashboards. It demonstrates how to orchestrate several key technologies:

• ArcGIS Maps SDK for JavaScript Web Components: Used within a React application to render maps.
• React: Manages application-level state, theming, and data flow.
• Calcite Design System: Provides UI components such as the Action Bar, Dialog, and theming support (including light and dark modes).
• CSS Grid and Flexbox: Used to create a responsive layout consisting of a header, sidebar, metrics, map, and charts.

Core Functionality Demonstrated:

• Querying a FeatureLayer to compute derived metrics.
• Implementing reactive data filtering that updates metrics and charts.
• Combining maps, metrics, and charts into a cohesive user experience.

The interactive-filter-layout sample demonstrates how to build an interactive, scene-driven layout where UI controls dynamically manage layer visibility and filtering. It uses the ArcGIS Maps SDK for JavaScript and the Calcite Design System within a Vite-based application environment.

Key capabilities demonstrated include:

• Integrating a 3D SceneView with dynamic UI controls.
• Building a sidebar control panel using Calcite components.
• Toggling layer visibility based on checkbox state.
• Applying client-side filtering to layers.

This repository contains proof-of-concept code templates demonstrating how to use the ArcGIS Maps SDK for JavaScript components with various popular frameworks (such as Angular and React) and module bundlers (such as Vite).

Each subdirectory contains a specific resource with its own README providing detailed setup and usage instructions.

The Vite Vue template is built using the following core packages:

• @arcgis/core: The main ArcGIS Maps SDK for JavaScript library.
• @arcgis/map-components: Web components for ArcGIS maps.
• @arcgis/charts-components: Web components for data visualization and charts.
• @esri/calcite-components: Esri's design system components.

The ArcGIS Maps SDK Vite React template is built using the following core packages:

• @arcgis/core: The main ArcGIS Maps SDK for JavaScript library.
• @arcgis/map-components: Web components for ArcGIS maps.
• @arcgis/charts-components: Web components for ArcGIS charts.
• @esri/calcite-components: Esri's design system components.

The Finder sample demonstrates several advanced UI and mapping patterns:

• Data Filtering and Sorting: Users can filter and sort results within the list view.
• Map-List Synchronization: Selecting an item in the results list synchronizes the map interaction.
• Dynamic Map Extent: The map applies a zoom extent based on the currently selected data.
• Flow-based Drill-down: Uses calcite-flow to provide a drill-down detail view.
• Custom Rendering: Uses a unique value renderer based on clusters to style features.
• Calcite UI Integration: Utilizes Calcite's Shell, Shell Panel, and Flow components for the application structure.

Human-in-the-loop (HIL) provides an interrupt in an agentic workflow that prompts the user for additional information or confirmation before the agent proceeds.

Common use cases for HIL include:

• Safeguarding against destructive actions: Prompting a user to confirm parameters before executing a tool (e.g., deleting data or making significant changes).
• Resolving ambiguity: Allowing the LLM to prompt the user for more information in freeform text when user intent is unclear.
• Deterministic decision making: Presenting the user with a menu of specific options to choose from before continuing a workflow.

While this specific template uses LangGraph and LangChainJS directly, the ArcGIS Maps SDK provides dedicated agent utilities designed to simplify the construction of custom agents.

For an implementation that leverages these built-in SDK utilities instead of manual orchestration, refer to the AI Components (beta) custom agent with tools React sample.

Human-in-the-loop (HIL) is a workflow pattern used with the arcgis-assistant component (beta) to provide an interrupt in an agentic workflow. This allows the system to prompt a human user for additional information or confirmation before proceeding with an action.

Common use cases for HIL include:

• Safeguarding against destructive actions: Prompting a user to confirm parameters before an LLM executes a tool (e.g., deleting data or making significant changes).
• Resolving ambiguity: Allowing the LLM to ask the user for more information in freeform text when user intent is unclear.
• Deterministic decision making: Presenting a menu of specific options to the user to guide the workflow before proceeding.

To quickly create a new application using the Webpack template, use the @arcgis/create CLI tool. This will scaffold a project pre-configured to work with the ArcGIS Maps SDK for JavaScript and Webpack.

This template includes the following core packages:

• @arcgis/core: The main ArcGIS Maps SDK for JavaScript modules.
• @arcgis/map-components: Web components for ArcGIS maps.
• @arcgis/charts-components: Web components for ArcGIS charts.
• @esri/calcite-components: Esri's design system components.

npx @arcgis/create -n my-arcgis-app -t webpack

You can scaffold a new project using the ai-components-agent-utils-hil-react (beta) template via the @arcgis/create CLI. This template provides a starting point for building custom agents with a Human-in-the-Loop (HIL) workflow using React and TypeScript.

Run the following command to create your application:

npx @arcgis/create -n my-arcgis-app -t "ai-components-agent-utils-hil-react (beta)"

If you prefer to use JavaScript instead of TypeScript, follow these steps to modify the template:

1. Remove the tsconfig.json file.
2. Update all file extensions from .tsx to .jsx.
3. Remove the vite.env.d.ts file.
4. Remove the typescript dependency from package.json.
5. Remove the @types/node, @types/react, and @types/react-dom dev dependencies from package.json.