Skip to content

[React] Replace Geo Map tutorial with IgrGrid in Getting Started documentation #1740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ChronosSF merged 13 commits into from
Nov 27, 2025
Merged

[React] Replace Geo Map tutorial with IgrGrid in Getting Started documentation #1740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cc95ea6
Initial plan
Copilot Oct 22, 2025
4445e06
Replace Geo Map tutorial with IgrGrid tutorial in React getting started
Copilot Oct 22, 2025
8e170e7
Add CSS import for IgrGrid in React getting started
Copilot Oct 22, 2025
88b2ddf
Merge remote-tracking branch 'origin/vnext' into copilot/replace-geo-…
ChronosSF Oct 23, 2025
0e7def9
feat(getting-started): reworking getting started page
ChronosSF Oct 28, 2025
1dde00f
Merge branch 'vnext' into copilot/replace-geo-map-tutorial
ChronosSF Oct 28, 2025
2da687e
Merge branch 'vnext' into copilot/replace-geo-map-tutorial
ChronosSF Oct 29, 2025
8d46e85
Merge remote-tracking branch 'origin/vnext' into copilot/replace-geo-…
ChronosSF Oct 31, 2025
659656e
Update doc/en/components/general-getting-started.md
ChronosSF Oct 31, 2025
ff7f4c2
chore(*): applying review comments
ChronosSF Oct 31, 2025
bf63857
Merge branch 'vnext' into copilot/replace-geo-map-tutorial
ChronosSF Nov 3, 2025
cfbbcdf
Merge remote-tracking branch 'origin/vnext' into copilot/replace-geo-…
ChronosSF Nov 27, 2025
ad70de0
Merge branch 'vnext' into copilot/replace-geo-map-tutorial
ChronosSF Nov 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 119 additions & 122 deletions doc/en/components/general-getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,107 +2,145 @@
title: Getting Started | {ProductName} | Infragistics
_description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts.
_keywords: {ProductName}, Infragistics, Getting Started
mentionedTypes: ["XamBulletGraph"]
mentionedTypes: ["XamBulletGraph", "IgrGrid"]
---

<!-- WebComponents -->
# {ProductName} Packages Overview
<!-- React -->

{ProductName} is a complete set of UI widgets, components, UI kits for design tools and supporting services for Web Components. Designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting the browsers web components APIs.
# Getting Started With {ProductName}

<!-- end: WebComponents -->
## Prerequisites

<!-- React -->
## {ProductName} Packages Overview
1. Install NodeJS.
2. Install Visual Studio Code.

{ProductName} is a comprehensive suite of UI components, design toolkits, and supporting services for React. Built to empower developers to create modern, high-performance React applications for desktop browsers, mobile experiences, and progressive web apps (PWAs), {ProductName} leverages the latest React best practices and APIs.
<div>
<div style="display:inline-block;width:45%;text-align:center;">
<img src="../images/general/nodejs.svg" alt="nodejs"
style="display:flex;max-height:100px;margin:auto auto 20px auto;" />
<a target="_blank" href="https://nodejs.org/en/download/" class="no-external-icon"
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">
DOWNLOAD NODE
</a>
</div>
<div style="display:inline-block;width:45%;text-align:center;">
<img src="../images/general/vs-code.svg" alt="vs-code"
style="display:flex;max-height:100px;margin:auto auto 20px auto;" />
<a target="_blank" href="https://code.visualstudio.com/download" class="no-external-icon"
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">
DOWNLOAD VS CODE
</a>
</div>
</div>

<!-- end: React -->
## Using Ignite UI CLI

<!-- WebComponents, React -->
To create an application from scratch and configure it to use Ignite UI React you can use the Ignite UI CLI. The first step is to install the respective package globally as follows:

## Charts & Graphs
{ProductName} contains a library of [Charts & Graphs](charts/chart-overview.md) that lets you visualize any type of data through its 65+ types of chart series and combinations into stunning and interactive charts and dashboards. Built for speed and beauty, designed to work on every modern browser and with complete touch and interactivity, you can quickly build responsive visuals on any device.
```cmd
npm install -g igniteui-cli
```

## Gauges
{ProductName} provides [Radial Gauge](radial-gauge.md), [Linear Gauge](linear-gauge.md), and [Bullet Graph](bullet-graph.md) components used to illustrate data in an easy and intuitive way. The [Radial Gauge](radial-gauge.md) has a variety of customization options in order to create a predefined shape and scale. The [Linear Gauge](linear-gauge.md) provides a simple view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The [Bullet Graph](bullet-graph.md) component that lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts.
If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application. To start the guide, simply run the `ig` command:

## Maps
{ProductName} [Geographic Maps](geo-map.md) brings the ability to visualize geographic data in your application. It can render data sets consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. It allows you to overlay multiple map layers with geographic data, mark specific geographic locations and display information using custom markers and colors.
```cmd
ig
```

## Grids & Inputs
{ProductName} provides several [Grids](grids/grids-header.md) components that allows you to bind and display data with little configuration in form of [Data Grid](grids/data-grid.md), [List](grids/list.md), [Tree](grids/tree.md), and even [Spreadsheet](spreadsheet-overview.md). It also provides features such as filtering, sorting, grouping, pinning and more.
Then choose `React` as framework, `Ignite UI for React TS` as type, select `Default Top Navigation` project template, add a specific component/view or select `Complete & Run`.
For more information about the Ignite UI CLI, see the [CLI overview](general-cli-overview.md).

## Buttons, Inputs, Layouts & Menus
{ProductName} provides various types of [Buttons](inputs/button.md), [Inputs](inputs/input.md), [Menus](menus/navbar.md), and [Layouts](layouts/tabs.md) that give you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents). These components are based on the [Indigo Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit), are fully supported by [App Builder](https://appbuilder.indigo.design/) and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma.
If you added a Grid component during the prompts, once the application is running you should see something similar to the following:

<!-- end: WebComponents, React -->
<img src="../images/general/ig-cli-grid.png" />

<!-- React -->
Alternatively, you can use popular frameworks such as Next.js, Vite or Expo as recommended by the React team. Following is a step-by-step instructions for creating React applications with Ignite UI React using one of these methods.

## Getting Started With {ProductName}
## Using Vite CLI

## Install IgniteUI CLI
### Creating a New React Project

All popular frameworks for React development provide powerful CLI tools for scaffolding a React application.

1 - Open **VS Code**, select **Terminal** menu and then **New Terminal** option.

To create an application from scratch and configure it to use the Ignite UI React you can use the Ignite UI CLI. The first step is to install the respective package globally as follows:
2 - Type the following command in the terminal window:

```cmd
npm install -g igniteui-cli
npm create vite@latest
```

If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application. To start the guide, simply run the `ig` command:
Then follow the prompts to choose a name for the project, React as a platform to create the project for, whether to use Typescript or not and for various other options Vite provides. Please, refer to this <a href="https://react.dev/learn/creating-a-react-app" target="_blank">topic</a> for more information on the different ways to boilerplate a React application.

### Adding an Ignite UI React Grid Component

##### Package Installation
To add the Ignite UI React [**Grid**](grids/data-grid.md) component to the app you need to install the `igniteui-react-grids` package:

```cmd
ig
npm install igniteui-react-grids --save
```

Then choose React as framework, React TS as type, select **Default Top Navigation** project template, add a specific component/view or select `Complete & Run`.
Additionally, you can read more about the Ignite UI CLI in this [topic](general-cli-overview.md).
#### Importing Component Modules

Alternatively, you can use popular frameworks such as Next.js, Vite or Expo as recommended by the React team. Following is a step-by-step instructions for creating React applications with Ignite UI React using one of these methods.
Then we can import the required modules of the components we want to use. Let's do this for the Grid and Column components that we will also use in the template. We also need to import one of the themes.

## Prerequisites

1. Install NodeJS.
2. Install Visual Studio Code.
```ts
import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
```

<div>
<div style="display:inline-block;width:45%;text-align:center;">
<img src="../images/general/nodejs.svg" alt="nodejs"
style="display:flex;max-height:100px;margin:auto auto 20px auto;" />
<a target="_blank" href="https://nodejs.org/en/download/" class="no-external-icon"
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">
DOWNLOAD NODE
</a>
</div>
<div style="display:inline-block;width:45%;text-align:center;">
<img src="../images/general/vs-code.svg" alt="vs-code"
style="display:flex;max-height:100px;margin:auto auto 20px auto;" />
<a target="_blank" href="https://code.visualstudio.com/download" class="no-external-icon"
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">
DOWNLOAD VS CODE
</a>
</div>
</div>
#### Using Components

We are now ready to use the {ProductName} grid component in our markup! Let's go ahead and define it:

## Creating New React Project
```tsx
// App.txs
function App() {
const data = [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 },
{ name: "Bob", age: 35 }
];

With above prerequisites installed, we can create a new React application.
return (
<div style={{ height: "100%", width: "100%" }}>
<IgrGrid
data={data}
autoGenerate={false}>
<IgrColumn
field="name"
header="Name"
dataType="string">
</IgrColumn>
<IgrColumn
field="age"
header="Age"
dataType="number">
</IgrColumn>
</IgrGrid>
</div>
);
}
```

1 - Open **VS Code**, select **Terminal** menu and then **New Terminal** option.
### Running Application

2 - Type one of these commands in terminal window:
Finally, we can run our new application:

```cmd
npx create-next-app@latest
npm run dev
```

Then follow the prompts to choose a name for the project, whether to use Typescript or not and for various other options React provides. For this example `npx` and `create-next-app` are required. Refer to this <a href="https://react.dev/learn/creating-a-react-app" target="_blank">topic</a> for more information on the different ways to boilerplate a React application.
After executing this command, your project will be built and served locally on your computer. It will automatically open in your default browser and you will be able to use {ProductName} components in your project. The final result should show a data grid with sample data:

<img src="../images/general/ig-vite-grid.png" />

<!-- end: React -->

<!-- WebComponents -->
## Getting Started With {ProductName}
# Getting Started With {ProductName}

This section provides step-by-step instructions for creating Web Components application with Ignite UI for Web Components.

Expand Down Expand Up @@ -346,7 +384,7 @@ npm run build

<!-- Angular, React -->

## Updating Existing App
## Updating Existing Apps

If you want to use {ProductName} in an existing {Platform} CLI project (one that you have from before). We have you covered! All you have to do is execute these commands:

Expand All @@ -373,81 +411,40 @@ yarn add {PackageSpreadsheet} {PackageCore}

This will automatically install packages for {ProductName}, along with all of their dependencies, font imports and styles references to the existing project.

## Importing Component Modules

First we have to import the required modules of the components we want to use. We will go ahead and do this for the [**GeographicMap**](geo-map.md) component.


```razor
builder.Services.AddIgniteUIBlazor(
typeof(IgbGeographicMapModule),
typeof(IgbDataChartInteractivityModule)
);
```

```ts
import { IgrGeographicMapModule, IgrGeographicMap } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
```
<!-- end: Angular, React -->

```ts
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
<!-- WebComponents -->
# {ProductName} Packages Overview

ModuleManager.register(
IgcGeographicMapModule,
IgcDataChartInteractivityModule
);
```
{ProductName} is a complete set of UI widgets, components, UI kits for design tools and supporting services for Web Components. Designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting the browsers web components APIs.

## Using Components
<!-- end: WebComponents -->

We are now ready to use the {ProductName} map component in our markup! Let's go ahead and define it:
<!-- React -->
# {ProductName} Packages Overview

```tsx
// App.txs
function App() {
return (
<div style={{ height: "100%", width: "100%" }}>
<IgrGeographicMap
width="800px"
height="500px"
zoomable="true" />
</div>
);
}
```
{ProductName} is a comprehensive suite of UI components, design toolkits, and supporting services for React. Built to empower developers to create modern, high-performance React applications for desktop browsers, mobile experiences, and progressive web apps (PWAs), {ProductName} leverages the latest React best practices and APIs.

```html
<div style="height: 100%, width: 100%">
<igc-geographic-map
width="800px"
height="500px"
zoomable="true">
</igc-geographic-map>
</div>
```
<!-- end: React -->

## Running Application
<!-- WebComponents, React -->

Finally, we can run our new application by using one of the following commands:
## Charts & Graphs
{ProductName} contains a library of [Charts & Graphs](charts/chart-overview.md) that lets you visualize any type of data through its 65+ types of chart series and combinations into stunning and interactive charts and dashboards. Built for speed and beauty, designed to work on every modern browser and with complete touch and interactivity, you can quickly build responsive visuals on any device.

```cmd
npm run-script start
```
## Gauges
{ProductName} provides [Radial Gauge](radial-gauge.md), [Linear Gauge](linear-gauge.md), and [Bullet Graph](bullet-graph.md) components used to illustrate data in an easy and intuitive way. The [Radial Gauge](radial-gauge.md) has a variety of customization options in order to create a predefined shape and scale. The [Linear Gauge](linear-gauge.md) provides a simple view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The [Bullet Graph](bullet-graph.md) component that lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts.

After executing this command, your project will be built and served locally on your computer. It will automatically open in your default browser and you will be able to use {ProductName} components in your project. The final result should show interactive map of the world:
## Maps
{ProductName} [Geographic Maps](geo-map.md) brings the ability to visualize geographic data in your application. It can render data sets consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. It allows you to overlay multiple map layers with geographic data, mark specific geographic locations and display information using custom markers and colors.

<!-- <img src="../images/general/geo-map.png" alt="geo-map" /> -->
## Grids & Inputs
{ProductName} provides several [Grids](grids/grids-header.md) components that allows you to bind and display data with little configuration in form of [Data Grid](grids/data-grid.md), [List](grids/list.md), [Tree](grids/tree.md), and even [Spreadsheet](spreadsheet-overview.md). It also provides features such as filtering, sorting, grouping, pinning and more.

`sample="/maps/geo-map/display-osm-imagery", height="750", alt="{Platform} Overview Example"`
## Buttons, Inputs, Layouts & Menus
{ProductName} provides various types of [Buttons](inputs/button.md), [Inputs](inputs/input.md), [Menus](menus/navbar.md), and [Layouts](layouts/tabs.md) that give you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents). These components are based on the [Indigo Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit), are fully supported by [App Builder](https://appbuilder.indigo.design/) and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma.

<!-- end: Angular, React -->
<!-- end: WebComponents, React -->

<!-- Blazor -->
## Getting Started With {ProductName}
Expand Down
Binary file added doc/en/images/general/ig-cli-grid.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/en/images/general/ig-vite-grid.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 0 additions & 4 deletions stats/docStats-React.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2240,7 +2240,6 @@
"https://staging.infragistics.com/products/ignite-ui-react/react/components/geo-map-display-heat-imagery"
],
"https://staging.infragistics.com/react-demos/samples/samples/maps/geo-map/display-osm-imagery": [
"https://staging.infragistics.com/products/ignite-ui-react/react/components/general-getting-started",
"https://staging.infragistics.com/products/ignite-ui-react/react/components/geo-map-display-osm-imagery"
],
"https://staging.infragistics.com/react-demos/samples/samples/maps/geo-map/navigation": [
Expand Down Expand Up @@ -2750,9 +2749,6 @@
"https://staging.infragistics.com/products/ignite-ui-react/react/components/excel-library-working-with-sparklines": [
"https://staging.infragistics.com/react-demos/samples/samples/excel/excel-library/working-with-sparklines"
],
"https://staging.infragistics.com/products/ignite-ui-react/react/components/general-getting-started": [
"https://staging.infragistics.com/react-demos/samples/samples/maps/geo-map/display-osm-imagery"
],
"https://staging.infragistics.com/products/ignite-ui-react/react/components/geo-map": [
"https://staging.infragistics.com/react-demos/samples/samples/maps/geo-map/type-scatter-bubble-series"
],
Expand Down