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

Map worker, bundlers and CSP

Geo charts render with MapLibre GL JS, which parses map data in a web worker. The @gooddata/sdk-ui-geo package ships that worker and needs no bundler setup:

• When your bundler turns the package’s new URL("...", import.meta.url) reference into an emitted asset (webpack, Vite, Rspack), the chart starts the worker from that same-origin file.
• Otherwise (Angular CLI with either builder, esbuild, Rollup without plugins, Vite library mode), the chart starts the worker from an inline Blob built from the worker code, which it loads on demand together with MapLibre.

If your page sets a Content Security Policy, allow both forms: worker-src 'self' blob:.

If the policy must not allow blob: workers, host node_modules/@gooddata/sdk-ui-geo/worker/maplibre-gl-worker.js from your application and pass its URL to the setWorkerUrl function of maplibre-gl before the first geo chart renders; the SDK keeps a worker URL that is already set. Your application must resolve the same copy of maplibre-gl as the SDK, so declare it as a dependency with the version the SDK pins.

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.