esri-gl 1.0.0 → 1.0.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 +46 -23
- package/dist/{IdentifyImage-DWBF8K_a.js → IdentifyImage-DmyKcbAv.js} +7 -4
- package/dist/IdentifyImage-DmyKcbAv.js.map +1 -0
- package/dist/{index-CfCttkZx.d.ts → index-DczUYC4z.d.ts} +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.umd.js +1653 -33
- package/dist/index.umd.js.map +1 -1
- package/dist/package.json +1 -1
- package/dist/react-map-gl.d.ts +3 -3
- package/dist/react-map-gl.js +3 -3
- package/dist/react.d.ts +4 -4
- package/dist/react.js +3 -3
- package/dist/{useFeatureService-B0ot0WFz.js → useFeatureService-E9PiUOLP.js} +2 -2
- package/dist/{useFeatureService-B0ot0WFz.js.map → useFeatureService-E9PiUOLP.js.map} +1 -1
- package/dist/{useFeatureService-BmqltfVc.d.ts → useFeatureService-QUqwJcet.d.ts} +1 -1
- package/package.json +6 -5
- package/dist/IdentifyImage-DWBF8K_a.js.map +0 -1
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
|
-
|
|
282
|
-
|
|
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
|
-
.
|
|
292
|
+
.on(map)
|
|
289
293
|
.layers('all')
|
|
294
|
+
.tolerance(5)
|
|
290
295
|
.returnGeometry(true)
|
|
291
|
-
.run(
|
|
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 {
|
|
305
|
+
import { IdentifyImage } from 'esri-gl';
|
|
301
306
|
|
|
302
|
-
const results = await
|
|
303
|
-
|
|
304
|
-
|
|
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('
|
|
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**:
|
|
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
|
|
701
|
-
├── react.d.ts
|
|
702
|
-
├── react-map-gl.d.ts
|
|
703
|
-
├── index.js
|
|
704
|
-
├── index.umd.js
|
|
705
|
-
├──
|
|
706
|
-
├──
|
|
707
|
-
└──
|
|
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}
|
|
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}
|
|
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
|
-
|
|
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-
|
|
4280
|
+
//# sourceMappingURL=IdentifyImage-DmyKcbAv.js.map
|