Get started with the map components React template
For more information, visit web components via npm
Each component package offers an additional React-friendly package. The React version of a component package is the recommended way to use web components in a React application. The benefit of this approach is that custom events emitted by the web components will work with React's synthetic event system, PascalCase instead of kebab-case elements, and in TypeScript, you will have increased type safety for event listeners, props, etc. In the case of @arcgis/map-components, you'd want to use @arcgis/map-components-react.
Lazy loading components
When using this approach to load components, you'll need to manually define the custom elements on the window. You can also choose between ArcGIS CDN hosted assets (preferred) or local assets. Since you manually defined the custom elements on the window, you only need to import the individual components from map-components-react.
import React from "react";
import ReactDOM from "react-dom/client";
import { ArcgisMap, ArcgisSearch, ArcgisLegend } from "@arcgis/map-components-react";
// import defineCustomElements to register custom elements with the custom elements registry
import { defineCustomElements as defineMapElements } from "@arcgis/map-components/dist/loader";
// Register custom elements
defineMapElements(window, {
resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets",
});
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<React.StrictMode>
<ArcgisMap
itemId="d5dda743788a4b0688fe48f43ae7beb9"
onArcgisViewReadyChange={(event: any) => {
console.log('MapView ready', event);
}}
>
<ArcgisSearch position="top-right"></ArcgisSearch>
<ArcgisLegend position="bottom-left"></ArcgisLegend>
</ArcgisMap>
</React.StrictMode>
);Individually loading components
To use this approach to load components, you will need to set the path to the map-components assets. Next, you need to import each component you use from the standard map-component package. This will automatically define the custom elements on the window. Then, import the same components from map-components-react.
import React from "react";
import ReactDOM from "react-dom/client";
import { setAssetPath } from "@arcgis/map-components/dist/components";
import "@arcgis/map-components/dist/arcgis-map";
import "@arcgis/map-components/dist/arcgis-search";
import "@arcgis/map-components/dist/arcgis-legend";
import { ArcgisMap, ArcgisSearch, ArcgisLegend } from "@arcgis/map-components-react";
// Local assets
setAssetPath();
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<React.StrictMode>
<ArcgisMap
itemId="d5dda743788a4b0688fe48f43ae7beb9"
onArcgisViewReadyChange={(event: any) => {
console.log('MapView ready', event);
}}
>
<ArcgisSearch position="top-right"></ArcgisSearch>
<ArcgisLegend position="bottom-left"></ArcgisLegend>
</ArcgisMap>
</React.StrictMode>
);