CalciteActionBar React Component not loading properly along an ArcGISMap Component

KaterynaM — Fri, 30 Jun 2023 21:07:32 GMT

I am trying to display a map with a CalciteActionBar on the left side of the screen using React Calcite Components and refs to an ArcGISMap component. When I forgo using Calcite components altogether and simply render the mapDiv, the map loads correctly. However, once I start adding a CalciteShell, CalciteShellPanel, and CalciteActionBar with CalciteActions inside, all of the resulting html elements end up with a size of 0x0, regardless of the CSS I have attempted to add. This happens whether I place the mapDiv div inside any of the CalciteComponents or outside of them entirely. I have gone through many different iterations based on different frameworks for combining React and Calcite that I've seen, to no avail. I would appreciate any advice on this.

App.jsx:

import React, { useRef, useEffect } from "react"; import MapView from "@arcgis/core/views/MapView"; import ArcGISMap from "@arcgis/core/Map"; import { CalciteShell, CalciteShellPanel, CalciteActionBar, CalciteAction } from '@esri/calcite-components-react'; import "./App.css"; function App() { const mapDiv = useRef(null); useEffect(() => { if (mapDiv.current) { /** * Initialize application */ const webmap = new ArcGISMap({ basemap: "topo-vector", }); const view = new MapView({ container: mapDiv.current, map: webmap, center: [-74.5, 40], zoom: 9 }); } }, []); return ( <div className="appContent"> <CalciteShell id="mainCalciteShell"> <CalciteShellPanel width-scale="1" slot="panel-start" position="start" id="left-shell-panel" displayMode="dock"> <CalciteActionBar slot="action-bar"> <CalciteAction data-action-id="home" icon="home" text="Reset" textEnabled={true} ></CalciteAction> <CalciteAction data-action-id="legend" icon="legend" text="Legend" textEnabled={true} label="Legend" ></CalciteAction> </CalciteActionBar> <div className="mapDiv" ref={mapDiv}></div> </CalciteShellPanel> </CalciteShell> </div> ); } export default App;

Relevant libraries:

"@arcgis/core": "~4.27.0", "@esri/calcite-components-react": "^1.4.2", "react": "^18.2.0",

Design Frameworks that I used as resources:

jsapi-resources/esm-samples/jsapi-react at main · Esri/jsapi-resources · GitHub (upon which this code snippet is based)

calcite-components-examples/react at master · Esri/calcite-components-examples · GitHub

coryeicher/react-calcite-viewer (github.com)

Note: I tried creating a codesandbox to show this error, but I kept getting a stack overflow error that I did not get by running the same code on VSCode.

Re: CalciteActionBar React Component not loading properly along an ArcGISMap Component

KittyHurley — Fri, 07 Jul 2023 20:34:06 GMT

Hello @KaterynaM, depending on the setup there could have been a conflict between the two implementations of the Maps SDK for JS and Calcite.

The following is an example setup with Maps SDK for JS, Calcite, React, and Vite to get started - and the GitHub repository for full context.

Calcite and the Maps SDK teams is working towards additional documentation and resources in the coming weeks.

Re: CalciteActionBar React Component not loading properly along an ArcGISMap Component

KaterynaM — Mon, 17 Jul 2023 19:56:13 GMT

Thanks, Kitty! This is incredibly helpful, and I look forward to exploring the documentation in the future 🙂

topic Re: CalciteActionBar React Component not loading properly along an ArcGISMap Component in Calcite Design System Questions

CalciteActionBar React Component not loading properly along an ArcGISMap Component

Re: CalciteActionBar React Component not loading properly along an ArcGISMap Component

Re: CalciteActionBar React Component not loading properly along an ArcGISMap Component