---
title: "Maps - Overview"
enterprise: true
framework: vue
version: "14.1.0"
---

# Maps - Overview

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

## Geographic Areas

#### World Map with Colour Scale

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

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

## Routes and Connections

#### Lines, Markers, Background

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

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

## Markers and Points of Interest

#### Proportional Sized Markers

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

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

> **Warning**
>
> AG Charts does not provide [maps or topology files](https://www.ag-grid.com/charts/vue/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.