topic Sketch change selection color in ArcGIS JavaScript Maps SDK Questions

Sketch change selection color

JacobRothenberger — Fri, 25 Jun 2021 20:55:21 GMT

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!

Re: Sketch change selection color

RobertScheitlin__GISP — Fri, 25 Jun 2021 21:08:22 GMT

@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]; } })

Re: Sketch change selection color

JacobRothenberger — Sat, 26 Jun 2021 03:23:31 GMT

@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