@datosgeo-atdt/geo-ui 0.8.0 → 0.9.1
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 +75 -0
- package/dist/components/MapaPMTiles.d.ts +4 -0
- package/dist/components/MapaPMTiles.d.ts.map +1 -1
- package/dist/geo-ui.js +4266 -4213
- 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,77 @@ 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
|
|
313
|
+
csvUrl="https://example.com/datos_entidades.csv"
|
|
314
|
+
field="poblacion_total"
|
|
315
|
+
|
|
316
|
+
// Drill-down: municipios
|
|
317
|
+
csvUrlMunicipios="https://example.com/datos_municipios.csv"
|
|
318
|
+
fieldMunicipios="densidad"
|
|
319
|
+
|
|
320
|
+
fitToIds={["09", "15", "14"]}
|
|
321
|
+
mode="jenks"
|
|
322
|
+
jenksK={5}
|
|
323
|
+
|
|
324
|
+
// Popup se adapta automáticamente
|
|
325
|
+
enablePopup={true}
|
|
326
|
+
popupDataLabel="Valor"
|
|
327
|
+
popupDataField="poblacion_total" // En entidades muestra población_total, en municipios muestra densidad
|
|
328
|
+
/>
|
|
329
|
+
```
|
|
330
|
+
|
|
260
331
|
## Props
|
|
261
332
|
|
|
262
333
|
### Props Obligatorias
|
|
@@ -287,6 +358,10 @@ Esto crea una experiencia de exploración completa:
|
|
|
287
358
|
| `enablePopup` | `boolean` | `false` | Habilita popup con hover para mostrar información |
|
|
288
359
|
| `popupDataLabel` | `string` | `undefined` | Etiqueta para el dato adicional del popup (ej: "Población total") |
|
|
289
360
|
| `popupDataField` | `string` | `undefined` | Campo del CSV para mostrar en el popup (usa el valor de `field` si no se especifica) |
|
|
361
|
+
| `csvUrlMunicipios` | `string` | `undefined` | URL del CSV remoto para municipios (usado cuando hay drill-down interactivo) |
|
|
362
|
+
| `csvFileMunicipios` | `File` | `undefined` | Archivo File local para municipios (usado cuando hay drill-down interactivo) |
|
|
363
|
+
| `joinCsvKeyMunicipios` | `string` | `"cvegeo"` | Campo del CSV municipal para hacer el join (por defecto usa cvegeo de 5 dígitos) |
|
|
364
|
+
| `fieldMunicipios` | `string` | `field` | Campo del CSV municipal con los valores a visualizar (por defecto usa el mismo `field` de entidades) |
|
|
290
365
|
|
|
291
366
|
## Modos de Estilo
|
|
292
367
|
|
|
@@ -21,6 +21,10 @@ 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;
|
|
24
28
|
}
|
|
25
29
|
export declare const MapaPMTiles: React.FC<MapaPMTilesProps>;
|
|
26
30
|
//# 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;CAC1B;AAmDD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4pBlD,CAAC"}
|