🇦🇷 argentina-map-react

🌐 Read this in English.

Mapa interactivo de Argentina como componentes modulares de React / TypeScript. Cada provincia es su propio componente, que se puede estilar, clickear, hacer hover o animar de forma independiente — SVG puro, sin librerías de mapas pesadas, sin dependencias en runtime.

🔗 Demo en vivo: https://cultura-interactiva.github.io/Argentina-Map-React/

Instalación

npm install argentina-map-react
# peer deps: react >= 16.8, react-dom >= 16.8

Uso

Mapa completo

import { MapaArgentina } from "argentina-map-react";

<MapaArgentina style={{ color: "#2563eb" }} onClick={() => console.log("click")} />

MapaArgentina acepta todas las props estándar de un <svg>. Las provincias se rellenan con currentColor, así que color (o style={{ color }}) tiñe todo el mapa.

Provincias individuales

import { BuenosAires, Córdoba, Mendoza } from "argentina-map-react";

<svg viewBox="0 0 1000 1000">
  <BuenosAires fill="#3b82f6" onClick={() => alert("Buenos Aires!")} />
  <Córdoba fill="#10b981" />
  <Mendoza fill="#f59e0b" stroke="#1e40af" strokeWidth={2} />
</svg>

Cada provincia es un <path> con forwardRef y acepta todas las props de <path> (fill, stroke, className, onClick, onMouseEnter, …).

Choropleth

import * as AR from "argentina-map-react";

const { MapaArgentina, ProvinceBase, ...provinces } = AR;
const data: Record<string, string> = { BuenosAires: "#1e40af", Córdoba: "#3b82f6" };

<svg viewBox="0 0 1000 1000">
  {Object.entries(provinces).map(([name, Province]) => (
    <Province key={name} fill={data[name] ?? "#e2e8f0"} stroke="#fff" />
  ))}
</svg>

Mirá examples/ para demos ejecutables (básico / choropleth / interactivo / con estilos): cd examples && npm install && npm run dev.

Departamentos y partidos (imports por subpath)

Los límites de segundo nivel (528 departamentos / partidos / comunas) se publican bajo un subpath por provincia, así solo descargás el que usás:

// 135 partidos de Buenos Aires + un wrapper <MapaBuenosAires> ya encuadrado
import { MapaBuenosAires, LaPlata, Avellaneda } from "argentina-map-react/departamentos/buenos-aires";

<MapaBuenosAires style={{ color: "#2563eb" }} />;   // zoom a la provincia

Cada departamento se identifica por su código INDEC (id) y acepta las mismas props de <path> que una provincia. Los subpaths siguen el slug de la provincia: argentina-map-react/departamentos/{buenos-aires,cordoba,santa-fe,…}.

Importá solo lo que necesitás. El paquete es side-effect free, así que un bundler moderno tree-shakea el resto — importar un solo partido pesa ~0.8 KB, no toda la provincia:

// tu bundle queda solo con Florencio Varela (~0.8 KB), no los otros 134
import { FlorencioVarela } from "argentina-map-react/departamentos/buenos-aires";

Nota: Mapa<Provincia> referencia todos los departamentos de la provincia, así que importalo solo cuando quieras el set completo; para un subconjunto, componé los pocos componentes que necesités dentro de tu propio <svg>.

Cargá los departamentos de una provincia de forma lazy para que queden fuera del bundle principal:

const PBA = React.lazy(() =>
  import("argentina-map-react/departamentos/buenos-aires").then((m) => ({
    default: m.MapaBuenosAires,
  })),
);

Qué incluye

• 24 jurisdicciones (23 provincias + CABA) — BuenosAires, CiudadDeBuenosAires, Córdoba, EntreRíos, Neuquén, RíoNegro, SantiagoDelEstero, Tucumán, …
• 528 departamentos / partidos / comunas bajo departamentos/<slug-provincia> (ej. Buenos Aires → 135 partidos, CABA → 15 comunas).
• ProvinceBase (el wrapper <path> compartido) y el type ProvinceProps.

Cada nivel se proyecta con la misma proyección d3-geo, así que los departamentos alinean pixel a pixel con las provincias y el mapa nacional.

Desarrollo

Un solo toolchain — todo corre en Node, sin Python.

npm install
npm run data:fetch  # (opcional) re-descarga + simplifica data del IGN en data/source/
npm run generate    # regenera src/ desde data/source (scripts/generate.ts)
npm test            # vitest
npm run build       # bundlea ESM + CJS + types en dist/

Pipeline:

• data/source/provincias.topojson — límites oficiales del IGN, simplificados con mapshaper y recortados a la Argentina continental (committeado, chico).
• scripts/generate.ts lee el TopoJSON, proyecta cada jurisdicción con una única proyección d3-geo compartida (para que provincias y mapa completo alineen), y emite src/provincias/*.tsx, src/ProvinceBase.tsx, src/MapaArgentina.tsx y src/provincias/index.ts.
• scripts/fetch-data.mjs (npm run data:fetch) refresca la fuente simplificada desde el WFS del IGN; las descargas crudas se cachean en .cache/ (gitignored).
• tsup bundlea src/index.ts en el dist/ publicado.

El CI regenera los componentes y falla si src/ se desvía de data/source, así que el código generado siempre coincide con la data de límites.

Atribución

Los límites provienen del Instituto Geográfico Nacional (IGN) de la Argentina (Capas SIG), simplificados y proyectados a SVG. Los códigos y nombres INDEC siguen la nomenclatura oficial de Georef. Ver NOTICE.

Licencia

MIT © Pablo Alaniz / Cultura Interactiva