Hi all, I am trying to buffer a road segment 200' on each side but it seems like the buffer is not returning me anything accurate. The buffer on each side is like 520' as it is now. Maybe wkid? var extent2 = new Extent ( { "xmin" : - 121.11087086999999 , "ymin" : 38.517479534000074 , "xmax" : - 119.95226375799996 , "ymax" : 39.068026806000034 , "spatialReference" : { "wkid" : 4326 } } ) ; //Map map = new Map ( "map" , { basemap : "topo" , extent : extent2 } ) ; featureLayer . selectFeatures ( selectQuery , FeatureLayer . SELECTION_NEW , function ( targetGeometry ) { targetGeometry = graphicsUtils . getGeometries ( featureLayer . getSelectedFeatures ( ) ) ; console . log ( targetGeometry ) ; geometryService . union ( targetGeometry , function ( geometry ) { featureLayer . clearSelection ( ) ; //Buffer params var params = new BufferParameters ( ) ; params . distances = [ 200 ] ; params . unit = geometryService . UNIT_FOOT ; //Simplify features first geometryService . simplify ( [ geometry ] , function ( simplifiedGeometries ) { params . geometries = simplifiedGeometries ; //do the buffer geometryService . buffer ( params , showBuffer ) ; } ) ; } , function ( err ) { console . log ( err ) ; } ) ; } ) ;

That is definitely a good learning experience right there. I will remember this one... and certainly be more careful about caps letters and lower cases for now on.

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

Buffer not accurate

Anonymous User

Hi all,

I am trying to buffer a road segment 200' on each side but it seems like the buffer is not returning me anything accurate. The buffer on each side is like 520' as it is now. Maybe wkid?

<SPAN class="keyword token">var</SPAN> extent2 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"xmin"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">121.11087086999999</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ymin"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">38.517479534000074</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"xmax"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">119.95226375799996</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ymax"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">39.068026806000034</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"spatialReference"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"wkid"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4326</SPAN> <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Map</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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="string token">"map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"topo"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; extent<SPAN class="punctuation token">:</SPAN> extent2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


featureLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">selectFeatures</SPAN><SPAN class="punctuation token">(</SPAN>selectQuery<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>SELECTION_NEW<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>targetGeometry<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; targetGeometry <SPAN class="operator token">=</SPAN> graphicsUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getGeometries</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getSelectedFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>targetGeometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; geometryService<SPAN class="punctuation token">.</SPAN><SPAN class="token function">union</SPAN><SPAN class="punctuation token">(</SPAN>targetGeometry<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>geometry<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; featureLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clearSelection</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Buffer params</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> params <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">BufferParameters</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params<SPAN class="punctuation token">.</SPAN>distances <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">200</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params<SPAN class="punctuation token">.</SPAN>unit <SPAN class="operator token">=</SPAN> geometryService<SPAN class="punctuation token">.</SPAN>UNIT_FOOT<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Simplify features first</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; geometryService<SPAN class="punctuation token">.</SPAN><SPAN class="token function">simplify</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>geometry<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>simplifiedGeometries<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params<SPAN class="punctuation token">.</SPAN>geometries <SPAN class="operator token">=</SPAN> simplifiedGeometries<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//do the buffer</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; geometryService<SPAN class="punctuation token">.</SPAN><SPAN class="token function">buffer</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">,</SPAN> showBuffer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

Najděte více příspěvků označených jako

Accepted answers

All comments

rscheitlin

Alex,

Well chalk it up to a learning experience. CaSe matters in programming.

Anonymous User

yes

Anonymous User

Go the issue, instead of:

params2<SPAN class="punctuation token">.</SPAN>unit <SPAN class="operator token">=</SPAN> geometryService<SPAN class="punctuation token">.</SPAN>UNIT_FOOT<SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

use:

params2<SPAN class="punctuation token">.</SPAN>unit <SPAN class="operator token">=</SPAN> GeometryService<SPAN class="punctuation token">.</SPAN>UNIT_FOOT<SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

That was a silly one.

DarrenWiens2

So, you get the 200' buffer with:

<SPAN style="color: #000000;">params</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN style="color: #000000;">distances </SPAN><SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.498039); border: 0px; font-weight: inherit;">=</SPAN><SPAN style="color: #000000;"> </SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">[</SPAN><SPAN style="border: 0px; color: #990000; font-weight: inherit;">60.96</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">]</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN>

Anonymous User

It seems like the buffer is returned in meters and not feet. That is what I got from testing

rscheitlin

Alex,

Are you using an esri basemap?

Anonymous User

That works great with the ESRI sample ! Not too sure why it is not in my

app...

rscheitlin

Alex,

Just add:

params.geodesic = true;

Anonymous User

I noticed that a similar issue exists on that ESRI sample. I wonder why.

<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>
&nbsp; <SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=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>Buffer<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%2F3.18%2Fdijit%2Fthemes%2Fclaro%2Fclaro.css" target="_blank">https://js.arcgis.com/3.18/dijit/themes/claro/claro.css</A><SPAN>"</SPAN></SPAN><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%2F3.18%2Fesri%2Fcss%2Fesri.css" target="_blank">https://js.arcgis.com/3.18/esri/css/esri.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
&nbsp;&nbsp; html<SPAN class="punctuation token">,</SPAN> body <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> 
&nbsp;&nbsp;&nbsp; padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; overflow<SPAN class="punctuation token">:</SPAN>hidden<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp; #leftPane<SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; color<SPAN class="punctuation token">:</SPAN>#<SPAN class="number token">000</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; width<SPAN class="punctuation token">:</SPAN>250px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; padding<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN>15px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp; #map<SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; padding<SPAN class="punctuation token">:</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp; <SPAN class="punctuation token">.</SPAN>details<SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN>14px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; font<SPAN class="operator token">-</SPAN>weight<SPAN class="punctuation token">:</SPAN><SPAN class="number token">600</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; padding<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN>20px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp; button<SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; margin<SPAN class="punctuation token">:</SPAN>2px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; cursor<SPAN class="punctuation token">:</SPAN>pointer<SPAN class="punctuation token">;</SPAN>
&nbsp; <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 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%2F3.18%2F" target="_blank">https://js.arcgis.com/3.18/</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>script<SPAN class="operator token">></SPAN>
<SPAN class="keyword token">var</SPAN> map<SPAN class="punctuation token">,</SPAN> tb<SPAN class="punctuation token">;</SPAN>

<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"dojo/dom"</SPAN><SPAN class="punctuation token">,</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/_base/array"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/parser"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/query"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/on"</SPAN><SPAN class="punctuation token">,</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/Color"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/config"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/graphic"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/dijit/Measurement"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/geometry/normalizeUtils"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/tasks/GeometryService"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/tasks/BufferParameters"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/toolbars/draw"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/symbols/SimpleMarkerSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/symbols/SimpleLineSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/layout/BorderContainer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/layout/ContentPane"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/form/Button"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>dom<SPAN class="punctuation token">,</SPAN> array<SPAN class="punctuation token">,</SPAN> parser<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">,</SPAN> on<SPAN class="punctuation token">,</SPAN> Color<SPAN class="punctuation token">,</SPAN> esriConfig<SPAN class="punctuation token">,</SPAN> Map<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> Measurement<SPAN class="punctuation token">,</SPAN> normalizeUtils<SPAN class="punctuation token">,</SPAN> GeometryService<SPAN class="punctuation token">,</SPAN> BufferParameters<SPAN class="punctuation token">,</SPAN> Draw<SPAN class="punctuation token">,</SPAN> SimpleMarkerSymbol<SPAN class="punctuation token">,</SPAN> SimpleLineSymbol<SPAN class="punctuation token">,</SPAN> SimpleFillSymbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parser<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; esriConfig<SPAN class="punctuation token">.</SPAN>defaults<SPAN class="punctuation token">.</SPAN>geometryService <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GeometryService</SPAN><SPAN class="punctuation 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%2Futility.arcgisonline.com%2FArcGIS%2Frest%2Fservices%2FGeometry%2FGeometryServer" target="_blank">https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; esriConfig<SPAN class="punctuation token">.</SPAN>defaults<SPAN class="punctuation token">.</SPAN>io<SPAN class="punctuation token">.</SPAN>proxyUrl <SPAN class="operator token">=</SPAN> <SPAN class="string token">"/proxy/"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; esriConfig<SPAN class="punctuation token">.</SPAN>defaults<SPAN class="punctuation token">.</SPAN>io<SPAN class="punctuation token">.</SPAN>alwaysUseProxy <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//Setup button click handlers</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"clearGraphics"</SPAN><SPAN class="punctuation token">)</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><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clear</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//click handler for the draw tool buttons</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".tool"</SPAN><SPAN class="punctuation token">)</SPAN><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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>tb<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tb<SPAN class="punctuation token">.</SPAN><SPAN class="token function">activate</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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="string token">"map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"streets"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">111.5</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">39.541</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> measurement <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Measurement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> map
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"measurementDiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; measurement<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"load"</SPAN><SPAN class="punctuation token">,</SPAN> initToolbar<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="token function">initToolbar</SPAN><SPAN class="punctuation token">(</SPAN>evtObj<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tb <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Draw</SPAN><SPAN class="punctuation token">(</SPAN>evtObj<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tb<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"draw-end"</SPAN><SPAN class="punctuation token">,</SPAN> doBuffer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="token function">doBuffer</SPAN><SPAN class="punctuation token">(</SPAN>evtObj<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tb<SPAN class="punctuation token">.</SPAN><SPAN class="token function">deactivate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> geometry <SPAN class="operator token">=</SPAN> evtObj<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">:</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; symbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN>SimpleMarkerSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SQUARE<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</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">0</SPAN><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="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</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">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"polyline"</SPAN><SPAN class="punctuation token">:</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; symbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_DASH<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</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">0</SPAN><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="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"polygon"</SPAN><SPAN class="punctuation token">:</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; symbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN>SimpleFillSymbol<SPAN class="punctuation token">.</SPAN>STYLE_NONE<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_DASHDOT<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</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">0</SPAN><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="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</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">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>geometry<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<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>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//setup the buffer parameters</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> params <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">BufferParameters</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params<SPAN class="punctuation token">.</SPAN>distances <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"distance"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params<SPAN class="punctuation token">.</SPAN>outSpatialReference <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params<SPAN class="punctuation token">.</SPAN>unit <SPAN class="operator token">=</SPAN> GeometryService<SPAN class="punctuation token">[</SPAN>dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"unit"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//normalize the geometry </SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; normalizeUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">normalizeCentralMeridian</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>geometry<SPAN class="punctuation token">]</SPAN><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>normalizedGeometries<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> normalizedGeometry <SPAN class="operator token">=</SPAN> normalizedGeometries<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>normalizedGeometry<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">===</SPAN> <SPAN class="string token">"polygon"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//if geometry is a polygon then simplify polygon.&nbsp; This will make the user drawn polygon topologically correct.</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; esriConfig<SPAN class="punctuation token">.</SPAN>defaults<SPAN class="punctuation token">.</SPAN>geometryService<SPAN class="punctuation token">.</SPAN><SPAN class="token function">simplify</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>normalizedGeometry<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>geometries<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params<SPAN class="punctuation token">.</SPAN>geometries <SPAN class="operator token">=</SPAN> geometries<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; esriConfig<SPAN class="punctuation token">.</SPAN>defaults<SPAN class="punctuation token">.</SPAN>geometryService<SPAN class="punctuation token">.</SPAN><SPAN class="token function">buffer</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">,</SPAN> showBuffer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params<SPAN class="punctuation token">.</SPAN>geometries <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN>normalizedGeometry<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; esriConfig<SPAN class="punctuation token">.</SPAN>defaults<SPAN class="punctuation token">.</SPAN>geometryService<SPAN class="punctuation token">.</SPAN><SPAN class="token function">buffer</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">,</SPAN> showBuffer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="token function">showBuffer</SPAN><SPAN class="punctuation token">(</SPAN>bufferedGeometries<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> symbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SimpleFillSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</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">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.65</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</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">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.35</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>bufferedGeometries<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>geometry<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>geometry<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp; <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="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"claro"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>div data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/BorderContainer"</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp; data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"gutters:'true', design:'sidebar'"</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp; style<SPAN class="operator token">=</SPAN><SPAN class="string token">"width:100%;height:100%;"</SPAN><SPAN class="operator token">></SPAN>

&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"map"</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'center'"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>

&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"leftPane"</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'left'"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"details"</SPAN><SPAN class="operator token">></SPAN>Pick a tool and draw on the map<SPAN class="punctuation token">.</SPAN> The drawn graphic will be buffered based on the specified parameters<SPAN class="punctuation token">.</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>button type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tool"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"line"</SPAN><SPAN class="operator token">></SPAN>Line<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>button type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tool"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"polyline"</SPAN><SPAN class="operator token">></SPAN>Polyline<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>button type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tool"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"freehandpolyline"</SPAN><SPAN class="operator token">></SPAN>Freehand Polyline<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>br<SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>button type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tool"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"polygon"</SPAN><SPAN class="operator token">></SPAN>Polygon<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>button type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"tool"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"freehandpolygon"</SPAN><SPAN class="operator token">></SPAN>Freehand Polygon<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>br<SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>hr <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>b<SPAN class="operator token">></SPAN>Buffer Parameters<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>b<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; Distance<SPAN class="punctuation token">:</SPAN><SPAN class="operator token">&</SPAN>nbsp<SPAN class="punctuation token">;</SPAN><SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"distance"</SPAN> size<SPAN class="operator token">=</SPAN><SPAN class="string token">"5"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"25"</SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>select id<SPAN class="operator token">=</SPAN><SPAN class="string token">"unit"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"width:100px;"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"UNIT_STATUTE_MILE"</SPAN><SPAN class="operator token">></SPAN>Miles<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"UNIT_FOOT"</SPAN><SPAN class="operator token">></SPAN>Feet<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"UNIT_KILOMETER"</SPAN><SPAN class="operator token">></SPAN>Kilometers<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"UNIT_METER"</SPAN><SPAN class="operator token">></SPAN>Meters<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"UNIT_NAUTICAL_MILE"</SPAN><SPAN class="operator token">></SPAN>Nautical Miles<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"UNIT_US_NAUTICAL_MILE"</SPAN><SPAN class="operator token">></SPAN>US Nautical Miles<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>option value<SPAN class="operator token">=</SPAN><SPAN class="string token">"UNIT_DEGREE"</SPAN><SPAN class="operator token">></SPAN>Degrees<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>option<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>select<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>br <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>button type<SPAN class="operator token">=</SPAN><SPAN class="string token">"button"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"clearGraphics"</SPAN><SPAN class="operator token">></SPAN>Clear Graphics<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"measurementDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp; <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>

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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