I want to drop a random editable polygon when a marker is dropped , do i need to use different graphics layer to add some random polygon around marker . How to drop some random polygon (of small size)
Rajni,
This is my suggestion.
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN> <SPAN class="comment token">//drop marker of point type when evt.state is complete</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>state <SPAN class="operator token">===</SPAN> <SPAN class="string token">"complete"</SPAN> <SPAN class="operator token">&&</SPAN> evt<SPAN class="punctuation token">.</SPAN>tool <SPAN class="operator token">===</SPAN> <SPAN class="string token">'point'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//clone point graphics deeply</SPAN> <SPAN class="keyword token">var</SPAN> cloneGra <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>graphic<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="comment token">//?</SPAN> graphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//define clone graphics symbol</SPAN> cloneGra<SPAN class="punctuation token">.</SPAN>symbol <SPAN class="operator token">=</SPAN> textSymbol<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// define clonegra attributes</SPAN> cloneGra<SPAN class="punctuation token">.</SPAN>attributes <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> newDevelopment<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"new marker"</SPAN><SPAN class="punctuation token">,</SPAN> state<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"new"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//define popup body here</SPAN> <SPAN class="keyword token">var</SPAN> popup_html <SPAN class="operator token">=</SPAN> <SPAN class="string token">'<div class="be-form-wrapper">'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<textarea cols="4" rows="4" class="form-control b_radius mt-20 write_comment" id="write_comment" name="write_comment" placeholder="Write a comment"></textarea>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'</div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<button class="btn btn-width" data-url="">Cancel</button>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'</div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'<button class="btn btn-width" data-url="">Save</button>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'</div>'</SPAN><SPAN class="punctuation token">;</SPAN> popup_html <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">'</div>'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//add content of popup body here</SPAN> cloneGra<SPAN class="punctuation token">.</SPAN>popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> title <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">' '</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN>popup_html<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//add clone graphics to marker graphics layer</SPAN> markerGL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>cloneGra<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">const</SPAN> polygon <SPAN class="operator token">=</SPAN> webMercatorUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">geographicToWebMercator</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">createGeometry</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">175.9258624</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">37.55590445</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">175.9258630667</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">37.55587745</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">175.9258671333</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">37.5557153</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">175.92626316670004</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">37.5557216</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">175.92625955</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">37.5558657</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">175.9262584333</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">37.5559107333</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">175.9258624</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">37.55590445</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="token function">translatePolygon</SPAN><SPAN class="punctuation token">(</SPAN> polygon<SPAN class="punctuation token">.</SPAN>centroid<SPAN class="punctuation token">,</SPAN> evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">,</SPAN> polygon<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> validSymbol <SPAN class="operator token">=</SPAN> <SPAN class="token function">createSymbol</SPAN><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="number token">0.3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="number token">0</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><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> calc_area <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">geodesicArea</SPAN><SPAN class="punctuation token">(</SPAN>polygon<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"hectares"</SPAN><SPAN class="punctuation token">)</SPAN> newDevelopmentGraphic <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> polygon<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> validSymbol<SPAN class="punctuation token">,</SPAN> attributes<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> newDevelopment<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"new store"</SPAN><SPAN class="punctuation token">,</SPAN> state<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"propesed"</SPAN><SPAN class="punctuation token">,</SPAN> area<SPAN class="punctuation token">:</SPAN> calc_area <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> graphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>newDevelopmentGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">//End addTempGraphics</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">translatePolygon</SPAN><SPAN class="punctuation token">(</SPAN>startPoint<SPAN class="punctuation token">,</SPAN> currPoint<SPAN class="punctuation token">,</SPAN> polygon<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">let</SPAN> dx <SPAN class="operator token">=</SPAN> currPoint<SPAN class="punctuation token">.</SPAN>x <SPAN class="operator token">-</SPAN> startPoint<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">let</SPAN> dy <SPAN class="operator token">=</SPAN> currPoint<SPAN class="punctuation token">.</SPAN>y <SPAN class="operator token">-</SPAN> startPoint<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">;</SPAN> polygon<SPAN class="punctuation token">.</SPAN>rings<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>ring <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>Array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">isArray</SPAN><SPAN class="punctuation token">(</SPAN>ring<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><SPAN class="punctuation token">{</SPAN> ring<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>coord <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN> coord<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> dx<SPAN class="punctuation token">;</SPAN> coord<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> dy<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">else</SPAN> <SPAN class="punctuation token">{</SPAN> ring<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> dx<SPAN class="punctuation token">;</SPAN> ring<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> dy<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></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Hi sir,
I just want to know if it is possible to draw(not drop a polygon) a polygon first by user on click of same add marker button (for different markertype) and when polygon completed a marker appears in center of it automatically??
Hi Robert Scheitlin, GISP
Kindly suggest suitable
Random polygon??? This query lacks so much detail... By random do you mean each polygon is going to have a different polygon shape and be centered on the click point?
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
