nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to set the visibility of an arcgis-sketch component

Flookfinders

With the old sketch widgit there was a visible property which I could use to hide the widgit on the map so it was not showing when I did not want users to see it.

I am converting my code to use the new windows components and I cannot see the equivalent property on the component.

So how can I set the visibility of the arcgis-sketch component within my code so that it is only displayed when I need it to be?

Find more posts tagged with

Accepted answers

Flookfinders

After a lot of playing around I have finally managed to get this working correctly in my React app.

My issue with the information given was that after calling arcgisSketch.remove() when I then tried to use the variable arcgisSketch later in my code to show the component on the map again the variable was always null so nothing was displayed. I had to set a ref constant to hold the sketch tool i.e.

const arcgisSketch = useRef(null);

Then in the arcgis-map component I had to define a view-ready event and in that I set the arcgisSketch variable i.e.

arcgisSketch.current = arcgisMap.querySelector('arcgis-sketch');

Then I was able to use arcgisSketch.remove() and arcgisMap.append(arcgisSketch) in my code successfully.

All comments

UndralBatsukh

Hi there,

To hide a component, you remove the component by calling remove method on the html element. To show the component again, simply append the element back to the map component.

For the visibility toggle to work properly, ensure the auto-destroy-disabled attribute is set on the component.

You can see an example of toggling a component visibility in this codepen - https://codepen.io/U_B_U/pen/zxYbZda?editors=1000

Hope this helps,

- Undral

Flookfinders

@UndralBatsukh Thanks for the response but this is not working in my situation. I have a React application and the Sketch tool needs to be hidden and revealed depending on various different actions by the user in other parts of the application that are not related directly to the Map. After calling the remove method my stored variable is set to null and then when I am trying to set up other things with the sketch tool my code fails as it no longer has the sketch tool present. This was working fine with the widgit when there was a visible property. So I am basically looking for something in this new component to replicate the exact functionality of the visible property of the widgit version.

Flookfinders

After a lot of playing around I have finally managed to get this working correctly in my React app.

const arcgisSketch = useRef(null);

Then in the arcgis-map component I had to define a view-ready event and in that I set the arcgisSketch variable i.e.

arcgisSketch.current = arcgisMap.querySelector('arcgis-sketch');

Then I was able to use arcgisSketch.remove() and arcgisMap.append(arcgisSketch) in my code successfully.

UndralBatsukh

Grrr! I am sorry! I thought I replied but this fell through the cracks. I am glad you were able to figure it out. I mean to post the following code snippet.

import "@arcgis/map-components/components/arcgis-map";
import "@arcgis/map-components/components/arcgis-legend";
import "@arcgis/map-components/components/arcgis-search";
import "@arcgis/map-components/components/arcgis-expand";
import "@arcgis/map-components/components/arcgis-sketch";
import "@arcgis/map-components/components/arcgis-placement";

import { useEffect, useRef, useState } from "react";

export function App() {
  const mapRef = useRef(null);
  const [showSketch, setShowSketch] = useState(true);

  useEffect(() => {
    if (!mapRef.current) return;

    if (!showSketch) {
      mapRef.current.querySelector(".esri-sketch")?.classList.add("hidden");
    } else {
      mapRef.current.querySelector(".esri-sketch")?.classList.remove("hidden");
    }
  }, [showSketch, mapRef]);

  return (
    <arcgis-map
      ref={mapRef}
      itemId="d5dda743788a4b0688fe48f43ae7beb9"
      onarcgisViewReadyChange={(event) => {
        console.log("MapView ready", event);
      }}
    >
      <arcgis-search position="top-right"></arcgis-search>
      <arcgis-legend position="bottom-left"></arcgis-legend>

      <arcgis-sketch position="top-left" auto-destroy-disabled></arcgis-sketch>

      <arcgis-placement position="bottom-right">
        <calcite-button onClick={() => setShowSketch(!showSketch)}>Toggle Sketch</calcite-button>
      </arcgis-placement>
    </arcgis-map>
  );
}

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.