Geo Chart

A geo chart visualizes data on a map using one or more layers. You can compose pushpin layers (point data) and area layers (region data) into a single visualization.

Structure

import "@gooddata/sdk-ui-geo/styles/css/main.css";
import { GeoChart, createAreaLayer, createPushpinLayer } from "@gooddata/sdk-ui-geo";

<GeoChart
    layers={[
        createPushpinLayer({
            latitude: <attribute>,
            longitude: <attribute>,
            size: <measure>,
            color: <measure>,
            segmentBy: <attribute>,
        }),
        createAreaLayer({
            area: <attribute>,
            color: <measure>,
        }),
    ]}
    config={<geo-chart-config>}
    filters={<filters>}
/>

Example

import "@gooddata/sdk-ui-geo/styles/css/main.css";
import { GeoChart, createAreaLayer, createPushpinLayer } from "@gooddata/sdk-ui-geo";
import * as Md from "./md/full";

const layers = [
    createAreaLayer({
        area: Md.Country.Name,
        color: Md.Revenue.Sum,
    }),
    createPushpinLayer({
        latitude: Md.City.Latitude,
        longitude: Md.City.Longitude,
        size: Md.Population.Sum,
        tooltipText: Md.City.Name,
    }),
];

const config = {
    viewport: {
        area: "continent_eu",
    },
    points: {
        groupNearbyPoints: true,
    },
    areas: {
        fillOpacity: 0.5,
    },
    cooperativeGestures: true,
};

<div style={{ height: 600, width: 900 }}>
    <GeoChart layers={layers} config={config} onBoundsChanged={(bounds) => console.log("Bounds:", bounds)} />
</div>;

Properties

Layers

Layers are typically created using createPushpinLayer(layer, id?) and createAreaLayer(layer, id?). Each layer runs its own independent data execution. The optional second argument lets you set a custom layer id. If you do not use the factory helpers, each layer object must include a unique id and a type.

Common layer properties

These properties are shared by both pushpin and area layer definitions:

Pushpin Layer

Created with createPushpinLayer(). Renders point data as markers on the map.

Area Layer

Created with createAreaLayer(). Renders geographic regions as filled polygons (choropleth map).

Layer filter semantics

Layer-specific filters are applied before global component-level filters. When both are provided, the global filters take precedence for filter types with “last wins” merge rules (e.g. date filters for the same dataset).

Geo Config

The config prop accepts an IGeoChartConfig object.

For additional examples of colors, separators, or legend behavior, see Chart Config.

Points Config

Areas Config

Viewport Config

Legend Config

Notes

• Use GeoPushpinChart or GeoAreaChart if you only need a single layer.
• The first layer in the layers array is the primary layer — it drives the legend and drilling behavior.
• Each layer executes independently and can have its own filters, sorting, and color configuration.
• For full API documentation, see the TypeScript definitions.