@datosgeo-atdt/geo-ui 0.7.0 → 0.9.1

package/README.md

@@ -214,6 +214,120 @@ Puedes habilitar un popup que se muestra al pasar el mouse sobre las features:
 - **Datos adicionales**: Si especificas `popupDataLabel` y `popupDataField`, muestra el valor del CSV
 - Los números se formatean automáticamente con comas (ej: 1,234,567)
 
+### Ejemplo con Interactividad (click para drill-down)
+
+Cuando especificas **2 o más entidades** en `fitToIds`, el mapa se vuelve interactivo automáticamente:
+
+```tsx
+// Vista inicial: 3 entidades con visualización jenks
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  fitToIds={["09", "15", "14"]}
+  mode="jenks"
+/>
+```
+
+**Comportamiento interactivo:**
+1. **Vista inicial**: Muestra las 3 entidades con relleno (jenks/boolean)
+2. **Click en una entidad**:
+   - Hace zoom hacia esa entidad
+   - Cambia automáticamente a vista municipal
+   - Muestra municipios con relleno clasificado
+   - La entidad se muestra solo como contorno
+3. **Volver atrás**:
+   - Presiona `ESC`
+   - O haz doble click en el mapa
+
+**Ejemplo completo con todas las features:**
+```tsx
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  fitToIds={["09", "15", "14"]}
+  mode="jenks"
+  jenksK={5}
+  enablePopup={true}
+  popupDataLabel="Población"
+  popupDataField="poblacion"
+/>
+```
+
+Esto crea una experiencia de exploración completa:
+- Vista general de 3 entidades
+- Click para explorar municipios
+- Popup con información al pasar el mouse
+- Clasificación jenks en ambos niveles
+
+### Ejemplo con CSV dual (entidades y municipios con datos diferentes)
+
+Puedes usar **fuentes de datos separadas** para entidades y municipios. Cuando el usuario hace click en una entidad, los municipios se visualizarán con el CSV municipal:
+
+```tsx
+// Vista inicial: entidades con datos de población total
+// Después del click: municipios con datos de densidad poblacional
+<MapaPMTiles
+  // CSV para entidades (vista inicial)
+  csvUrl="https://example.com/datos_entidades.csv"
+  field="poblacion_total"
+
+  // CSV para municipios (después del click)
+  csvUrlMunicipios="https://example.com/datos_municipios.csv"
+  fieldMunicipios="densidad"
+
+  fitToIds={["09", "15", "14"]}
+  mode="jenks"
+  jenksK={5}
+/>
+```
+
+**Ejemplo con archivo local para municipios:**
+```tsx
+<MapaPMTiles
+  csvUrl="https://example.com/datos_entidades.csv"
+  field="valor"
+
+  csvFileMunicipios={archivoMunicipios}
+  fieldMunicipios="otro_campo"
+
+  fitToIds={["09", "15"]}
+  mode="boolean"
+/>
+```
+
+**¿Cómo funciona?**
+1. **Vista inicial**: Muestra las entidades coloreadas según el CSV de entidades
+2. **Click en una entidad**:
+   - Si especificaste `csvUrlMunicipios` o `csvFileMunicipios`, carga ese CSV
+   - Recalcula la clasificación Jenks con los datos municipales
+   - Aplica los nuevos colores a los municipios
+   - **Actualiza automáticamente el popup** para mostrar datos del CSV municipal
+3. **Ventajas**:
+   - Diferentes métricas para diferentes niveles (ej: totales en entidades, densidades en municipios)
+   - Archivos CSV más pequeños y específicos para cada nivel
+   - Mayor flexibilidad en la visualización de datos
+   - Los popups se actualizan automáticamente según el nivel visualizado
+
+**Ejemplo completo con popup y CSV dual:**
+```tsx
+<MapaPMTiles
+  // Vista inicial: entidades
+  csvUrl="https://example.com/datos_entidades.csv"
+  field="poblacion_total"
+
+  // Drill-down: municipios
+  csvUrlMunicipios="https://example.com/datos_municipios.csv"
+  fieldMunicipios="densidad"
+
+  fitToIds={["09", "15", "14"]}
+  mode="jenks"
+  jenksK={5}
+
+  // Popup se adapta automáticamente
+  enablePopup={true}
+  popupDataLabel="Valor"
+  popupDataField="poblacion_total"  // En entidades muestra población_total, en municipios muestra densidad
+/>
+```
+
 ## Props
 
 ### Props Obligatorias
@@ -244,6 +358,10 @@ Puedes habilitar un popup que se muestra al pasar el mouse sobre las features:
 | `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") |
 | `popupDataField` | `string` | `undefined` | Campo del CSV para mostrar en el popup (usa el valor de `field` si no se especifica) |
+| `csvUrlMunicipios` | `string` | `undefined` | URL del CSV remoto para municipios (usado cuando hay drill-down interactivo) |
+| `csvFileMunicipios` | `File` | `undefined` | Archivo File local para municipios (usado cuando hay drill-down interactivo) |
+| `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) |
 
 ## Modos de Estilo
 

package/dist/components/MapaPMTiles.d.ts

@@ -21,6 +21,10 @@ export interface MapaPMTilesProps {
     enablePopup?: boolean;
     popupDataLabel?: string;
     popupDataField?: string;
+    csvUrlMunicipios?: string;
+    csvFileMunicipios?: File;
+    joinCsvKeyMunicipios?: string;
+    fieldMunicipios?: string;
 }
 export declare const MapaPMTiles: React.FC<MapaPMTilesProps>;
 //# sourceMappingURL=MapaPMTiles.d.ts.map

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;CACzB;AAmDD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6ZlD,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;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;CAC1B;AAmDD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4pBlD,CAAC"}