@datosgeo-atdt/geo-ui 0.11.3 → 0.11.4

package/README.md

@@ -866,7 +866,7 @@ function App() {
 
 #### Ejemplo con interactividad bidireccional (Tabla ↔ Mapa)
 
-Crea interacción entre la tabla y el mapa: click en tabla hace zoom en mapa, click en mapa cambia datos de tabla:
+Crea interacción completa entre la tabla y el mapa usando `onRowClick` y `onFeatureClick`:
 
 ```tsx
 import { MapaPMTiles, DataTable } from '@atdt/geo-ui';
@@ -886,6 +886,13 @@ function App() {
         mode="jenks"
         showMunicipios={nivel === 'municipio'}
         enablePopup={true}
+        onFeatureClick={(featureId, properties) => {
+          // Click en mapa → cambia tabla a municipios de esa entidad
+          if (nivel === 'entidad') {
+            setSelectedEnt(featureId);
+            setNivel('municipio');
+          }
+        }}
       />
 
       {/* Tabla con click handler */}
@@ -903,8 +910,8 @@ function App() {
               ]
         }
         onRowClick={(row) => {
+          // Click en tabla → hace zoom en mapa a esa entidad
           if (nivel === 'entidad') {
-            // Click en tabla de entidades → zoom a esa entidad y muestra municipios
             setSelectedEnt(row.cvegeo);
             setNivel('municipio');
           }
@@ -934,12 +941,13 @@ function App() {
 }
 ```
 
-**Flujo de interacción:**
-1. **Vista inicial**: Muestra tabla con entidades (`prueba_entidad.csv`)
-2. **Click en fila de tabla**: Cambia a vista de municipios de esa entidad
-3. **Mapa hace zoom**: Automáticamente hacia la entidad seleccionada
-4. **Tabla cambia**: Muestra datos municipales (`cdmx_prueba.csv`)
-5. **Botón "Regresar"**: Vuelve a la vista de entidades
+**Flujo de interacción bidireccional:**
+1. **Vista inicial**: Muestra tabla con entidades (`prueba_entidad.csv`) y mapa de México
+2. **Click en MAPA**: Hace zoom a la entidad y cambia tabla a municipios
+3. **Click en TABLA**: Hace zoom en el mapa y cambia tabla a municipios
+4. **Mapa hace zoom**: Automáticamente hacia la entidad seleccionada
+5. **Tabla cambia**: Muestra datos municipales (`cdmx_prueba.csv`)
+6. **Botón "Regresar"**: Vuelve a la vista de entidades
 
 ### Formato de Números
 
@@ -1036,6 +1044,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) |
+| `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
 

package/dist/components/MapaPMTiles.d.ts

@@ -26,6 +26,7 @@ export interface MapaPMTilesProps {
     joinCsvKeyMunicipios?: string;
     fieldMunicipios?: string;
     modeMunicipios?: 'boolean' | 'jenks';
+    onFeatureClick?: (featureId: string, properties: any) => void;
 }
 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;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;CACtC;AAmDD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqqBlD,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;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,CA2qBlD,CAAC"}