esri-gl 1.0.0 → 1.0.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 CHANGED
@@ -48,7 +48,15 @@ A TypeScript library that bridges Esri ArcGIS REST services with MapLibre GL JS
48
48
  npm install esri-gl
49
49
  ```
50
50
 
51
+ ### Entry Points
51
52
 
53
+ esri-gl provides three entry points for different use cases:
54
+
55
+ | Entry Point | Import | Use Case |
56
+ |-------------|--------|----------|
57
+ | `esri-gl` | `import { DynamicMapService, Query, ... } from 'esri-gl'` | Core services and tasks (vanilla JS/TS) |
58
+ | `esri-gl/react` | `import { useDynamicMapService, useQuery, ... } from 'esri-gl/react'` | React hooks for service lifecycle management |
59
+ | `esri-gl/react-map-gl` | `import { EsriDynamicLayer, ... } from 'esri-gl/react-map-gl'` | Declarative react-map-gl components |
52
60
 
53
61
  ## Quick Start
54
62
 
@@ -278,32 +286,29 @@ Query vector features at specific locations.
278
286
  ```typescript
279
287
  import { IdentifyFeatures } from 'esri-gl';
280
288
 
281
- const identifyService = new IdentifyFeatures({
282
- url: 'https://example.com/arcgis/rest/services/MyService/MapServer'
283
- });
284
-
285
- // Identify features at a point
286
- const results = await identifyService
289
+ // Identify features at a point using the fluent API
290
+ const results = await new IdentifyFeatures('https://example.com/arcgis/rest/services/MyService/MapServer')
287
291
  .at({ lng: -95, lat: 37 })
288
- .tolerance(5)
292
+ .on(map)
289
293
  .layers('all')
294
+ .tolerance(5)
290
295
  .returnGeometry(true)
291
- .run(map);
296
+ .run();
292
297
 
293
- console.log('Identified features:', results);
298
+ console.log('Identified features:', results.features);
294
299
  ```
295
300
 
296
301
  ### IdentifyImage
297
302
  Query raster values from image services.
298
303
 
299
304
  ```typescript
300
- import { identifyImage } from 'esri-gl';
305
+ import { IdentifyImage } from 'esri-gl';
301
306
 
302
- const results = await identifyImage({
303
- url: 'https://example.com/arcgis/rest/services/Elevation/ImageServer'
304
- }).at({ lng: -120, lat: 40 });
307
+ const results = await new IdentifyImage('https://example.com/arcgis/rest/services/Elevation/ImageServer')
308
+ .at({ lng: -120, lat: 40 })
309
+ .run();
305
310
 
306
- console.log('Elevation value:', results.value);
311
+ console.log('Pixel value:', results.results[0]?.value);
307
312
  ```
308
313
 
309
314
  ### Query
@@ -638,6 +643,24 @@ const featureService = new FeatureService('api-key-source', map, {
638
643
  });
639
644
  ```
640
645
 
646
+ ## Examples
647
+
648
+ Working examples are available in the [`examples/`](examples/) directory:
649
+
650
+ | Example | Entry Point | Description |
651
+ |---------|-------------|-------------|
652
+ | [maplibre-esm](examples/maplibre-esm/) | `esri-gl` | All services and tasks with vanilla MapLibre GL JS |
653
+ | [maplibre-react-hooks](examples/maplibre-react-hooks/) | `esri-gl/react` | All React hooks with MapLibre GL JS |
654
+ | [maplibre-react-map-gl](examples/maplibre-react-map-gl/) | `esri-gl/react-map-gl` | All react-map-gl components and tasks |
655
+
656
+ To run an example:
657
+
658
+ ```bash
659
+ cd examples/maplibre-esm # or maplibre-react-hooks, maplibre-react-map-gl
660
+ npm install
661
+ npm run dev
662
+ ```
663
+
641
664
  ## Development
642
665
 
643
666
  ### Build System
@@ -645,7 +668,7 @@ const featureService = new FeatureService('api-key-source', map, {
645
668
  - **Type Declarations**: Generated with rollup-plugin-dts in `dist/` directory
646
669
  - **Demo Development**: Vite dev server with React and TypeScript
647
670
  - **Documentation**: Docusaurus build system
648
- - **Test Coverage**: 717 comprehensive test cases across 31 test suites
671
+ - **Test Coverage**: 727 tests across 31 test suites
649
672
 
650
673
  ### Development Commands
651
674
 
@@ -697,14 +720,14 @@ src/
697
720
  └── types.ts # TypeScript interfaces
698
721
 
699
722
  dist/
700
- ├── index.d.ts # Main TypeScript declarations
701
- ├── react.d.ts # React integration declarations
702
- ├── react-map-gl.d.ts # React Map GL declarations
703
- ├── index.js # ESM build
704
- ├── index.umd.js # UMD build
705
- ├── esri-gl.esm.js # ESM build (legacy)
706
- ├── esri-gl.js # UMD build (legacy)
707
- └── esri-gl.min.js # Minified UMD build
723
+ ├── index.d.ts # Main TypeScript declarations
724
+ ├── react.d.ts # React hooks declarations
725
+ ├── react-map-gl.d.ts # React Map GL declarations
726
+ ├── index.js # ESM build
727
+ ├── index.umd.js # UMD build
728
+ ├── react.js # React hooks ESM build
729
+ ├── react-map-gl.js # React Map GL ESM build
730
+ └── package.json # Package metadata with exports map
708
731
  ```
709
732
 
710
733
  ## Browser Support
@@ -609,6 +609,7 @@ class DynamicMapService {
609
609
  bboxSR: '3857',
610
610
  imageSR: '3857',
611
611
  format: this.options.format,
612
+ dpi: this.options.dpi.toString(),
612
613
  layers: this._layersStr || '',
613
614
  transparent: this.options.transparent.toString(),
614
615
  size: `${tileSize},${tileSize}`,
@@ -902,7 +903,7 @@ class DynamicMapService {
902
903
  }),
903
904
  tolerance: '3',
904
905
  returnGeometry: returnGeometry.toString(),
905
- imageDisplay: `${canvas.width},${canvas.height},96`,
906
+ imageDisplay: `${canvas.width},${canvas.height},${this.options.dpi}`,
906
907
  mapExtent: `${bounds[0][0]},${bounds[0][1]},${bounds[1][0]},${bounds[1][1]}`,
907
908
  layers: this._layersStrIdentify || '',
908
909
  f: 'json'
@@ -1550,6 +1551,7 @@ class ImageService {
1550
1551
  bboxSR: '3857',
1551
1552
  imageSR: '3857',
1552
1553
  format: this.options.format,
1554
+ dpi: this.options.dpi.toString(),
1553
1555
  size: `${tileSize},${tileSize}`,
1554
1556
  f: 'image'
1555
1557
  });
@@ -1647,7 +1649,7 @@ class ImageService {
1647
1649
  }),
1648
1650
  tolerance: '3',
1649
1651
  returnGeometry: returnGeometry.toString(),
1650
- imageDisplay: `${canvas.width},${canvas.height},96`,
1652
+ imageDisplay: `${canvas.width},${canvas.height},${this.options.dpi}`,
1651
1653
  mapExtent: `${bounds[0][0]},${bounds[0][1]},${bounds[1][0]},${bounds[1][1]}`,
1652
1654
  f: 'json'
1653
1655
  });
@@ -3965,7 +3967,8 @@ class IdentifyFeatures extends Task {
3965
3967
  const bounds = map.getBounds().toArray();
3966
3968
  this.params.mapExtent = [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]].join(',');
3967
3969
  const canvas = map.getCanvas();
3968
- this.params.imageDisplay = [canvas.width, canvas.height, 96].join(',');
3970
+ const dpi = this.options?.dpi ?? 96;
3971
+ this.params.imageDisplay = [canvas.width, canvas.height, dpi].join(',');
3969
3972
  } catch (error) {
3970
3973
  console.warn('Could not extract map extent and display info:', error);
3971
3974
  }
@@ -4274,4 +4277,4 @@ function identifyImage(options) {
4274
4277
  }
4275
4278
 
4276
4279
  export { DynamicMapService as D, FeatureService as F, IdentifyFeatures as I, Query as Q, Service as S, Task as T, VectorBasemapStyle as V, Find as a, IdentifyImage as b, ImageService as c, TiledMapService as d, VectorTileService as e, cleanTrailingSlash as f, find as g, getServiceDetails as h, identifyImage as i, query as q, updateAttribution as u };
4277
- //# sourceMappingURL=IdentifyImage-DWBF8K_a.js.map
4280
+ //# sourceMappingURL=IdentifyImage-DmyKcbAv.js.map