When the user clicks a graphic, I want to create a temporary graphic (with the same geometry) to edit in SketchViewModel. Basically this code, using ArcGIS JavaScript API 4.10: this . sketchViewModel = new SketchViewModel ( { layer : this . tempLayer , view : this . mapView , updateOnGraphicClick : false , } ) ; this . mapView . on ( "click" , ( e ) = > { this . mapView . hitTest ( e ) . then ( ( hitTestResult : esri . HitTestResult ) = > { const hitGraphics = hitTestResult . results . filter ( x = > x . graphic . layer == this . graphicsLayer ) . map ( x = > x . graphic ) ; if ( hitGraphics . length > 0 ) { let tempGraphic = new Graphic ( { geometry : hitGraphics [ 0 ] . geometry . clone ( ) } ) ; this . tempLayer . add ( tempGraphic ) ; this . sketchViewModel . update ( [ tempGraphic ] , { tool : "transform" , enableRotation : true , enableScaling : false , toggleToolOnClick : false , } ) ; } } ) ; } ) ; However, ArcGIS gives me the following error message: "Parameter 'graphics' contains one or more graphics missing from the supplied GraphicsLayer." What am I doing wrong? I'm guessing this is a threading/timing issue that happens because hitTest() is asynchronous, but I'm not sure how to work around it.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Editing temporary Graphic in SketchViewModel

ChristianAlfons

When the user clicks a graphic, I want to create a temporary graphic (with the same geometry) to edit in SketchViewModel.

Basically this code, using ArcGIS JavaScript API 4.10:

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>sketchViewModel <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SketchViewModel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
  layer<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>tempLayer<SPAN class="punctuation token">,</SPAN>
  view<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">,</SPAN>
  updateOnGraphicClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>mapView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>mapView
    <SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitTest</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN>
    <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>hitTestResult<SPAN class="punctuation token">:</SPAN> esri<SPAN class="punctuation token">.</SPAN>HitTestResult<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">const</SPAN> hitGraphics <SPAN class="operator token">=</SPAN> hitTestResult<SPAN class="punctuation token">.</SPAN>results
        <SPAN class="punctuation token">.</SPAN><SPAN class="token function">filter</SPAN><SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> x<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>layer <SPAN class="operator token">==</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>graphicsLayer<SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> x<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      
      <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>hitGraphics<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">let</SPAN> tempGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> geometry<SPAN class="punctuation token">:</SPAN> hitGraphics<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>tempLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>tempGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">update</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>tempGraphic<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
            tool<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"transform"</SPAN><SPAN class="punctuation token">,</SPAN>
            enableRotation<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
            enableScaling<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
            toggleToolOnClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

However, ArcGIS gives me the following error message:

"Parameter 'graphics' contains one or more graphics missing from the supplied GraphicsLayer."

What am I doing wrong? I'm guessing this is a threading/timing issue that happens because hitTest() is asynchronous, but I'm not sure how to work around it.

Find more posts tagged with

Accepted answers

All comments

RobertScheitlin__GISP

Christian,

The SketchViewModel does not applyEdits to the FeatureService by itself if that is what you are concerned about. In this sample you can do validation before you allow the edit to even be committed to graphics.

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=sketch-update-validation

The error is telling you the issue you are attempting to clone the graphic and add it to the tempLayer after the model is initialized and because this is a new graphic that the model did not create and was not there when the model was initialized it throws that error.

ChristianAlfons

I tried this approach to address two problems, the first being SketchViewModel overriding the symbol of the graphic being edited. I found a way to deal with this in the update callback, but it failed when I introduced custom symbol scaling. Perhaps I could tweak the code to make it work, but I wanted to ask here first. The second thing I wanted to accomplish was to have two symbols for the polygon being edited; both its original PictureMarkerSymbol and the polygon outline, which I could accomplish by introducing an additional graphic temporarily.

I see what you're saying. Could I then re-create the SketchViewModel each time a graphic is clicked, after the temporary graphic has been added?

RobertScheitlin__GISP

Could I then re-create the SketchViewModel each time a graphic is clicked, after the temporary graphic has been added?

I don't see an issue with that.

UndralBatsukh

Hi there,

This is a known issue at 4.10 and it will be fixed in 4.11. The issue is in GraphicsLayer.graphics setter... the graphic.layer is not assigned synchronously.

At, 4.10, you can workaround the issue by setting the layer's graphics array directly or wrapping the sketchViewModel.update in setTimeOut.

graphicsLayer.graphics = [editGraphic];<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Check out this sample for simple working workaround for this issue.

Hope this helps,

-Undral

JORGETORO

This issue doesn't appear to be fixed in 4.11. I tried it and it is still giving me the same error. Also, the setTimeout() workaround doesn't work anymore either.

I have this code and it works fine in 4.10... it doesn't work in 4.11

graphicsLayer.graphics = [graphic];

setTimeout(() => {

sketchViewModel.update({

tool: 'transform',

graphics: [graphic]

});

}, 100);

JORGETORO

Actually, I take it back, it is fixed... this is my new code in 4.11 and it works!

graphicsLayer.graphics = [graphic];

sketchViewModel.update([graphic]);

UndralBatsukh

Hi there,

Can you please post a reproducible test case? I updated this test case to use the code snippet provided and it is working as expected.

JORGETORO

Undral,

Thanks for the quick reply. I realized the call to sketchViewModel.update also changed from 4.10 to 4.11. After I changed the parameters to match the signature of the function (array of graphics first, options next), everything worked. In 4.10 you could put the graphics array inside the options object and it would work, but in 4.11 it doesn't seem to be the case (which is fine). See the brief post I added right before yours.

Thanks!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.