@datosgeo-atdt/geo-ui 0.1.1 → 0.2.1

package/README.md

@@ -27,7 +27,31 @@ import { MapaPMTiles } from '@atdt/geo-ui';
 import '@atdt/geo-ui/style.css';
 ```
 
-### Ejemplo con csvUrl (modo booleano)
+### Ejemplo básico (usando valores por defecto)
+
+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:
+
+```tsx
+import React from 'react';
+import { MapaPMTiles } from '@atdt/geo-ui';
+import '@atdt/geo-ui/style.css';
+
+function App() {
+  return (
+    <MapaPMTiles
+      csvUrl="https://example.com/datos.csv"
+      field="valor"
+      mode="boolean"
+      width="100%"
+      height={600}
+    />
+  );
+}
+
+export default App;
+```
+
+### Ejemplo con csvUrl (especificando PMTiles personalizado)
 
 ```tsx
 import React from 'react';
@@ -37,9 +61,9 @@ import '@atdt/geo-ui/style.css';
 function App() {
   return (
     <MapaPMTiles
-      pmtilesUrl="https://www.datosgeoespaciales.atdt.gob.mx/datalake/pmtiles/componente/entidad.pmtiles"
-      sourceLayer="entidad"
-      joinGeomKey="CVE_ENT"
+      pmtilesUrl="https://example.com/custom.pmtiles"
+      sourceLayer="mi-capa"
+      joinGeomKey="ID"
       csvUrl="https://example.com/datos.csv"
       field="valor"
       mode="boolean"
@@ -71,9 +95,6 @@ function App() {
       />
       {csvFile && (
         <MapaPMTiles
-          pmtilesUrl="https://www.datosgeoespaciales.atdt.gob.mx/datalake/pmtiles/componente/entidad.pmtiles"
-          sourceLayer="entidad"
-          joinGeomKey="CVE_ENT"
           csvFile={csvFile}
           field="poblacion"
           mode="jenks"
@@ -87,43 +108,54 @@ function App() {
 export default App;
 ```
 
-### Ejemplo con fitToId (zoom a feature específica)
+### Ejemplo con fitToIds (zoom y filtrado por entidades)
+
+Muestra **solo** las entidades seleccionadas y ajusta el mapa automáticamente a su extensión (sin animación):
 
 ```tsx
+// Mostrar solo Ciudad de México
 <MapaPMTiles
-  pmtilesUrl="https://www.datosgeoespaciales.atdt.gob.mx/datalake/pmtiles/componente/entidad.pmtiles"
-  sourceLayer="entidad"
-  joinGeomKey="CVE_ENT"
   csvUrl="https://example.com/datos.csv"
-  fitToId="09" // Zoom a Ciudad de México
-  bboxField="bbox"
+  fitToIds="09"
+/>
+
+// Mostrar múltiples entidades (Ciudad de México, Estado de México y Jalisco)
+<MapaPMTiles
+  csvUrl="https://example.com/datos.csv"
+  fitToIds={["09", "15", "14"]}
 />
 ```
 
+**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
+
 ## Props
 
 ### Props Obligatorias
 
 | Prop | Tipo | Descripción |
 |------|------|-------------|
-| `pmtilesUrl` | `string` | URL del archivo PMTiles remoto |
-| `sourceLayer` | `string` | Nombre de la capa vectorial dentro del PMTiles |
-| `joinGeomKey` | `string` | Campo de la geometría para hacer el join (también usado como `promoteId`) |
 | `csvUrl` o `csvFile` | `string \| File` | URL del CSV remoto o archivo File local. **Al menos uno debe estar presente** |
 
 ### Props Opcionales
 
 | Prop | Tipo | Default | Descripción |
 |------|------|---------|-------------|
+| `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** |
+| `sourceLayer` | `string` | `"entidad"` | Nombre de la capa vectorial dentro del PMTiles |
+| `joinGeomKey` | `string` | `"CVE_ENT"` | Campo de la geometría para hacer el join (también usado como `promoteId`) |
 | `joinCsvKey` | `string` | `joinGeomKey` | Campo del CSV para hacer el join |
 | `field` | `string` | `"valor"` | Campo del CSV con los valores a visualizar |
 | `mode` | `"boolean" \| "jenks"` | `"boolean"` | Modo de estilo: booleano o clasificación Jenks |
 | `width` | `string \| number` | `"100%"` | Ancho del mapa |
 | `height` | `string \| number` | `520` | Alto del mapa (en px si es número) |
-| `initialView` | `object` | `{center: [-102, 23], zoom: 4}` | Vista inicial del mapa |
+| `initialView` | `object` | `{center: [-102, 23], zoom: 4}` | Vista inicial del mapa (ignorado si se usa `fitToIds`) |
 | `initialView.center` | `[number, number]` | `[-102, 23]` | Centro inicial [lng, lat] |
 | `initialView.zoom` | `number` | `4` | Zoom inicial |
-| `fitToId` | `string` | `undefined` | ID de feature para hacer zoom automático |
+| `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 |
 

package/dist/components/MapaPMTiles.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
 export interface MapaPMTilesProps {
-    pmtilesUrl: string;
-    sourceLayer: string;
-    joinGeomKey: string;
+    pmtilesUrl?: string;
+    sourceLayer?: string;
+    joinGeomKey?: string;
     csvUrl?: string;
     csvFile?: File;
     joinCsvKey?: string;
@@ -14,7 +14,7 @@ export interface MapaPMTilesProps {
         center?: [number, number];
         zoom?: number;
     };
-    fitToId?: string;
+    fitToIds?: string | string[];
     bboxField?: string;
     jenksK?: number;
 }

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,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,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,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2OlD,CAAC"}
+{"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"}