@datosgeo-atdt/geo-ui 0.8.0 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -257,6 +257,84 @@ Esto crea una experiencia de exploración completa:
257
257
  - Popup con información al pasar el mouse
258
258
  - Clasificación jenks en ambos niveles
259
259
 
260
+ ### Ejemplo con CSV dual (entidades y municipios con datos diferentes)
261
+
262
+ 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:
263
+
264
+ ```tsx
265
+ // Vista inicial: entidades con datos de población total
266
+ // Después del click: municipios con datos de densidad poblacional
267
+ <MapaPMTiles
268
+ // CSV para entidades (vista inicial)
269
+ csvUrl="https://example.com/datos_entidades.csv"
270
+ field="poblacion_total"
271
+
272
+ // CSV para municipios (después del click)
273
+ csvUrlMunicipios="https://example.com/datos_municipios.csv"
274
+ fieldMunicipios="densidad"
275
+
276
+ fitToIds={["09", "15", "14"]}
277
+ mode="jenks"
278
+ jenksK={5}
279
+ />
280
+ ```
281
+
282
+ **Ejemplo con archivo local para municipios:**
283
+ ```tsx
284
+ <MapaPMTiles
285
+ csvUrl="https://example.com/datos_entidades.csv"
286
+ field="valor"
287
+
288
+ csvFileMunicipios={archivoMunicipios}
289
+ fieldMunicipios="otro_campo"
290
+
291
+ fitToIds={["09", "15"]}
292
+ mode="boolean"
293
+ />
294
+ ```
295
+
296
+ **¿Cómo funciona?**
297
+ 1. **Vista inicial**: Muestra las entidades coloreadas según el CSV de entidades
298
+ 2. **Click en una entidad**:
299
+ - Si especificaste `csvUrlMunicipios` o `csvFileMunicipios`, carga ese CSV
300
+ - Recalcula la clasificación Jenks con los datos municipales
301
+ - Aplica los nuevos colores a los municipios
302
+ - **Actualiza automáticamente el popup** para mostrar datos del CSV municipal
303
+ 3. **Ventajas**:
304
+ - Diferentes métricas para diferentes niveles (ej: totales en entidades, densidades en municipios)
305
+ - Archivos CSV más pequeños y específicos para cada nivel
306
+ - Mayor flexibilidad en la visualización de datos
307
+ - Los popups se actualizan automáticamente según el nivel visualizado
308
+
309
+ **Ejemplo completo con popup y CSV dual:**
310
+ ```tsx
311
+ <MapaPMTiles
312
+ // Vista inicial: entidades con clasificación booleana
313
+ csvUrl="https://example.com/datos_entidades.csv"
314
+ field="tiene_cobertura"
315
+ mode="boolean"
316
+
317
+ // Drill-down: municipios con clasificación Jenks
318
+ csvUrlMunicipios="https://example.com/datos_municipios.csv"
319
+ fieldMunicipios="poblacion"
320
+ modeMunicipios="jenks"
321
+
322
+ fitToIds={["09", "15", "14"]}
323
+ jenksK={5}
324
+
325
+ // Popup se adapta automáticamente:
326
+ // - En entidades: solo muestra nombre (sin datos)
327
+ // - En municipios: muestra nombre + datos del CSV municipal
328
+ enablePopup={true}
329
+ popupDataLabel="Habitantes"
330
+ popupDataField="poblacion"
331
+ />
332
+ ```
333
+
334
+ **Comportamiento del popup con CSV dual:**
335
+ - **Vista de entidades**: Solo muestra el nombre (ej: "Ciudad de México") sin datos adicionales
336
+ - **Vista de municipios** (después del click): Muestra nombre del municipio + valor del CSV municipal (ej: "Azcapotzalco - Habitantes: 385,000")
337
+
260
338
  ## Props
261
339
 
262
340
  ### Props Obligatorias
@@ -287,6 +365,11 @@ Esto crea una experiencia de exploración completa:
287
365
  | `enablePopup` | `boolean` | `false` | Habilita popup con hover para mostrar información |
288
366
  | `popupDataLabel` | `string` | `undefined` | Etiqueta para el dato adicional del popup (ej: "Población total") |
289
367
  | `popupDataField` | `string` | `undefined` | Campo del CSV para mostrar en el popup (usa el valor de `field` si no se especifica) |
368
+ | `csvUrlMunicipios` | `string` | `undefined` | URL del CSV remoto para municipios (usado cuando hay drill-down interactivo) |
369
+ | `csvFileMunicipios` | `File` | `undefined` | Archivo File local para municipios (usado cuando hay drill-down interactivo) |
370
+ | `joinCsvKeyMunicipios` | `string` | `"cvegeo"` | Campo del CSV municipal para hacer el join (por defecto usa cvegeo de 5 dígitos) |
371
+ | `fieldMunicipios` | `string` | `field` | Campo del CSV municipal con los valores a visualizar (por defecto usa el mismo `field` de entidades) |
372
+ | `modeMunicipios` | `"boolean" \| "jenks"` | `mode` | Modo de estilo para municipios (permite usar diferente clasificación que entidades) |
290
373
 
291
374
  ## Modos de Estilo
292
375
 
@@ -21,6 +21,11 @@ export interface MapaPMTilesProps {
21
21
  enablePopup?: boolean;
22
22
  popupDataLabel?: string;
23
23
  popupDataField?: string;
24
+ csvUrlMunicipios?: string;
25
+ csvFileMunicipios?: File;
26
+ joinCsvKeyMunicipios?: string;
27
+ fieldMunicipios?: string;
28
+ modeMunicipios?: 'boolean' | 'jenks';
24
29
  }
25
30
  export declare const MapaPMTiles: React.FC<MapaPMTilesProps>;
26
31
  //# sourceMappingURL=MapaPMTiles.d.ts.map
@@ -1 +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,CAmjBlD,CAAC"}
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"}