add xy coordinates to toolbar

MarkBalman

Hi all

With the ability to use graphic draw tools (point, line, polygons) and create the objects to use in a query such as those in this example:

https://developers.arcgis.com/javascript/3/samples/util_buffergraphic/ 

How would I customise this so as to be able to enter x,y coordinates manually to create an object such as a  point, line or polygon and then buffer this?

I have a simple create a point object and zoom to it taking in user entered x,y coordinates using the following:

        on(dom.byId("btnFindCoordinates"), "click", function() {
          map.graphics.clear();
          var x = dom.byId("xCoord").value;
          var y = dom.byId("yCoord").value;
          var coordPoint = new Point(x,y);
          prjParams.geometries = [coordPoint];
          map.centerAndZoom(coordPoint, 11);
          map.graphics.add(new Graphic(coordPoint, markerSymbol));
            
        });

But not sure how I would add this into the example above, any hints welcome.

Thanks and best,

Mark

RobertScheitlin__GISP

Mark,

   This should get you going:

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta 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">"https://js.arcgis.com/3.29/dijit/themes/claro/claro.css"</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">"https://js.arcgis.com/3.29/esri/css/esri.css"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
   html<SPAN class="punctuation token">,</SPAN> body <SPAN class="punctuation token">{</SPAN>
    height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
    width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
    margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> 
    padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
    overflow<SPAN class="punctuation token">:</SPAN>hidden<SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>
  #leftPane<SPAN class="punctuation token">{</SPAN>
    color<SPAN class="punctuation token">:</SPAN>#<SPAN class="number token">000</SPAN><SPAN class="punctuation token">;</SPAN>
    width<SPAN class="punctuation token">:</SPAN>250px<SPAN class="punctuation token">;</SPAN>
    padding<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN>15px<SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>
  #map<SPAN class="punctuation token">{</SPAN>
    padding<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>details<SPAN class="punctuation token">{</SPAN>
    font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN>14px<SPAN class="punctuation token">;</SPAN>
    font<SPAN class="operator token">-</SPAN>weight<SPAN class="punctuation token">:</SPAN><SPAN class="number token">600</SPAN><SPAN class="punctuation token">;</SPAN>
    padding<SPAN class="operator token">-</SPAN>bottom<SPAN class="punctuation token">:</SPAN>20px<SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>

  button<SPAN class="punctuation token">{</SPAN>
    margin<SPAN class="punctuation token">:</SPAN>2px<SPAN class="punctuation token">;</SPAN>
    cursor<SPAN class="punctuation token">:</SPAN>pointer<SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.29/"</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>

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

        <SPAN class="string token">"esri/Color"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/config"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/graphic"</SPAN><SPAN class="punctuation token">,</SPAN>

        <SPAN class="string token">"esri/geometry/Point"</SPAN><SPAN class="punctuation token">,</SPAN>

        <SPAN class="string token">"esri/geometry/normalizeUtils"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/tasks/GeometryService"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/tasks/BufferParameters"</SPAN><SPAN class="punctuation token">,</SPAN>
  
        <SPAN class="string token">"esri/toolbars/draw"</SPAN><SPAN class="punctuation token">,</SPAN>
  
        <SPAN class="string token">"esri/symbols/SimpleMarkerSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/symbols/SimpleLineSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
        
        <SPAN class="string token">"dijit/layout/BorderContainer"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"dijit/layout/ContentPane"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"dijit/form/Button"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN>
        <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>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> Point<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>

        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>


        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">"https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

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


       <SPAN class="comment token">//Setup button click handlers</SPAN>
        <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>
          <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            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>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="comment token">//click handler for the draw tool buttons</SPAN>
        <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>
          <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>tb<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
           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>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <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">"btnFindCoordinates"</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>
          <SPAN class="comment token">//map.graphics.clear();</SPAN>
          <SPAN class="keyword token">var</SPAN> x <SPAN class="operator token">=</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"xCoord"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> y <SPAN class="operator token">=</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"yCoord"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>value<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> coordPoint <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN>x<SPAN class="punctuation token">,</SPAN>y<SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="comment token">// prjParams.geometries = [coordPoint];</SPAN>
          <SPAN class="comment token">// map.centerAndZoom(coordPoint, 11);</SPAN>
          <SPAN class="comment token">// map.graphics.add(new Graphic(coordPoint, markerSymbol));</SPAN>
          <SPAN class="token function">doBuffer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>geometry<SPAN class="punctuation token">:</SPAN> coordPoint<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>

        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>
          basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"streets"</SPAN><SPAN class="punctuation token">,</SPAN>
          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>
          zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">7</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        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>

      <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>
        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>
        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>
      <SPAN class="punctuation token">}</SPAN>

      <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>
        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>
        <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>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>evtObj<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">switch</SPAN> <SPAN class="punctuation token">(</SPAN>geometry<SPAN class="punctuation token">.</SPAN>type<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
           <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">:</SPAN>
             symbol <SPAN class="operator token">=</SPAN> <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>
             <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
           <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"polyline"</SPAN><SPAN class="punctuation token">:</SPAN>
             symbol <SPAN class="operator token">=</SPAN> <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>
             <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
           <SPAN class="keyword token">case</SPAN> <SPAN class="string token">"polygon"</SPAN><SPAN class="punctuation token">:</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>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>
             <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

          <SPAN class="keyword token">var</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>geometry<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          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>

          <SPAN class="comment token">//setup the buffer parameters</SPAN>
          <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>
          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>
          params<SPAN class="punctuation token">.</SPAN>outSpatialReference <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">;</SPAN>
          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>
          <SPAN class="comment token">//normalize the geometry </SPAN>

          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>
            <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>
            <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>
              <SPAN class="comment token">//if geometry is a polygon then simplify polygon.  This will make the user drawn polygon topologically correct.</SPAN>
              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>
                params<SPAN class="punctuation token">.</SPAN>geometries <SPAN class="operator token">=</SPAN> geometries<SPAN class="punctuation token">;</SPAN>
                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>
              <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>
              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>
              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>
            <SPAN class="punctuation token">}</SPAN>

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

        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">showBuffer</SPAN><SPAN class="punctuation token">(</SPAN>bufferedGeometries<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <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>
            SimpleFillSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<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="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>
            <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">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>
          <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          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>
            <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>
            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>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="punctuation token">}</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body <SPAN class="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> 
     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> 
     style<SPAN class="operator token">=</SPAN><SPAN class="string token">"width:100%;height:100%;"</SPAN><SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"map"</SPAN> 
       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> 
       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>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"leftPane"</SPAN> 
       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> 
       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>
    <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>
    <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">"point"</SPAN><SPAN class="operator token">></SPAN>Point<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
    <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>
    <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>
    <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>
    <SPAN class="operator token"><</SPAN>br<SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <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>
    <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>
    <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>
    <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">"xCoord"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"-12618808.947932854"</SPAN><SPAN class="operator token">/</SPAN><SPAN class="operator 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">"yCoord"</SPAN> value<SPAN class="operator token">=</SPAN><SPAN class="string token">"4817809.013508325"</SPAN><SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>br<SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <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">"btnFindCoordinates"</SPAN><SPAN class="operator token">></SPAN>Place Point<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN>
    <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>
    <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>
    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>
    <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
      <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>
    <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>
    <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>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>