@datosgeo-atdt/geo-ui 0.1.0 → 0.2.0
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 +50 -18
- package/dist/components/MapaPMTiles.d.ts +4 -4
- package/dist/components/MapaPMTiles.d.ts.map +1 -1
- package/dist/geo-ui.js +1472 -1461
- package/dist/geo-ui.js.map +1 -1
- package/dist/geo-ui.umd.cjs +14 -14
- package/dist/geo-ui.umd.cjs.map +1 -1
- package/package.json +1 -1
- /package/dist/{geo-ui.css → style.css} +0 -0
package/README.md
CHANGED
|
@@ -27,7 +27,31 @@ import { MapaPMTiles } from '@atdt/geo-ui';
|
|
|
27
27
|
import '@atdt/geo-ui/style.css';
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
### Ejemplo
|
|
30
|
+
### Ejemplo básico (usando valores por defecto)
|
|
31
|
+
|
|
32
|
+
La biblioteca incluye **integrada** la URL del PMTiles de entidades de México, por lo que no necesitas especificar `pmtilesUrl`, `sourceLayer` ni `joinGeomKey` si trabajas con entidades:
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import React from 'react';
|
|
36
|
+
import { MapaPMTiles } from '@atdt/geo-ui';
|
|
37
|
+
import '@atdt/geo-ui/style.css';
|
|
38
|
+
|
|
39
|
+
function App() {
|
|
40
|
+
return (
|
|
41
|
+
<MapaPMTiles
|
|
42
|
+
csvUrl="https://example.com/datos.csv"
|
|
43
|
+
field="valor"
|
|
44
|
+
mode="boolean"
|
|
45
|
+
width="100%"
|
|
46
|
+
height={600}
|
|
47
|
+
/>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export default App;
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Ejemplo con csvUrl (especificando PMTiles personalizado)
|
|
31
55
|
|
|
32
56
|
```tsx
|
|
33
57
|
import React from 'react';
|
|
@@ -37,9 +61,9 @@ import '@atdt/geo-ui/style.css';
|
|
|
37
61
|
function App() {
|
|
38
62
|
return (
|
|
39
63
|
<MapaPMTiles
|
|
40
|
-
pmtilesUrl="https://
|
|
41
|
-
sourceLayer="
|
|
42
|
-
joinGeomKey="
|
|
64
|
+
pmtilesUrl="https://example.com/custom.pmtiles"
|
|
65
|
+
sourceLayer="mi-capa"
|
|
66
|
+
joinGeomKey="ID"
|
|
43
67
|
csvUrl="https://example.com/datos.csv"
|
|
44
68
|
field="valor"
|
|
45
69
|
mode="boolean"
|
|
@@ -71,9 +95,6 @@ function App() {
|
|
|
71
95
|
/>
|
|
72
96
|
{csvFile && (
|
|
73
97
|
<MapaPMTiles
|
|
74
|
-
pmtilesUrl="https://www.datosgeoespaciales.atdt.gob.mx/datalake/pmtiles/componente/entidad.pmtiles"
|
|
75
|
-
sourceLayer="entidad"
|
|
76
|
-
joinGeomKey="CVE_ENT"
|
|
77
98
|
csvFile={csvFile}
|
|
78
99
|
field="poblacion"
|
|
79
100
|
mode="jenks"
|
|
@@ -87,43 +108,54 @@ function App() {
|
|
|
87
108
|
export default App;
|
|
88
109
|
```
|
|
89
110
|
|
|
90
|
-
### Ejemplo con
|
|
111
|
+
### Ejemplo con fitToIds (zoom y filtrado por entidades)
|
|
112
|
+
|
|
113
|
+
Muestra **solo** las entidades seleccionadas y ajusta el mapa automáticamente a su extensión (sin animación):
|
|
91
114
|
|
|
92
115
|
```tsx
|
|
116
|
+
// Mostrar solo Ciudad de México
|
|
93
117
|
<MapaPMTiles
|
|
94
|
-
pmtilesUrl="https://www.datosgeoespaciales.atdt.gob.mx/datalake/pmtiles/componente/entidad.pmtiles"
|
|
95
|
-
sourceLayer="entidad"
|
|
96
|
-
joinGeomKey="CVE_ENT"
|
|
97
118
|
csvUrl="https://example.com/datos.csv"
|
|
98
|
-
|
|
99
|
-
|
|
119
|
+
fitToIds="09"
|
|
120
|
+
/>
|
|
121
|
+
|
|
122
|
+
// Mostrar múltiples entidades (Ciudad de México, Estado de México y Jalisco)
|
|
123
|
+
<MapaPMTiles
|
|
124
|
+
csvUrl="https://example.com/datos.csv"
|
|
125
|
+
fitToIds={["09", "15", "14"]}
|
|
100
126
|
/>
|
|
101
127
|
```
|
|
102
128
|
|
|
129
|
+
**Ventajas de usar `fitToIds`:**
|
|
130
|
+
- ✅ No necesitas configurar `pmtilesUrl` (está integrado)
|
|
131
|
+
- ✅ Filtra automáticamente para mostrar solo las entidades seleccionadas
|
|
132
|
+
- ✅ Calcula y ajusta el bbox combinado sin animación de zoom
|
|
133
|
+
- ✅ Carga directo en la vista correcta
|
|
134
|
+
|
|
103
135
|
## Props
|
|
104
136
|
|
|
105
137
|
### Props Obligatorias
|
|
106
138
|
|
|
107
139
|
| Prop | Tipo | Descripción |
|
|
108
140
|
|------|------|-------------|
|
|
109
|
-
| `pmtilesUrl` | `string` | URL del archivo PMTiles remoto |
|
|
110
|
-
| `sourceLayer` | `string` | Nombre de la capa vectorial dentro del PMTiles |
|
|
111
|
-
| `joinGeomKey` | `string` | Campo de la geometría para hacer el join (también usado como `promoteId`) |
|
|
112
141
|
| `csvUrl` o `csvFile` | `string \| File` | URL del CSV remoto o archivo File local. **Al menos uno debe estar presente** |
|
|
113
142
|
|
|
114
143
|
### Props Opcionales
|
|
115
144
|
|
|
116
145
|
| Prop | Tipo | Default | Descripción |
|
|
117
146
|
|------|------|---------|-------------|
|
|
147
|
+
| `pmtilesUrl` | `string` | `"https://www.datosgeoespaciales.atdt.gob.mx/datalake/pmtiles/componente/entidad.pmtiles"` | URL del archivo PMTiles remoto. **Por defecto usa el PMTiles de entidades de México** |
|
|
148
|
+
| `sourceLayer` | `string` | `"entidad"` | Nombre de la capa vectorial dentro del PMTiles |
|
|
149
|
+
| `joinGeomKey` | `string` | `"CVE_ENT"` | Campo de la geometría para hacer el join (también usado como `promoteId`) |
|
|
118
150
|
| `joinCsvKey` | `string` | `joinGeomKey` | Campo del CSV para hacer el join |
|
|
119
151
|
| `field` | `string` | `"valor"` | Campo del CSV con los valores a visualizar |
|
|
120
152
|
| `mode` | `"boolean" \| "jenks"` | `"boolean"` | Modo de estilo: booleano o clasificación Jenks |
|
|
121
153
|
| `width` | `string \| number` | `"100%"` | Ancho del mapa |
|
|
122
154
|
| `height` | `string \| number` | `520` | Alto del mapa (en px si es número) |
|
|
123
|
-
| `initialView` | `object` | `{center: [-102, 23], zoom: 4}` | Vista inicial del mapa |
|
|
155
|
+
| `initialView` | `object` | `{center: [-102, 23], zoom: 4}` | Vista inicial del mapa (ignorado si se usa `fitToIds`) |
|
|
124
156
|
| `initialView.center` | `[number, number]` | `[-102, 23]` | Centro inicial [lng, lat] |
|
|
125
157
|
| `initialView.zoom` | `number` | `4` | Zoom inicial |
|
|
126
|
-
| `
|
|
158
|
+
| `fitToIds` | `string \| string[]` | `undefined` | ID o array de IDs de features para filtrar y hacer zoom automático (sin animación) |
|
|
127
159
|
| `bboxField` | `string` | `"bbox"` | Campo con bbox precalculado en PMTiles |
|
|
128
160
|
| `jenksK` | `number` | `5` | Número de clases para clasificación Jenks |
|
|
129
161
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
export interface MapaPMTilesProps {
|
|
3
|
-
pmtilesUrl
|
|
4
|
-
sourceLayer
|
|
5
|
-
joinGeomKey
|
|
3
|
+
pmtilesUrl?: string;
|
|
4
|
+
sourceLayer?: string;
|
|
5
|
+
joinGeomKey?: string;
|
|
6
6
|
csvUrl?: string;
|
|
7
7
|
csvFile?: File;
|
|
8
8
|
joinCsvKey?: string;
|
|
@@ -14,7 +14,7 @@ export interface MapaPMTilesProps {
|
|
|
14
14
|
center?: [number, number];
|
|
15
15
|
zoom?: number;
|
|
16
16
|
};
|
|
17
|
-
|
|
17
|
+
fitToIds?: string | string[];
|
|
18
18
|
bboxField?: string;
|
|
19
19
|
jenksK?: number;
|
|
20
20
|
}
|
|
@@ -1 +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,EAAE,MAAM,CAAC;
|
|
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,CA6QlD,CAAC"}
|