I want to combine the SketchViewModel for sketching temporary geometries with the GeometryEngine to show a buffer around the graphic as it's being drawn. I can't figure out how to listen for create sketch in order to generate the buffer on mousemove.
Blake,
I am not sure the source of those errors but I have confirmed through debugging that you mouse move event listerner is being removed.
That's what I'm doing. However, when drawing a line I get three console errors and five console errors on polygons; something like:
[esri.views.input.InputManager] There is no InputHandler group registered under the name `viewEvents_13`
Point sketches don't seem to have the error.
You have a variable assigned to that event so you just need to call
viewPointerMoveEvent.remove();
So here's what I came up with so far based on the new 4.7 sketch example.
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Sketch temporary geometries <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.7</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.7%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.7/esri/css/main.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.7%2F" target="_blank">https://js.arcgis.com/4.7/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN> html<SPAN class="punctuation token">,</SPAN> body<SPAN class="punctuation token">,</SPAN> #viewDiv <SPAN class="punctuation token">{</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> font<SPAN class="operator token">-</SPAN>family<SPAN class="punctuation token">:</SPAN> verdana<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> #topbar <SPAN class="punctuation token">{</SPAN> background<SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN> position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN> top<SPAN class="punctuation token">:</SPAN> 15px<SPAN class="punctuation token">;</SPAN> right<SPAN class="punctuation token">:</SPAN> 15px<SPAN class="punctuation token">;</SPAN> padding<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>action<SPAN class="operator token">-</SPAN>button <SPAN class="punctuation token">{</SPAN> font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> 16px<SPAN class="punctuation token">;</SPAN> background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> transparent<SPAN class="punctuation token">;</SPAN> border<SPAN class="punctuation token">:</SPAN> 1px solid #D3D3D3<SPAN class="punctuation token">;</SPAN> color<SPAN class="punctuation token">:</SPAN> #6e6e6e<SPAN class="punctuation token">;</SPAN> height<SPAN class="punctuation token">:</SPAN> 32px<SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> 32px<SPAN class="punctuation token">;</SPAN> text<SPAN class="operator token">-</SPAN>align<SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN> box<SPAN class="operator token">-</SPAN>shadow<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="number token">0</SPAN> 1px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>action<SPAN class="operator token">-</SPAN>button<SPAN class="punctuation token">:</SPAN>hover<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN>action<SPAN class="operator token">-</SPAN>button<SPAN class="punctuation token">:</SPAN>focus <SPAN class="punctuation token">{</SPAN> background<SPAN class="punctuation token">:</SPAN> #0079c1<SPAN class="punctuation token">;</SPAN> color<SPAN class="punctuation token">:</SPAN> #e4e4e4<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>active <SPAN class="punctuation token">{</SPAN> background<SPAN class="punctuation token">:</SPAN> #0079c1<SPAN class="punctuation token">;</SPAN> color<SPAN class="punctuation token">:</SPAN> #e4e4e4<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'esri/geometry/geometryEngine'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Sketch/SketchViewModel"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN> MapView<SPAN class="punctuation token">,</SPAN> Map<SPAN class="punctuation token">,</SPAN> geometryEngine<SPAN class="punctuation token">,</SPAN> SketchViewModel<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> GraphicsLayer <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// GraphicsLayers to hold graphics created via sketch view model</SPAN> <SPAN class="keyword token">var</SPAN> tempGraphicsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> bufferGraphicsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Other global vars</SPAN> <SPAN class="keyword token">var</SPAN> updateGraphic<SPAN class="punctuation token">,</SPAN> sketchStartEvent<SPAN class="punctuation token">,</SPAN> viewPointerMoveEvent<SPAN class="punctuation token">,</SPAN> bufferGraphic<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> bufferDistance <SPAN class="operator token">=</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> unit <SPAN class="operator token">=</SPAN> <SPAN class="string token">'kilometers'</SPAN> <SPAN class="keyword token">var</SPAN> unionResults <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Arctic Ocean Basemap</SPAN> <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray"</SPAN><SPAN class="punctuation token">,</SPAN> layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>tempGraphicsLayer<SPAN class="punctuation token">,</SPAN> bufferGraphicsLayer<SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN> zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> pointSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// symbol used for points</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-marker"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleMarkerSymbol()</SPAN> style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"square"</SPAN><SPAN class="punctuation token">,</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#8A2BE2"</SPAN><SPAN class="punctuation token">,</SPAN> size<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"16px"</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as new SimpleLineSymbol()</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3</SPAN> <SPAN class="comment token">// points</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">var</SPAN> polylineSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// symbol used for polylines</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleLineSymbol()</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#8A2BE2"</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"4"</SPAN><SPAN class="punctuation token">,</SPAN> style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"dash"</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">var</SPAN> polygonSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// symbol used for polygons</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleFillSymbol()</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"rgba(138,43,226, 0.8)"</SPAN><SPAN class="punctuation token">,</SPAN> style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"white"</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// create a new sketch view model</SPAN> <SPAN class="keyword token">var</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> view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN> layer<SPAN class="punctuation token">:</SPAN> tempGraphicsLayer<SPAN class="punctuation token">,</SPAN> pointSymbol<SPAN class="punctuation token">:</SPAN> pointSymbol<SPAN class="punctuation token">,</SPAN> polylineSymbol<SPAN class="punctuation token">:</SPAN> polylineSymbol<SPAN class="punctuation token">,</SPAN> polygonSymbol<SPAN class="punctuation token">:</SPAN> polygonSymbol <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setUpClickHandler</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// ************************************************************</SPAN> <SPAN class="comment token">// Get the completed graphic from the event and add it to view.</SPAN> <SPAN class="comment token">// This event fires when user presses</SPAN> <SPAN class="comment token">// * "C" key to finish sketching point, polygon or polyline.</SPAN> <SPAN class="comment token">// * Double-clicks to finish sketching polyline or polygon.</SPAN> <SPAN class="comment token">// * Clicks to finish sketching a point geometry.</SPAN> <SPAN class="comment token">// ***********************************************************</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"draw-complete"</SPAN><SPAN class="punctuation token">,</SPAN> addGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-complete"</SPAN><SPAN class="punctuation token">,</SPAN> addGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-cancel"</SPAN><SPAN class="punctuation token">,</SPAN> addGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">addGraphic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> viewPointerMoveEvent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> geometry <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> symbol<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Choose a valid symbol based on return geometry</SPAN> <SPAN class="keyword token">switch</SPAN> <SPAN class="punctuation token">(</SPAN>geometry<SPAN class="punctuation token">.</SPAN>type<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">:</SPAN> symbol <SPAN class="operator token">=</SPAN> pointSymbol<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"polyline"</SPAN><SPAN class="punctuation token">:</SPAN> symbol <SPAN class="operator token">=</SPAN> polylineSymbol<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">default</SPAN><SPAN class="punctuation token">:</SPAN> symbol <SPAN class="operator token">=</SPAN> polygonSymbol<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">// Create a new graphic; add it to the GraphicsLayer</SPAN> <SPAN class="keyword token">var</SPAN> graphic <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> geometry<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> symbol <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> tempGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Recreate buffer with final sketch geometry.</SPAN> <SPAN class="comment token">// The live buffer displayed before the sketch is complete can be</SPAN> <SPAN class="comment token">// offset from the graphic if it was created while the map was</SPAN> <SPAN class="comment token">// moving or redrawing.</SPAN> <SPAN class="token function">generateBufferGraphic</SPAN><SPAN class="punctuation token">(</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Move buffer graphic from bufferGraphicsLayer to tempGraphicsLayer</SPAN> <SPAN class="comment token">// so it persists with the temp graphic.</SPAN> <SPAN class="comment token">// Generate new point buffer from the final sketch geometry.</SPAN> tempGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>bufferGraphicsLayer<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN>items<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> bufferGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Remove stored reference to the updated graphic</SPAN> <SPAN class="comment token">// Required in 'update-complete' callback specifically</SPAN> updateGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Reset sketch GraphicsLayer so the sketch event on</SPAN> <SPAN class="comment token">// draw-start is cleared out for the next sketch</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">reset</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">// *************************************</SPAN> <SPAN class="comment token">// activate the sketch to create a point</SPAN> <SPAN class="comment token">// *************************************</SPAN> <SPAN class="keyword token">var</SPAN> drawPointButton <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"pointButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> drawPointButton<SPAN class="punctuation token">.</SPAN>onclick <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// set the sketch to create a point geometry</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setActiveButton</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// ****************************************</SPAN> <SPAN class="comment token">// activate the sketch to create a polyline</SPAN> <SPAN class="comment token">// ****************************************</SPAN> <SPAN class="keyword token">var</SPAN> drawLineButton <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"polylineButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> drawLineButton<SPAN class="punctuation token">.</SPAN>onclick <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// set the sketch to create a polyline geometry</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"polyline"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setActiveButton</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// ***************************************</SPAN> <SPAN class="comment token">// activate the sketch to create a polygon</SPAN> <SPAN class="comment token">// ***************************************</SPAN> <SPAN class="keyword token">var</SPAN> drawPolygonButton <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"polygonButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> drawPolygonButton<SPAN class="punctuation token">.</SPAN>onclick <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// set the sketch to create a polygon geometry</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"polygon"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setActiveButton</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// ***************************************</SPAN> <SPAN class="comment token">// activate the sketch to create a rectangle</SPAN> <SPAN class="comment token">// ***************************************</SPAN> <SPAN class="keyword token">var</SPAN> drawRectangleButton <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">"rectangleButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> drawRectangleButton<SPAN class="punctuation token">.</SPAN>onclick <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// set the sketch to create a polygon geometry</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"rectangle"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setActiveButton</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// ***************************************</SPAN> <SPAN class="comment token">// activate the sketch to create a circle</SPAN> <SPAN class="comment token">// ***************************************</SPAN> <SPAN class="keyword token">var</SPAN> drawCircleButton <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"circleButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> drawCircleButton<SPAN class="punctuation token">.</SPAN>onclick <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// set the sketch to create a polygon geometry</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"circle"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setActiveButton</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// **************</SPAN> <SPAN class="comment token">// reset button</SPAN> <SPAN class="comment token">// **************</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"resetBtn"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>onclick <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">reset</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> tempGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> bufferGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setActiveButton</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">function</SPAN> <SPAN class="token function">setActiveButton</SPAN><SPAN class="punctuation token">(</SPAN>selectedButton<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// focus the view to activate keyboard shortcuts for sketching</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">focus</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> elements <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementsByClassName</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"active"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> elements<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> elements<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>classList<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"active"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>selectedButton<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> selectedButton<SPAN class="punctuation token">.</SPAN>classList<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"active"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">// ************************************************************************************</SPAN> <SPAN class="comment token">// set up logic to handle geometry update and reflect the update on "tempGraphicsLayer"</SPAN> <SPAN class="comment token">// ************************************************************************************</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">setUpClickHandler</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> view<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="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitTest</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> results <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Found a valid graphic</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">&&</SPAN> results<SPAN class="punctuation token">[</SPAN>results<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Check if we're already editing a graphic</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>updateGraphic<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Save a reference to the graphic we intend to update</SPAN> updateGraphic <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">[</SPAN>results<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Remove the graphic from the GraphicsLayer</SPAN> <SPAN class="comment token">// Sketch will handle displaying the graphic while being updated</SPAN> tempGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>updateGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">update</SPAN><SPAN class="punctuation token">(</SPAN>updateGraphic<SPAN class="punctuation token">.</SPAN>geometry<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="comment token">// **************************************</SPAN> <SPAN class="comment token">// sketchViewModel on draw-start</SPAN> <SPAN class="comment token">// Fires after create() method is called.</SPAN> <SPAN class="comment token">// **************************************</SPAN> sketchStartEvent <SPAN class="operator token">=</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'draw-start'</SPAN><SPAN class="punctuation token">,</SPAN> sketchStartHandler<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">sketchStartHandler</SPAN><SPAN class="punctuation token">(</SPAN>sketchEvt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> sketchGeometry<SPAN class="punctuation token">;</SPAN> viewPointerMoveEvent <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'pointer-move'</SPAN><SPAN class="punctuation token">,</SPAN> viewPointerMoveHandler<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">viewPointerMoveHandler</SPAN><SPAN class="punctuation token">(</SPAN>viewEvt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>sketchEvt<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>graphic <SPAN class="operator token">&&</SPAN> sketchEvt<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>draw<SPAN class="punctuation token">.</SPAN>activeAction<SPAN class="punctuation token">.</SPAN>vertices<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> sketchGeometry <SPAN class="operator token">=</SPAN> sketchEvt<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// convert screen coordinates to map coordinates</SPAN> sketchGeometry <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> x<SPAN class="punctuation token">:</SPAN> viewEvt<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> viewEvt<SPAN class="punctuation token">.</SPAN>y <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="token function">generateBufferGraphic</SPAN><SPAN class="punctuation token">(</SPAN>sketchGeometry<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="comment token">// ***********************</SPAN> <SPAN class="comment token">// Generate buffer graphic</SPAN> <SPAN class="comment token">// ***********************</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">generateBufferGraphic</SPAN><SPAN class="punctuation token">(</SPAN>geometry<SPAN class="punctuation token">,</SPAN> bufferDistance <SPAN class="operator token">=</SPAN> <SPAN class="number token">500</SPAN><SPAN class="punctuation token">,</SPAN> unit <SPAN class="operator token">=</SPAN> <SPAN class="string token">'kilometers'</SPAN><SPAN class="punctuation token">,</SPAN> unionResults <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> bufferGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> buffer <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">geodesicBuffer</SPAN><SPAN class="punctuation token">(</SPAN>geometry<SPAN class="punctuation token">,</SPAN> bufferDistance<SPAN class="punctuation token">,</SPAN> unit<SPAN class="punctuation token">,</SPAN> unionResults<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> bufferGraphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation 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> buffer<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> polygonSymbol <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="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"topbar"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>button <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"action-button esri-icon-blank-map-pin"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"pointButton"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> title<SPAN class="operator token">=</SPAN><SPAN class="string token">"Draw point"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>button <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"action-button esri-icon-polyline"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"polylineButton"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> title<SPAN class="operator token">=</SPAN><SPAN class="string token">"Draw polyline"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>button <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"action-button esri-icon-polygon"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"polygonButton"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> title<SPAN class="operator token">=</SPAN><SPAN class="string token">"Draw polygon"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>button <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"action-button esri-icon-checkbox-unchecked"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"rectangleButton"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> title<SPAN class="operator token">=</SPAN><SPAN class="string token">"Draw rectangle"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>button <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"action-button esri-icon-radio-unchecked"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"circleButton"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> title<SPAN class="operator token">=</SPAN><SPAN class="string token">"Draw circle"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>button <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"action-button esri-icon-trash"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"resetBtn"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> title<SPAN class="operator token">=</SPAN><SPAN class="string token">"Clear graphics"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator 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></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><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></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><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></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><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></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><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></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><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></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>
It seems to work but I'm not sure how best to remove the on pointer move event listener for the view. If you look at the console log, there are errors when drawing line or polygons. How do I remove the event listener so it doesn't keep running? I also tried using event.stopPropagation() but it looks like that doesn't actually remove the listener and might cause memory issues in the browser because it keeps running.
I'm still struggling to fully implement this, so please feel free to post if you have any ideas!
I guess I just needed to wait a week. Found this gem in the ArcGIS API for JavaScript 4.7 release notes:
Added events draw-cancel, draw-start, update-cancel, update-complete, update-start to esri/widgets/Sketch/SketchViewModel
SketchViewModel | API Reference | ArcGIS API for JavaScript 4.7
I would prefer to get an event directly from the SketchViewModel. Something like "draw-complete" but for "draw-create." It looks like the on() method will let you register an event-handler but I'm not sure how to use it. Wish there were some samples or even a list of valid events!
//
Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
