@datosgeo-atdt/geo-ui 0.5.0 → 0.7.0

package/README.md

@@ -127,10 +127,92 @@ Muestra **solo** las entidades seleccionadas y ajusta el mapa automáticamente a
 ```
 
 **Ventajas de usar `fitToIds`:**
-- ✅ No necesitas configurar `pmtilesUrl` (está integrado)
-- ✅ Filtra automáticamente para mostrar solo las entidades seleccionadas
-- ✅ Calcula y ajusta el bbox combinado sin animación de zoom
-- ✅ Carga directo en la vista correcta
+- No necesitas configurar `pmtilesUrl` (está integrado)
+- Filtra automáticamente para mostrar solo las entidades seleccionadas
+- Calcula y ajusta el bbox combinado sin animación de zoom
+- Carga directo en la vista correcta
+
+### Ejemplo con showMunicipios (visualización municipal)
+
+Cuando activas `showMunicipios={true}`, el componente cambia a **nivel municipal**:
+- La **entidad** se muestra solo como **contorno** (outline grueso)
+- Los **municipios** dentro de esa entidad se muestran con el **relleno temático** (boolean o jenks)
+- Los datos CSV se unen usando el **cvegeo municipal** (5 dígitos)
+
+```tsx
+// Mostrar municipios de Ciudad de México (09)
+// El CSV debe tener cvegeo municipal (ej: "09002", "09010", etc.)
+<MapaPMTiles
+  csvUrl="https://example.com/datos_municipales.csv"
+  fitToIds="09"
+  showMunicipios={true}
+  mode="jenks"
+  jenksK={5}
+/>
+
+// Mostrar municipios de múltiples entidades
+<MapaPMTiles
+  csvUrl="https://example.com/datos_municipales.csv"
+  fitToIds={["09", "15", "14"]}
+  showMunicipios={true}
+/>
+```
+
+**¿Cómo funciona?**
+1. `fitToIds="09"` extrae automáticamente `cve_ent="09"` (primeros 2 dígitos)
+2. Filtra y muestra **todos los municipios** con `cve_ent="09"`
+3. La entidad "09" se dibuja solo como contorno
+4. Los municipios se rellenan según los valores del CSV unidos por `cvegeo` (5 dígitos)
+
+**Formato CSV para municipios:**
+```csv
+cvegeo,nombre,valor
+09002,Azcapotzalco,150
+09003,Coyoacán,200
+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)
 
 ## Props
 
@@ -158,6 +240,10 @@ Muestra **solo** las entidades seleccionadas y ajusta el mapa automáticamente a
 | `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 |
+| `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

@@ -17,6 +17,10 @@ export interface MapaPMTilesProps {
     fitToIds?: string | string[];
     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;CACjB;AAUD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+QlD,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,CA6ZlD,CAAC"}