Presentando @webrek/mx-geo: mapas de México en React

Cada vez que necesitaba mostrar datos sobre un mapa de México terminaba peleando con archivos GeoJSON enormes, proyecciones raras y, sobre todo, con el eterno problema de empatar mis datos con la geometría. ¿La entidad es "CDMX", "Ciudad de México" o "Distrito Federal"? ¿El municipio se identifica por nombre o por clave? Para resolver esto de una vez publiqué @webrek/mx-geo, un paquete de React que renderiza mapas de México listos para usar.

Qué hace

• Dibuja el mapa de la República por estados o el detalle de un estado por municipios, en SVG limpio y sin dependencias de mapas externas.
• Cada región trae su clave oficial del INEGI (CVE_ENT de dos dígitos para entidades, CVE_MUN de cinco dígitos para municipios), así que puedes cruzar tus datos por clave y olvidarte de normalizar nombres.
• Es un componente controlado: tú pasas un objeto values y una función de color, y el paquete pinta cada región. Ideal para mapas de calor, coropletas electorales o cobertura por zona.

Instalación

npm install @webrek/mx-geo

Uso básico

Un mapa de calor por estado necesita apenas unas líneas. Las claves de values son las CVE_ENT del INEGI:

import { MexicoMap } from "@webrek/mx-geo";

const poblacion = {
  "09": 9_209_944, // Ciudad de México
  "15": 16_992_418, // Estado de México
  "14": 8_348_151, // Jalisco
};

export function MapaPoblacion() {
  return (
    <MexicoMap
      level="estados"
      values={poblacion}
      colorScale={(v) => (v > 10_000_000 ? "#FF6B35" : "#1B2838")}
      onSelect={(clave) => console.log("INEGI:", clave)}
    />
  );
}

Para bajar al detalle de un estado, cambias level y le indicas la entidad:

<MexicoMap level="municipios" estado="14" values={ventasPorMunicipio} />

Por qué así y no otro

En México casi todos los datasets serios —Censo, ENIGH, resultados del INE— vienen indexados por clave del INEGI, no por nombre. @webrek/mx-geo adopta esa clave como identidad primaria, así que conectar una fuente oficial es cuestión de pasar el objeto tal cual, sin tablas de equivalencias ni slugify.

Además la geometría viene ya simplificada y tipada en TypeScript: obtienes autocompletado de props, los values son Record<string, number> y onSelect te regresa la clave exacta. El bundle es ligero porque el SVG se sirve como paths y no cargas un motor de mapas completo cuando solo quieres pintar 32 estados.

Si trabajas con datos mexicanos y estás cansado de normalizar nombres de municipios a mano, dale una probada. Se agradecen issues y PRs en el repositorio.