@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 +83 -0
- package/dist/components/MapaPMTiles.d.ts +5 -0
- package/dist/components/MapaPMTiles.d.ts.map +1 -1
- package/dist/geo-ui.js +4328 -4274
- package/dist/geo-ui.js.map +1 -1
- package/dist/geo-ui.umd.cjs +46 -45
- package/dist/geo-ui.umd.cjs.map +1 -1
- package/package.json +1 -1
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;
|
|
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"}
|