---
product: "AG Charts"
title: "Maps - Overview"
description: "The Map Series types enable visualising geographic data in different ways."
enterprise: true
framework: react
version: "14.2.0"
related:
    - title: "Geographic Areas"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/map-shapes/"
    - title: "Routes and Connections"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/map-lines/"
    - title: "Markers & Points of Interest"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/map-markers/"
    - title: "Map Topology"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/react/map-topology/"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# Maps - Overview

The Map Series types enable visualising geographic data in different ways.

## Geographic Areas

#### World Map with Colour Scale

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  GradientLegendModule,
  MapShapeBackgroundSeriesModule,
  MapShapeSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { data } from "./data";
import { topology } from "./topology";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  GradientLegendModule,
  MapShapeBackgroundSeriesModule,
  MapShapeSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data,
    topology,
    series: [
      {
        type: "map-shape-background",
      },
      {
        type: "map-shape",
        title: "Access to Clean Fuels",
        idKey: "name",
        colorKey: "value",
        colorName: "% of population",
      },
    ],
    gradientLegend: {
      enabled: true,
      position: "right",
      gradient: {
        preferredLength: 200,
        thickness: 2,
      },
      scale: {
        label: {
          fontSize: 10,
          formatter: (p) => p.value + "%",
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: World Map with Colour Scale](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/maps/examples/world-colour-map/)

See [Geographic Areas Documentation](https://www.ag-grid.com/charts/archive/14.2.0/react/map-shapes/) for more details.

## Routes and Connections

#### Lines, Markers, Background

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  MapLineSeriesModule,
  MapMarkerSeriesModule,
  MapShapeBackgroundSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import { backgroundTopology } from "./backgroundTopology";
import { backgroundTopologyNI } from "./backgroundTopologyNI";
import { routeData } from "./routeData";
import { routeTopology } from "./routeTopology";
import { stationData } from "./stationData";
import { stationTopology } from "./stationTopology";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  MapLineSeriesModule,
  MapMarkerSeriesModule,
  MapShapeBackgroundSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    series: [
      {
        type: "map-shape-background",
        topology: backgroundTopologyNI,
        fill: "#badc58",
        fillOpacity: 0.4,
      },
      {
        type: "map-shape-background",
        topology: backgroundTopology,
        fill: "#badc58",
      },
      {
        type: "map-line",
        topology: routeTopology,
        data: routeData,
        idKey: "name",
        stroke: "#4834d4",
        strokeWidth: 2,
      },
      {
        type: "map-marker",
        topology: stationTopology,
        data: stationData,
        idKey: "name",
        labelKey: "name",
        fill: "#4834d4",
        fillOpacity: 1,
        strokeWidth: 0,
        size: 5,
        label: {
          color: "#535c68",
          fontSize: 8,
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Lines, Markers, Background](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/maps/examples/lines/)

See [Routes and Connections Documentation](https://www.ag-grid.com/charts/archive/14.2.0/react/map-lines/) for more details.

## Markers and Points of Interest

#### Proportional Sized Markers

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  MapMarkerSeriesModule,
  MapShapeBackgroundSeriesModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import {
  africaData,
  asiaData,
  europeData,
  northAmericaData,
  oceaniaData,
  southAmericaData,
} from "./data";
import { topology } from "./topology";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  MapMarkerSeriesModule,
  MapShapeBackgroundSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    padding: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    },
    topology,
    series: [
      {
        type: "map-shape-background",
        topology,
      },
      {
        type: "map-marker",
        topology,
        data: [
          ...europeData,
          ...asiaData,
          ...africaData,
          ...northAmericaData,
          ...southAmericaData,
          ...oceaniaData,
        ],
        title: "Population",
        idKey: "name",
        idName: "Country",
        sizeKey: "pop_est",
        sizeName: "Population Estimate",
        topologyIdKey: "NAME_ENGL",
        size: 5,
        maxSize: 60,
        labelKey: "name",
        showInLegend: false,
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Proportional Sized Markers](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/maps/examples/bubble-map/)

See [Markers and Points of Interest](https://www.ag-grid.com/charts/archive/14.2.0/react/map-markers/) for more details.

## Map Chart Examples

See more Map Chart examples in the [AG Charts Gallery](https://www.ag-grid.com/charts/archive/14.2.0/gallery/#maps).

- [Map Chart With Multiple Shape Series Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/multiple-map-shape-series/)
- [Multiple Map Chart Series Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/multiple-map-series/)
- [Map Chart with Heatmap Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/map-heatmap-series/)
- [Map Chart With Shapes and Lines Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/map-shapes-lines/)
- [Map Chart with Lines and Markers Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/map-lines-markers/)
- [Map Chart Kitchen Sink Example](https://www.ag-grid.com/charts/archive/14.2.0/gallery/map-kitchen-sink/)

> **Warning**
>
> AG Charts does not provide [maps or topology files](https://www.ag-grid.com/charts/archive/14.2.0/react/map-topology/). Users must source and license these at their own risk. Any maps shown in our materials are illustrative only and do not imply endorsement, affiliation or recognition of political boundaries, territorial claims, legal status or sovereignty.