@arcgis/map-components-react 4.33.0-next.24 → 4.33.0-next.26
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 +61 -3
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# ArcGIS Maps SDK for JavaScript - React wrapper for Map Components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Note: `@arcgis/map-components-react` was developed for use in React 18. Consider updating to React 19 where the React wrapper is no longer necessary. Check out the [documentation](https://developers.arcgis.com/javascript/latest/get-started-react/) to get started with `@arcgis/map-components` in React 19.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The ArcGIS Maps SDK for JavaScript provides a suite of ready-to-use UI components that simplify the process of creating GIS web applications. This package contains a map component, scene component, and many other components with functionality made possible through the SDK's core API which is also accessible through the components.
|
|
6
6
|
|
|
7
7
|
## Documentation
|
|
8
8
|
|
|
@@ -20,11 +20,69 @@ Samples for how to use this package are available on github in the [jsapi-resour
|
|
|
20
20
|
- [Licensing](https://developers.arcgis.com/javascript/latest/licensing/)
|
|
21
21
|
- [Working with `next` versions](https://github.com/Esri/feedback-js-api-next/blob/main/README.md)
|
|
22
22
|
|
|
23
|
-
##
|
|
23
|
+
## Support
|
|
24
24
|
|
|
25
25
|
- General questions about using this package or the ArcGIS Maps SDK for JavaScript? See the [Esri developer community](https://community.esri.com/t5/arcgis-api-for-javascript/ct-p/arcgis-api-for-javascript).
|
|
26
26
|
- [Technical support](https://support.esri.com/).
|
|
27
27
|
|
|
28
|
+
## Quick start guide
|
|
29
|
+
|
|
30
|
+
- Get started by using the [react 18 sample](https://developers.arcgis.com/javascript/latest/get-started-react/#download-project).
|
|
31
|
+
- Install the required packages: `@arcgis/map-components-react`, `@arcgis/core`, `@esri/calcite-components-react`.
|
|
32
|
+
- Import the necessary CSS files in your project and ensure CSS is configured for the map components:
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
@import 'https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/dark/main.css';
|
|
36
|
+
@import url("https://js.arcgis.com/calcite-components/2.3.2/calcite.css");
|
|
37
|
+
|
|
38
|
+
#root,
|
|
39
|
+
html,
|
|
40
|
+
body {
|
|
41
|
+
margin: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
arcgis-map {
|
|
45
|
+
display: block;
|
|
46
|
+
height: 100vh;
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
- Add map component: In your main file (e.g., index.tsx), add the `ArcgisMap` component and configure it with an optional `item-id` if using a WebMap from ArcGIS Online or an ArcGIS Enterprise portal:
|
|
51
|
+
|
|
52
|
+
```js
|
|
53
|
+
import React from "react";
|
|
54
|
+
import ReactDOM from "react-dom/client";
|
|
55
|
+
import "@arcgis/map-components/components/arcgis-map";
|
|
56
|
+
import "@arcgis/map-components/components/arcgis-zoom";
|
|
57
|
+
import { ArcgisMap, ArcgisZoom } from "@arcgis/map-components-react";
|
|
58
|
+
|
|
59
|
+
const root = ReactDOM.createRoot(document.getElementById("root"));
|
|
60
|
+
root.render(
|
|
61
|
+
<React.StrictMode>
|
|
62
|
+
<ArcgisMap itemId="your-webmap-item-id"></ArcgisMap>
|
|
63
|
+
</React.StrictMode>,
|
|
64
|
+
);
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
- Add additional functionality: To your map, you could set properties and use events like `onArcgisViewReadyChange` to detect when the map view is ready, and implement custom JavaScript logic using the core API. For example, you can add the `ArcgisZoom` component and listen for view changes:
|
|
68
|
+
|
|
69
|
+
```js
|
|
70
|
+
root.render(
|
|
71
|
+
<React.StrictMode>
|
|
72
|
+
<ArcgisMap
|
|
73
|
+
itemId="your-webmap-item-id"
|
|
74
|
+
onArcgisViewReadyChange={(event: CustomEvent) => {
|
|
75
|
+
console.log("MapView ready", event);
|
|
76
|
+
}}
|
|
77
|
+
>
|
|
78
|
+
<ArcgisZoom position="top-left"></ArcgisZoom>
|
|
79
|
+
</ArcgisMap>
|
|
80
|
+
</React.StrictMode>
|
|
81
|
+
);
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Alternatively, an [example](https://github.com/Esri/jsapi-resources/tree/50579b9362b846e869a343b660c5a2415176a275/component-samples/map-components/samples/react) is available from the 4.31 release in the jsapi-resources repo.
|
|
85
|
+
|
|
28
86
|
## License
|
|
29
87
|
|
|
30
88
|
COPYRIGHT © 2025 Esri
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcgis/map-components-react",
|
|
3
|
-
"version": "4.33.0-next.
|
|
3
|
+
"version": "4.33.0-next.26",
|
|
4
4
|
"description": "A set of React components that wrap ArcGIS map components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ArcGIS",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
],
|
|
30
30
|
"license": "SEE LICENSE.md",
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@arcgis/map-components": "4.33.0-next.
|
|
33
|
-
"@esri/calcite-components": "
|
|
32
|
+
"@arcgis/map-components": "4.33.0-next.26",
|
|
33
|
+
"@esri/calcite-components": "^3.0.3",
|
|
34
34
|
"@lit/react": "^1.0.5",
|
|
35
35
|
"tslib": "^2.7.0"
|
|
36
36
|
},
|