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.
