Select to view content in your preferred language

How to disable sketch/graphics editing or selection

1862
4
Jump to solution
06-28-2022 07:52 PM
MichelMorgan
New Contributor

I am new to ArcGIS API for JS, and JS in general, but so far I like the API quite a lot.

I'm building a webpage with two sketches. Each sketch contains graphics. Sketch 1 is for user to input and interact. Sketch 2 is for results. So far everything is running normally in the script, but ...

I am looking for a way to disable the editing of Sketch 2 (or make it non-selectable) , but not sure what flags I should turn off. My snippet is below, and thanks for the advice

 

const graphlayer1 = new GraphicsLayer();
const graphlayer2 = new GraphicsLayer();

const map = new Map({
    basemap: "satellite",
    layers: [graphlayer1 ,graphlayer2 ]
});

const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 18,
    center: [-114.000,51.000]
});

const sketch1 = new Sketch({
    layer: graphlayer1,
    view: view,
    availableCreateTools:["point", "polyline", "polygon"],

    creationMode: "update",
});

// Need to make the following a display only container. Its contents will be updated in the code
const sketch2 = new Sketch({
    layer: graphlayer2,
    view: view,
    availableCreateTools:[],

    creationMode: "update"
});

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

0 Kudos
1 Solution

Accepted Solutions
ShefaliMantri
Regular Contributor

Hello @MichelMorgan ,

To disable scale, rotation and move, try by adding below properties

"defaultUpdateOptions": {
        "enableRotation": false,
        "enableScaling": false,
        "enableZ": false,
        "multipleSelectionEnabled": false,
        "toggleToolOnClick": false
      }
 
And add below event
 
sketchView.on("update"function (event) {
      const eventInfo = event.toolEventInfo;
      if (eventInfo && eventInfo.type.includes("move")) {
        sketchView.cancel();
      }
    });
 
 

View solution in original post

4 Replies
ShefaliMantri
Regular Contributor

Hello @MichelMorgan ,

To disable scale, rotation and move, try by adding below properties

"defaultUpdateOptions": {
        "enableRotation": false,
        "enableScaling": false,
        "enableZ": false,
        "multipleSelectionEnabled": false,
        "toggleToolOnClick": false
      }
 
And add below event
 
sketchView.on("update"function (event) {
      const eventInfo = event.toolEventInfo;
      if (eventInfo && eventInfo.type.includes("move")) {
        sketchView.cancel();
      }
    });
 
 
MichelMorgan
New Contributor

That did the job. Thanks!

0 Kudos
Kathrynb95
Emerging Contributor

Is there a way to turn off the ability to select a graphic at all once it's been drawn?

TravisNolen
Emerging Contributor

Hello Kathrynb95.  Did you ever find a way to do this?

0 Kudos