topic Re: How to hide a sketch widget on an Esri Map? in ArcGIS JavaScript Maps SDK Questions

How to hide a sketch widget on an Esri Map?

SiyabongaKubeka — Thu, 02 Jul 2020 07:00:59 GMT

Hi All

I have a map that has a sketch widget. Now I want to hide that sketch widget if a certain variable contains data and only show the map. But if that certain variable is null or empty I want the map to show the sketch widget. I am using JavaScript. I hope this question does make sense. Please advise.

Kind Regards

Siyabonga Kubeka

Re: How to hide a sketch widget on an Esri Map?

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:23:18 GMT

Here is a sample that shows that:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Basic Querying in FeatureLayer - 4.15</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      #optionsDiv {
        background-color: white;
        color: black;
        padding: 6px;
        max-width: 400px;
      }
    </style>
    <script>
      require([
        "esri/widgets/Sketch",
        "esri/Map",
        "esri/Graphic",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer"
      ], function(Sketch, Map, Graphic, MapView, FeatureLayer, GraphicsLayer) {
        // Crime in SF
        var layer = new FeatureLayer({
          // autocasts as new PortalItem()
          portalItem: {
            id: "234d2e3f6f554e0e84757662469c26d3"
          },
          outFields: ["*"]
        });

        const layer2 = new GraphicsLayer();

        var map = new Map({
          basemap: "gray",
          layers: [layer, layer2]
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          popup: {
            autoOpenEnabled: false,
            dockEnabled: true,
            dockOptions: {
              // dock popup at bottom-right side of view
              buttonEnabled: false,
              breakpoint: false,
              position: "bottom-right"
            }
          }
        });

        const sketch = new Sketch({
          layer: layer2,
          view: view,
          creationMode: "update"
        });

        view.ui.add("optionsDiv", "top-right");
        view.ui.add(sketch, "top-right");

        //create graphic for mouse point click
        var pointGraphic = new Graphic({
          symbol: {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            color: [0, 0, 139],
            outline: {
              color: [255, 255, 255],
              width: 1.5
            }
          }
        });

        layer.load().then(function() {
          // Set the view extent to the data extent
          view.extent = layer.fullExtent;
          layer.popupTemplate = layer.createPopupTemplate();
        });

        view.on("click", function(event) {
          view.graphics.remove(pointGraphic);
          queryFeatures(event);
        });

        function queryFeatures(screenPoint) {
          const point = view.toMap(screenPoint);
          layer
            .queryFeatures({
              geometry: point,
              spatialRelationship: "intersects",
              returnGeometry: false,
              outFields: ["*"]
            })
            .then(function(featureSet) {
              // set graphic location to mouse pointer and add to mapview
              pointGraphic.geometry = point;
              view.graphics.add(pointGraphic);
              if(featureSet.features[0].attributes.Point_Count < 150){
                if(view.ui.find(sketch.id)){
                  view.ui.remove(sketch);
                }
              }else{
                if(!view.ui.find(sketch.id)){
                  view.ui.add(sketch, "top-right");
                }
              }
            });
        }
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <div id="optionsDiv" class="esri-widget">
      <p>
        click a point on the map. If the point count is less than 150 the Sketch will be hidden.
      </p>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to hide a sketch widget on an Esri Map?

Egge-Jan_Pollé — Sun, 12 Dec 2021 03:23:21 GMT

Hi Siyabonga Kubeka,

You can add a widget to a view with view.ui.add(). Similarly you can remove this same widget, to effectively hide it, with view.ui.remove(). So, with an if - else statement you can accomplish what you want.

Please have a look at this example with a similar use case which I have published recently on GeoNet: https://community.esri.com/people/EPolle_TensingInternational/blog/2020/06/14/arcgis-javascript-tutorial-watchutils-only-add-compass-widget-when-needed

With the Compass widget you can reset the compass orientation to 0 (i.e. with north at the top of the view). But you really only need this widget when the map is rotated, which most often is not the case. So, by checking the rotation of the view I decide to either show (add) or hide (remove) the Compass widget:

watchUtils.whenTrue(view, "stationary", function() {
  if (view.rotation == 0){
    view.ui.remove(compassWidget);
  } else {
    view.ui.add(compassWidget, "top-left");
  }
})‍‍‍‍‍‍‍

(Full code in the blog post mentioned above)

In this example the view starts wit a rotation of 45 degrees, so the Compass widget is shown.
The moment you click the button, the view rotation is reset to exactly 0, and the button (magically :-)) disappears from the screen.
Now you can grab the map (right-click + drag with the mouse) to rotate it and aww there it is again!
Back to step 2, and so on

Is this useful to you?

Cheers,

Egge-Jan

Re: How to hide a sketch widget on an Esri Map?

SiyabongaKubeka — Sat, 04 Jul 2020 09:25:44 GMT

Hi Robert,

Thank you very much. It worked.

Re: How to hide a sketch widget on an Esri Map?

SiyabongaKubeka — Sat, 04 Jul 2020 09:29:32 GMT

Hi Egge-Jan Polle

Thank you very much.

Re: How to hide a sketch widget on an Esri Map?

Egge-Jan_Pollé — Sat, 04 Jul 2020 13:30:24 GMT

Hi Siyabonga Kubeka,

If you think your question has been answered you can close it by marking one of the answers as the correct one. Either the answer given by me or the one given by Robert Scheitlin, GISP‌, depending on which was most useful to you. In this way it will be clear to other users of this forum with the same question that they can find their answer here.

Cheers,

Egge-Jan