@datosgeo-atdt/geo-ui 1.11.13 → 1.12.1

package/README.md

@@ -2,6 +2,19 @@
 
 Librería de componentes reutilizables en React para aplicaciones geoespaciales. Incluye visualización de mapas con PMTiles, unión con datos tabulares CSV y estilos temáticos (booleano y Jenks).
 
+## Novedades en v1.12.1
+
+**Colores personalizados para mapas**: Ahora puedes personalizar completamente los colores de tus mapas con las nuevas props `color` y `colorMunicipios`.
+
+- **Modo Boolean**: Define colores para valores verdaderos y falsos
+- **Modo Jenks**:
+  - Genera rampas automáticas entre dos colores
+  - O especifica colores exactos para cada clase
+- **Municipios**: Colores independientes para drill-down municipal
+- **Retrocompatible**: Si no especificas colores, usa los defaults actuales
+
+[Ver ejemplos de colores personalizados](#ejemplo-con-colores-personalizados)
+
 ## Características
 
 - **MapaPMTiles**: Componente para renderizar mapas vectoriales usando MapLibre GL y PMTiles
@@ -174,6 +187,109 @@ cvegeo,nombre,valor
 09010,Álvaro Obregón,175
 ```
 
+### Ejemplo con Colores Personalizados
+
+**Nuevo en v1.12.1**: Ahora puedes personalizar los colores de los mapas usando la prop `color`.
+
+#### Colores para modo Boolean
+
+Especifica dos colores: `[colorFalse, colorTrue]`
+
+```tsx
+// Colores azules en lugar de los defaults
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="boolean"
+  color={['#e3f2fd', '#1976d2']}  // azul claro para 0, azul oscuro para 1
+/>
+
+// Colores rojos
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="boolean"
+  color={['#ffebee', '#c62828']}  // rojo claro para 0, rojo oscuro para 1
+/>
+```
+
+#### Colores para modo Jenks - Rampa automática
+
+Especifica dos colores y se generará una rampa automáticamente:
+
+```tsx
+// Rampa de naranjas
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="jenks"
+  jenksK={5}
+  color={['#fff3e0', '#e65100']}  // naranja claro a naranja oscuro
+/>
+
+// Rampa de verdes
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="jenks"
+  jenksK={7}
+  color={['#e8f5e9', '#1b5e20']}  // verde claro a verde oscuro
+/>
+```
+
+#### Colores para modo Jenks - Colores exactos por clase
+
+Especifica exactamente tantos colores como clases tengas:
+
+```tsx
+// 4 clases = 4 colores exactos
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="jenks"
+  jenksK={4}
+  color={['#fff9c4', '#ffeb3b', '#fbc02d', '#f57f17']}  // amarillos
+/>
+
+// 3 clases = 3 colores exactos
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  mode="jenks"
+  jenksK={3}
+  color={['#bbdefb', '#42a5f5', '#0d47a1']}  // azules
+/>
+```
+
+#### Colores para municipios (drill-down)
+
+Usa `colorMunicipios` para colores diferentes en el nivel municipal:
+
+```tsx
+// Entidades con colores verdes, municipios con colores azules
+<MapaPMTiles
+  csvUrl="https://example.com/datos_entidades.csv"
+  mode="jenks"
+  color={['#e8f5e9', '#2e7d32']}  // verdes para entidades
+
+  fitToIds={["09", "15", "14"]}
+
+  csvUrlMunicipios="https://example.com/datos_municipios.csv"
+  modeMunicipios="jenks"
+  colorMunicipios={['#e3f2fd', '#1565c0']}  // azules para municipios
+/>
+
+// Boolean para entidades, Jenks con colores custom para municipios
+<MapaPMTiles
+  csvUrl="https://example.com/datos_entidades.csv"
+  mode="boolean"
+  color={['#ffccbc', '#d84315']}  // naranjas para boolean
+
+  fitToIds={["09", "15"]}
+
+  csvUrlMunicipios="https://example.com/datos_municipios.csv"
+  modeMunicipios="jenks"
+  jenksK={6}
+  colorMunicipios={['#f3e5f5', '#6a1b9a']}  // púrpuras para jenks
+/>
+```
+
+**Importante**: Si no especificas la prop `color` o `colorMunicipios`, se usan los colores predeterminados (`#f3f3f3` y `#66827f`).
+
 ### Ejemplo con Popup (información al pasar el mouse)
 
 Puedes habilitar un popup que se muestra al pasar el mouse sobre las features:
@@ -1035,6 +1151,7 @@ Puedes sobrescribir los estilos usando la clase `className`:
 | `fitToIds` | `string \| string[]` | `undefined` | ID o array de IDs de features para filtrar y hacer zoom automático (sin animación) |
 | `bboxField` | `string` | `"bbox"` | Campo con bbox precalculado en PMTiles |
 | `jenksK` | `number` | `5` | Número de clases para clasificación Jenks |
+| `color` | `[string, string] \| string[]` | `['#f3f3f3', '#66827f']` | **Nuevo en v1.12.1**: Colores personalizados. Para boolean: `[colorFalse, colorTrue]`. Para jenks: `[colorMin, colorMax]` (rampa) o array exacto de colores por clase |
 | `showMunicipios` | `boolean` | `false` | Activa modo municipal: muestra municipios con datos temáticos y entidad como contorno |
 | `enablePopup` | `boolean` | `false` | Habilita popup con hover para mostrar información |
 | `popupDataLabel` | `string` | `undefined` | Etiqueta para el dato adicional del popup (ej: "Población total") |
@@ -1044,6 +1161,7 @@ Puedes sobrescribir los estilos usando la clase `className`:
 | `joinCsvKeyMunicipios` | `string` | `"cvegeo"` | Campo del CSV municipal para hacer el join (por defecto usa cvegeo de 5 dígitos) |
 | `fieldMunicipios` | `string` | `field` | Campo del CSV municipal con los valores a visualizar (por defecto usa el mismo `field` de entidades) |
 | `modeMunicipios` | `"boolean" \| "jenks"` | `mode` | Modo de estilo para municipios (permite usar diferente clasificación que entidades) |
+| `colorMunicipios` | `[string, string] \| string[]` | `color` | **Nuevo en v1.12.1**: Colores personalizados para municipios. Mismo formato que `color` (por defecto usa los mismos colores que `color`) |
 | `onFeatureClick` | `(featureId: string, properties: any) => void` | `undefined` | Callback que se ejecuta al hacer click en una feature del mapa. Recibe el ID de la feature y sus propiedades. Solo funciona cuando hay 2 o más entidades en `fitToIds` |
 
 ## Modos de Estilo
@@ -1052,9 +1170,20 @@ Puedes sobrescribir los estilos usando la clase `className`:
 
 Pinta las geometrías en dos colores según el valor:
 
+**Colores por defecto:**
 - `value === 1` → **#66827f** (verde azulado)
 - `value === 0 / null / undefined` → **#f3f3f3** (gris claro)
 
+**Colores personalizados** (v1.12.1+):
+```tsx
+<MapaPMTiles
+  mode="boolean"
+  color={['#e3f2fd', '#1976d2']}  // [colorFalse, colorTrue]
+  {...otherProps}
+/>
+```
+
+**Sin colores personalizados:**
 ```tsx
 <MapaPMTiles
   mode="boolean"
@@ -1064,11 +1193,33 @@ Pinta las geometrías en dos colores según el valor:
 
 ### Modo Jenks
 
-Clasifica los valores numéricos usando el algoritmo Jenks Natural Breaks y aplica una rampa de colores:
+Clasifica los valores numéricos usando el algoritmo Jenks Natural Breaks y aplica una rampa de colores.
 
+**Colores por defecto:**
 - De **#f3f3f3** (gris claro) a **#66827f** (verde azulado)
 - Número de clases controlado por `jenksK` (default: 5)
 
+**Colores personalizados - Rampa automática** (v1.12.1+):
+```tsx
+<MapaPMTiles
+  mode="jenks"
+  jenksK={5}
+  color={['#fff3e0', '#e65100']}  // [colorMin, colorMax]
+  {...otherProps}
+/>
+```
+
+**Colores personalizados - Colores exactos** (v1.12.1+):
+```tsx
+<MapaPMTiles
+  mode="jenks"
+  jenksK={4}
+  color={['#fff9c4', '#ffeb3b', '#fbc02d', '#f57f17']}  // 4 colores = 4 clases
+  {...otherProps}
+/>
+```
+
+**Sin colores personalizados:**
 ```tsx
 <MapaPMTiles
   mode="jenks"

package/dist/components/MapaPMTiles.d.ts

@@ -17,6 +17,7 @@ export interface MapaPMTilesProps {
     fitToIds?: string | string[];
     bboxField?: string;
     jenksK?: number;
+    color?: [string, string] | string[];
     showMunicipios?: boolean;
     enablePopup?: boolean;
     popupDataLabel?: string;
@@ -26,6 +27,7 @@ export interface MapaPMTilesProps {
     joinCsvKeyMunicipios?: string;
     fieldMunicipios?: string;
     modeMunicipios?: 'boolean' | 'jenks';
+    colorMunicipios?: [string, string] | string[];
     onFeatureClick?: (featureId: string, properties: any) => void;
 }
 export declare const MapaPMTiles: React.FC<MapaPMTilesProps>;

package/dist/components/MapaPMTiles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapaPMTiles.d.ts","sourceRoot":"","sources":["../../src/components/MapaPMTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAErC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/D;AAmDD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0tBlD,CAAC"}
+{"version":3,"file":"MapaPMTiles.d.ts","sourceRoot":"","sources":["../../src/components/MapaPMTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,EAAE,CAAC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,EAAE,CAAC;IAE9C,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/D;AAuDD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqwBlD,CAAC"}