How display map tools with @arcgis/map-components-react

[IrynaBabych]

Map tools do not displayed when using mapRef.

const mapRef = useRef<HTMLArcgisMapElement>(null);
const graphicLayer = new GraphicsLayer();

const generateWebMap = async (map: MapType) => {
  const mapEl = mapRef.current;
  const webMap = await getWebMap(map.mapId);

  if (webMap && mapEl) {
    const mapView = new MapView({
      map: webMap,
      zoom: config.Zoom,
      container: mapEl,
    });

    const sketch = new Sketch({
      layer: graphicLayer,
      view: mapView,
      visibleElements: sketchVisibleElements,
    });

    setMapView(mapView);
    setSketch(sketch);

    sketch.on('create', handleSketchCreateAction);
    sketch.on('update', handleSketchUpdateAction);

    if (creationLayer) {
      sketch.on('delete', handleSketchDeleteAction);
    }
  }
};

useEffect(() => {
const actualMapFromProject = maps?.[0];
if (mapRef?.current && actualMapFromProject) generateWebMap(actualMapFromProject);
}, []);

<div css={styles.wrapper(isWebMapOpen || isChildTab)}>
    <ArcgisMap ref={mapRef}>
      <ArcgisEditor />
    </ArcgisMap>
  }
</div>

[ReneRubalcava]

If you can provide a github repo showing the issue, might be able to help. From your snippet, I'm not sure why you're creating a new MapView and using components, it should be one or the other.

If you use React 19, you don't need the map-components-react package.

Here is a React 19 sample

https://github.com/Esri/jsapi-resources/tree/main/component-samples/map-components/samples/react

[Noah-Sager]

Hi @IrynaBabych, there's an easier way to work with components, here's an example using Sketch:

<arcgis-map basemap="topo-vector" center="139.5716,35.696" zoom="18">
<arcgis-sketch position="top-right" creation-mode="update"> </arcgis-sketch>
</arcgis-map>

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=sketch