Primeros pasos

Instalación

npm install react-chile-map

React es una dependencia peer. El paquete es compatible con React 17 a 19.

Mapa nacional

La topología nacional es explícita para que la aplicación controle cuándo descargarla:

import { ChileMap } from "react-chile-map";
import regiones from "react-chile-map/data/regiones.json";
import type { Topology } from "topojson-specification";

<ChileMap
  topology={regiones as unknown as Topology}
  data={{ "05": 2_162_052, "13": 8_844_243 }}
  colors={["#dbeafe", "#1e40af"]}
  onClick={(region) => console.log(region.code, region.name)}
/>;

Subdivisiones regionales

import { RegionComunasMap, RegionProvinciasMap } from "react-chile-map";

<RegionComunasMap region="13" data={{ "13101": 100, "13114": 82 }} />;
<RegionProvinciasMap region="13" data={{ "131": 100, "132": 78 }} />;

Los códigos de región son strings con cero inicial desde "01" hasta "16". Las provincias usan tres dígitos y las comunas cinco dígitos CUT.

Compare los componentes en Ejemplos.