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

Drop a random editable polygon with a marker

rsharma

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)

Encontre mais publicações marcadas com

Accepted answers

RobertScheitlin__GISP

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>

All comments

RobertScheitlin__GISP

Rajni,

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?

rsharma

Hi Robert Scheitlin, GISP‌

random means a small size polygon can be of same shape but can be editable by user OR user can draw a polygon with certain type of marker drop
No its not necessary to be very centered to his marker position.
Issue is it should of different color from basic polygons

Kindly suggest suitable

RobertScheitlin__GISP

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>

rsharma

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??

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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