Skip to main content

Regional maps

RegionComunasMap and RegionProvinciasMap share loading, scale, interaction, tooltip, selection, and styling behavior.

<RegionComunasMap region="05" data={comunaValues} />
<RegionProvinciasMap region="05" data={provinciaValues} />

Optional typed data keys​

The components accept Record<string, number> to support dynamic and custom topologies. When using the bundled maps, you can opt into exact key checking for any of the 16 regions:

import type { ComunaData, ProvinciaData } from "react-chile-map";

const comunaValues = {
  "13101": 50,
  "13113": 82,
} satisfies ComunaData<"13">;

const provinciaValues = {
  "131": 100,
  "132": 78,
} satisfies ProvinciaData<"13">;

Use ComunaCode<R> or ProvinciaCode<R> when you need the code union without a data record.

Semantic callbacks​

Comuna callbacks include their parent provincia:

<RegionComunasMap
  region="13"
  onClick={(comuna) => {
    console.log(comuna.region);
    console.log(comuna.province, comuna.provinceName);
  }}
/>

Provincia callbacks expose the parent region:

<RegionProvinciasMap region="13" onClick={(provincia) => console.log(provincia.region)} />

Topology override​

Pass topology to bypass the lazy loader for SSR, tests, preloading, or custom cartography:

import comunas13 from "react-chile-map/data/comunas-13.json";

<RegionComunasMap region="13" topology={comunas13} data={data} />;

Successful built-in loads are cached. When region changes during a request, stale success and failure results are ignored.