sketch: How to select programmatically an updating graphic

ChristopheS — Mon, 10 May 2021 15:27:37 GMT

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>

Re: sketch: How to select programmatically an updating graphic

RobertScheitlin__GISP — Wed, 12 May 2021 16:29:59 GMT

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

Re: sketch: How to select programmatically an updating graphic

ChristopheS — Fri, 14 May 2021 07:46:34 GMT

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

Regards.

topic sketch: How to select programmatically an updating graphic in ArcGIS JavaScript Maps SDK Questions

sketch: How to select programmatically an updating graphic

Re: sketch: How to select programmatically an updating graphic

Re: sketch: How to select programmatically an updating graphic