sketch: How to select programmatically an updating graphic

571
2
Jump to solution
05-10-2021 08:25 AM
ChristopheS
New Contributor II

Hi all,

I want to use Sketch for users to update graphics on many different layers, without having to prior select layer.

I have supposed that I could programmatically achieve layer selection.

So I create a sketchObject without layer property :

const sketchObject = new Sketch({
view: view,
creationMode: "update"
});

And then on hittest of graphics click, I retrieve graphic's layer and assign it to the sketchObject.

This work fine, But I need click twice time on same graphic if I come from a different layer to have graphic selected.

What is expected is that graphic is selected at first click. It is not and I could not figure out what function would select programmatically the graphic ?

Chris, Regards

Here is the entire code:

 

 

 

 

 

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Sketch widget | Sample | ArcGIS API for JavaScript 4.19</title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <script>
      require([
        "esri/widgets/Sketch",
        "esri/Map",
        "esri/layers/GraphicsLayer",
        "esri/Graphic",
        "esri/geometry/support/webMercatorUtils",
        "esri/views/MapView"
      ], (Sketch, Map, GraphicsLayer, Graphic, webMercatorUtils, MapView) => {
        //const graphicsLayer = new GraphicsLayer();

        //-------------------------
        // GraphicsLayer to hold graphics created via sketch view model
        const graphicsLayer = new GraphicsLayer({
          id: "tempGraphics"
        });
        const graphicsLayer2 = new GraphicsLayer({
          id: "tempGraphics2"
        });

        var p1 = {
          type: "point", // autocasts as new Point()
          longitude: -121.5,
          latitude: 38.555
        };
        var p2 = {
          type: "point", // autocasts as new Point()
          longitude: -121.55,
          latitude: 38.555
        };
        var pA = {
          type: "point", // autocasts as new Point()
          longitude: -121.5,
          latitude: 38.6
        };
        var pB = {
          type: "point", // autocasts as new Point()
          longitude: -121.55,
          latitude: 38.6
        };

        var markerSymbol = {
          type: "picture-marker", // autocasts as new PictureMarkerSymbol()
          url:
            "https://daraobeirne.github.io/kisspng-drawing-pin-world-map-logo-push-vector-5ae029f6ddeaf4.198342921524640246909.png",
          width: "30px",
          height: "30px"
        };

        var pointGraphic1 = new Graphic({
          geometry: webMercatorUtils.geographicToWebMercator(p1),
          symbol: markerSymbol,
          id: "g1"
        });
        var pointGraphic2 = new Graphic({
          geometry: webMercatorUtils.geographicToWebMercator(p2),
          symbol: markerSymbol,
          id: "g2"
        });

        var pointGraphicA = new Graphic({
          geometry: webMercatorUtils.geographicToWebMercator(pA),
          symbol: markerSymbol,
          id: "gA"
        });
        var pointGraphicB = new Graphic({
          geometry: webMercatorUtils.geographicToWebMercator(pB),
          symbol: markerSymbol,
          id: "gB"
        });

        const map = new Map({
          basemap: "topo-vector",
          layers: [graphicsLayer, graphicsLayer2]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-121.5, 38.555],
          zoom: 11
        });
        var isUpdating = false;
        var mustSwitchToUpdate = true;

        view.when(() => {
          graphicsLayer.graphics.add(pointGraphic1);
          graphicsLayer.graphics.add(pointGraphic2);
          graphicsLayer2.graphics.add(pointGraphicA);
          graphicsLayer2.graphics.add(pointGraphicB);

          const sketchObject = new Sketch({
            view: view,
            creationMode: "update"
          });

          view.ui.add(sketchObject, "top-right");
          view.on("click", function(ev) {
            const opts = {
            };
            view.hitTest(ev, opts).then(function (response) {
              if (response.results.length) {
                // check if a feature is returned from the aimed layers
                const graphic = response.results[0].graphic;
                if (graphic.id == "g1" || graphic.id == "g2") {
                  sketchObject.layer = graphicsLayer;
                  sketchObject.update( graphic );
                } else if (graphic.id == "gA" || graphic.id == "gB") {
                  sketchObject.layer = graphicsLayer2;
                  sketchObject.update( graphic );
                }
              }
            });
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

 

 

 

 

 

 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

@ChristopheS this is a timing issue. Using a settimeout will fix this.

if (graphic.id == "g1" || graphic.id == "g2") {
                  sketchObject.cancel();
                  sketchObject.layer = graphicsLayer;
                  setTimeout(()=>{
                    sketchObject.update(graphic);
                  }, 400);
                } else if (graphic.id == "gA" || graphic.id == "gB") {
                  sketchObject.cancel();
                  sketchObject.layer = graphicsLayer2;
                  setTimeout(()=>{
                    sketchObject.update(graphic);
                  }, 400);
                }

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

@ChristopheS this is a timing issue. Using a settimeout will fix this.

if (graphic.id == "g1" || graphic.id == "g2") {
                  sketchObject.cancel();
                  sketchObject.layer = graphicsLayer;
                  setTimeout(()=>{
                    sketchObject.update(graphic);
                  }, 400);
                } else if (graphic.id == "gA" || graphic.id == "gB") {
                  sketchObject.cancel();
                  sketchObject.layer = graphicsLayer2;
                  setTimeout(()=>{
                    sketchObject.update(graphic);
                  }, 400);
                }
0 Kudos
ChristopheS
New Contributor II

Hi, it works fine this way, thanks a lot Robert.

Regards.

0 Kudos