Sketch change selection color

1854
2
Jump to solution
06-25-2021 01:55 PM
JacobRothenberger
New Contributor

Is there currently any way to modify the color of the orange selection outline in the ArcGIS 4.x Sketch tool?

See the basic Sketch sample here: https://developers.arcgis.com/javascript/latest/sample-code/sketch-geometries/.  Notice when dropping a point on the map, or selecting an existing point, an orange outline surrounds the point you are editing. Inspection into the ES Modules (@arcgis/core/widgets/Sketch/SketchViewModel.js) shows that this orange outline is defined as a symbol on a clone of the user's placed graphic, and that clone is placed into an internal graphics layer defined by the sketch view.

I have tried to find and manipulate this internal layer by iterating through my MapView's .allLayerViews, but this method has shown to be very hacky (and I cannot get the symbology to render correctly on creation of a graphic, only on update).

Thanks in advance for any help that can be offered!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

@JacobRothenberger  There is no way currently (besides the hacky way) to change the selection color. Here is what I put in the SketchViewModels on update method to change the selection graphics color for a polygon (changing the outline color and the vertex symbol outline color):

sketchViewModel._internalGraphicsLayer.graphics.map(function(gra){
          if(gra.geometry.type === 'polygon'){
            gra.symbol.outline.color = [0,0,0,0];
          }
          if(gra.geometry.type === 'point'){
            gra.symbol.outline.color = [168,168,168,1];
          }
        })

 

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

@JacobRothenberger  There is no way currently (besides the hacky way) to change the selection color. Here is what I put in the SketchViewModels on update method to change the selection graphics color for a polygon (changing the outline color and the vertex symbol outline color):

sketchViewModel._internalGraphicsLayer.graphics.map(function(gra){
          if(gra.geometry.type === 'polygon'){
            gra.symbol.outline.color = [0,0,0,0];
          }
          if(gra.geometry.type === 'point'){
            gra.symbol.outline.color = [168,168,168,1];
          }
        })

 

JacobRothenberger
New Contributor

@RobertScheitlin__GISP, thank you so much! This solution is much less hacky than the path I was headed down. Here is my implementation, based on your solution above, using a Sketch widget and ES modules.

// Sketch listener for the update event
this.sketchWidget.on("update", (event) => {
  if(event.state === "start") {
    (this.sketchWidget.viewModel.get("_internalGraphicsLayer") as GraphicsLayer).graphics.map( (graphic) => {
      if(graphic.geometry.type === "point") {
        (graphic.symbol as SimpleMarkerSymbol).outline.color = new Color([255, 0, 0, 1]);
      }
    });
  }
});

 

I've also loaded your solution into this sample here: https://codepen.io/Th3An0maly/pen/oNWvgba

0 Kudos