@datosgeo-atdt/geo-ui 0.6.0 → 0.8.0

package/README.md

@@ -172,6 +172,91 @@ cvegeo,nombre,valor
 09010,Álvaro Obregón,175
 ```
 
+### Ejemplo con Popup (información al pasar el mouse)
+
+Puedes habilitar un popup que se muestra al pasar el mouse sobre las features:
+
+```tsx
+// Popup simple: solo muestra el nombre de la entidad/municipio
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  fitToIds="09"
+  enablePopup={true}
+/>
+
+// Popup con datos del CSV
+<MapaPMTiles
+  csvUrl="https://example.com/datos_poblacion.csv"
+  field="poblacion"
+  fitToIds="09"
+  enablePopup={true}
+  popupDataLabel="Población total"
+  popupDataField="poblacion"
+/>
+
+// Popup en modo municipios
+<MapaPMTiles
+  csvUrl="https://example.com/datos_municipales.csv"
+  fitToIds="09"
+  showMunicipios={true}
+  enablePopup={true}
+  popupDataLabel="Habitantes"
+  popupDataField="poblacion"
+  mode="jenks"
+/>
+```
+
+**Comportamiento del popup:**
+- Se muestra al pasar el mouse sobre las features (hover)
+- **Nombre**: Muestra automáticamente el nombre de la entidad o municipio
+  - Entidades: usa un diccionario interno (ej: "09" → "Ciudad de México")
+  - Municipios: usa el campo `nomgeo` del PMTiles
+- **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
+
 ## Props
 
 ### Props Obligatorias
@@ -199,6 +284,9 @@ cvegeo,nombre,valor
 | `bboxField` | `string` | `"bbox"` | Campo con bbox precalculado en PMTiles |
 | `jenksK` | `number` | `5` | Número de clases para clasificación Jenks |
 | `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") |
+| `popupDataField` | `string` | `undefined` | Campo del CSV para mostrar en el popup (usa el valor de `field` si no se especifica) |
 
 ## Modos de Estilo
 

package/dist/components/MapaPMTiles.d.ts

@@ -18,6 +18,9 @@ export interface MapaPMTilesProps {
     bboxField?: string;
     jenksK?: number;
     showMunicipios?: boolean;
+    enablePopup?: boolean;
+    popupDataLabel?: string;
+    popupDataField?: 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;AAO3D,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;CAC1B;AAeD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8UlD,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;CACzB;AAmDD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmjBlD,CAAC"}