Skip to main content

Getting started

Install​

npm install react-chile-map

React is a peer dependency. The package supports React 17 to 19; use the React version already selected by your application.

Render the national map​

The national topology is explicit so your application controls when it is downloaded:

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

const population = {
  "05": 2_162_052,
  "13": 8_844_243,
};

export function PopulationMap() {
  return (
    <ChileMap
      topology={regiones as unknown as Topology}
      data={population}
      colors={["#dbeafe", "#1e40af"]}
      bins={5}
      onClick={(region) => console.log(region.code, region.name)}
    />
  );
}

Render subdivisions​

Regional components load the matching packaged topology from region:

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

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

Region codes are zero-padded strings from "01" through "16". Provincia codes contain three digits and comuna CUT codes contain five.

Add loading and error states​

<RegionComunasMap
  region="05"
  loadingFallback={<p role="status">Loading map…</p>}
  errorFallback={(error) => <p role="alert">{error.message}</p>}
  onLoadError={(error) => reportError(error)}
/>

Next, compare all components in Examples and learn how to build a matching scale and legend.