topic Re: customize query buffer in ArcGIS JavaScript Maps SDK Questions

customize query buffer

anjelinaponkerat — Mon, 27 Nov 2017 07:27:24 GMT

how can customize query buffer? I,m going to add a button for call query buffer function (like measurement tools), and a text area (textbox) for insert radius of buffer by client in web page.

Re: customize query buffer

RobertScheitlin__GISP — Mon, 27 Nov 2017 14:05:11 GMT

Anjelina,

So what do you have so far in your code? Are you going to use a dojo titlepane dijit for the dialog portion?

Re: customize query buffer

anjelinaponkerat — Mon, 27 Nov 2017 15:21:50 GMT

I wrote a sample by html and js, I don't know more and don't know what should I do.

Re: customize query buffer

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:12:09 GMT

Anjelina,

Here is a sample that uses dojo/Dialog:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Display Multiple ArcGIS Online Services</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
    }

    #map {
      border: solid 1px #B5BCC7;
      padding: 0;
    }

    #paneHeader,
    #header {
      background: url(images/header.png) repeat-x;
      color: white;
      border-bottom: solid 1px #B5BCC7;
      text-align: center;
      height: 30px;
      margin: 0;
      overflow: hidden;
      font-size: 16px;
      padding: 8px 5px;
    }

    #header {
      text-align: right;
    }

    #rightPane {
      width: 150px;
      margin: 0;
      padding: 0;
    }

    #bufferDialogBtn {
      float: right;
    }

    .nonModal_underlay {
      display: none;
    }
  </style>
  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    var map, bufferDialog, circle, circleSymb, tb, featureLayer;
    require([
      "dojo/dom", "esri/Color", "dojo/keys", "dojo/parser", "esri/config",
      "esri/sniff", "esri/map", "esri/SnappingManager", "esri/dijit/Measurement",
      "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/tasks/GeometryService",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
      "esri/dijit/Scalebar",
      "esri/dijit/BasemapGallery",
      "esri/dijit/BasemapLayer",
      "esri/dijit/Basemap",
      "esri/dijit/OverviewMap",
      "esri/tasks/locator",
      "esri/dijit/Search",
      "esri/symbols/PictureMarkerSymbol",
      "esri/InfoTemplate",
      "esri/dijit/HomeButton",
      "esri/geometry/Extent",
      "esri/SpatialReference",
      "esri/dijit/VisibleScaleRangeSlider",
      "esri/geometry/scaleUtils",
      "esri/virtualearth/VETiledLayer",
      "dijit/form/Button",
      "esri/tasks/query",
      "esri/geometry/Circle",
      "esri/graphic",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/on",
      "esri/toolbars/draw",
      "esri/units",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/TitlePane",
      "dijit/Dialog",
      "dojo/domReady!"
    ], function(
      dom, Color, keys, parser, esriConfig,
      has, Map, SnappingManager, Measurement,
      FeatureLayer, SimpleRenderer, GeometryService,
      SimpleLineSymbol, SimpleFillSymbol,
      Scalebar, BasemapGallery, BasemapLayer, Basemap, OverviewMap, Locator, Search, PictureMarkerSymbol, InfoTemplate, HomeButton, Extent, SpatialReference, VisibleScaleRangeSlider, scaleUtils, VETiledLayer, Button, Query, Circle, Graphic,
      SimpleMarkerSymbol, on, Draw, units
    ) {
      parser.parse();

      map = new Map("map");
      var basemaps = [];
      var waterTemplateLayer = new BasemapLayer({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructureBasemap/MapServer"
      });
      var waterBasemap = new Basemap({
        layers: [waterTemplateLayer],
        title: "Water Template",
        thumbnailUrl: "images/waterThumb.png"
      });
      basemaps.push(waterBasemap);
      var publicSafetyLayer = new BasemapLayer({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer"
      });
      var publicSafetyBasemap = new Basemap({
        layers: [publicSafetyLayer],
        title: "Public Safety",
        thumbnailUrl: "images/safetyThumb.png"
      });
      basemaps.push(publicSafetyBasemap);
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        basemaps: basemaps,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      basemapGallery.on("error", function(error) {
        console.log(error);
      });
      map.on("load", function(evt) {
        initToolbar(evt);
        // Add the census block points in on demand mode. An outfield is specified since it is used when calculating the total population falling within the one mile radius.
        featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
          outFields: ["POP2000"]
        });
        // Selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol);

        // Make unselected features invisible
        var nullSymbol = new SimpleMarkerSymbol().setSize(0);
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

        map.addLayer(featureLayer);

        circleSymb = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
            new Color([105, 105, 105]),
            2
          ), new Color([255, 255, 0, 0.25])
        );

        on(dom.byId("clearGraphics"), "click", function() {
          if (map) {
            map.graphics.clear();
            featureLayer.clearSelection();
            dom.byId("messages").innerHTML = "";
          }
        });
      });

      esriConfig.defaults.io.proxyUrl = "/proxy/";

      on(dom.byId("bufferDialogBtn"), "click", function(){
        bufferDialog.show()
      });

      function initToolbar(evt) {
        tb = new Draw(evt.map);
        tb.on("draw-end", doBuffer);
        on(dom.byId("drawBtn"), "click", function(){
          tb.activate("point");
        });
      }

      function doBuffer(evt) {
        tb.deactivate();
        circle = new Circle({
          center: evt.geometry,
          geodesic: true,
          radius: dom.byId("distance").value,
          radiusUnit: units[dom.byId("unit").value]
        });
        map.graphics.clear();
        var graphic = new Graphic(circle, circleSymb);
        map.graphics.add(graphic);
        var query = new Query();
        query.geometry = circle.getExtent();
        // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
        featureLayer.queryFeatures(query, selectInBuffer);
      }

      function selectInBuffer(response) {
        var feature;
        var features = response.features;
        var inBuffer = [];
        // Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
        for (var i = 0; i < features.length; i++) {
          feature = features[i];
          if (circle.contains(feature.geometry)) {
            inBuffer.push(feature.attributes[featureLayer.objectIdField]);
          }
        }
        var query = new Query();
        query.objectIds = inBuffer;
        // Use an objectIds selection query (should not need to go to the server)
        featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results) {
          var totalPopulation = sumPopulation(results);
          var r = "";
          r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
          dom.byId("messages").innerHTML = r;
        });
      }

      function sumPopulation(features) {
        var popTotal = 0;
        for (var x = 0; x < features.length; x++) {
          popTotal = popTotal + features[x].attributes["POP2000"];
        }
        return popTotal;
      }
    });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="float:right;">
      <button id="bufferDialogBtn" type="button" data-dojo-type="dijit/form/Button">Buffer</button>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" id="rightPane">
      <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
        <div id="paneHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
          <span>Select Basemap</span>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
          <div id="basemapGallery"></div>
        </div>
      </div>
    </div>
  </div>
  <div data-dojo-type="dijit/Dialog" data-dojo-id="bufferDialog" title="Buffer" class="nonModal">
    <div><b>Buffer Parameters</b></div>
    Distance:
    <input type="text" id="distance" size="5" value="1" />
    <select id="unit" style="width:100px;">
      <option value="MILES">Miles</option>
      <option value="FEET">Feet</option>
      <option value="KILOMETERS">Kilometers</option>
      <option value="METERS">Meters</option>
      <option value="NAUTICAL_MILES">Nautical Miles</option>
      <option value="YARDS">Yards</option>
    </select>
    <br /><br />
    <span id="messages"></span>
    <br /><br />
    <button type="button" id="drawBtn" data-dojo-type="dijit/form/Button">Click On The Map</button>
    <button type="button" id="clearGraphics" data-dojo-type="dijit/form/Button">Clear Graphics</button>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: customize query buffer

anjelinaponkerat — Tue, 28 Nov 2017 07:52:01 GMT

I think there is a bug in code.

When buffer tools is open in page, user can not change units in measurement tools also can not insert text in search textbox!!

Re: customize query buffer

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:12:14 GMT

Anjelina,

OK, that was an issue with the use of dojo dijit dialog with is more of a modal approach. Here is a better route:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Display Multiple ArcGIS Online Services</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/dojox/layout/resources/FloatingPane.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/dojox/layout/resources/ResizeHandle.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
    }

    #map {
      border: solid 1px #B5BCC7;
      padding: 0;
    }

    #paneHeader,
    #header {
      background: url(images/header.png) repeat-x;
      color: white;
      border-bottom: solid 1px #B5BCC7;
      text-align: center;
      height: 30px;
      margin: 0;
      overflow: hidden;
      font-size: 16px;
      padding: 8px 5px;
    }

    #header {
      text-align: right;
    }

    #rightPane {
      width: 150px;
      margin: 0;
      padding: 0;
    }

    #bufferDialogBtn,
    #measureDialogBtn {
      float: right;
    }

    #divFloatingPane {
      z-index: 90;
      top: 50px;
      width: 238px;
      height: 220px;
      border: 1px solid black;
      background-color: white;
      visibility: hidden;
    }

    .dojoxFloatingPaneContent {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 8pt;
      /*font-weight: bold;*/
      overflow: auto;
    }

    .dojoxFloatingPaneTitle{
      color: white;
      background-color: #76a2c5;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12pt;
      font-weight: bold;
      overflow: auto;
    }

    .claro .dojoxFloatingMinimizeIcon {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADWSURBVChTlVIhDoNAENyWalRtFQY0qh8AHKIkoO8DlRXoin4Cj0AgOd9UIflA+xA6Q7jkQhFlkuGWYYZd7tiN4yhEXdcnLBcwBkNqQA92YJPn+YfCFID5jPoGphRX0IIPhF5OEAR8870oitR1XfE8b3IYaK2lLEs/y7LjMAxPB4WCfqW5qiqxQzRTU0pR8yG9D7hwZomiiMtkMDBm8wyIGTAf+BNamIlwPxd/gx24dQlv7JkJ08nq0jPAfU5ssz3GItRxpAZs18ysqc0hnkWz+eA2/hoiXyTHZtKhdrvuAAAAAElFTkSuQmCC);
      padding-right: 10px;
    }

    .dojoxDock {
      visibility: hidden;
    }

    #divMeasurePane {
      position: absolute;
      top: 100px;
      right: 100px;
      width: 300px;
      height: 320px;
      visibility: hidden;
    }

    #divBufferPane {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 300px;
      height: 320px;
      visibility: hidden;
    }
  </style>
  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    var map, bufferDialog, circle, circleSymb, tb, featureLayer;
    require([
      "dojo/dom", "esri/Color", "dojo/keys", "dojo/parser", "esri/config",
      "esri/sniff", "esri/map", "esri/SnappingManager", "esri/dijit/Measurement",
      "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/tasks/GeometryService",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
      "esri/dijit/Scalebar",
      "esri/dijit/BasemapGallery",
      "esri/dijit/BasemapLayer",
      "esri/dijit/Basemap",
      "esri/dijit/OverviewMap",
      "esri/tasks/locator",
      "esri/dijit/Search",
      "esri/symbols/PictureMarkerSymbol",
      "esri/InfoTemplate",
      "esri/dijit/HomeButton",
      "esri/geometry/Extent",
      "esri/SpatialReference",
      "esri/dijit/VisibleScaleRangeSlider",
      "esri/geometry/scaleUtils",
      "esri/virtualearth/VETiledLayer",
      "dijit/form/Button",
      "esri/tasks/query",
      "esri/geometry/Circle",
      "esri/graphic",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/on",
      "esri/toolbars/draw",
      "esri/units",
      "esri/dijit/Measurement",
      "dijit/registry",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/TitlePane",
      "dojox/layout/FloatingPane",
      "dojo/domReady!"
    ], function(
      dom, Color, keys, parser, esriConfig,
      has, Map, SnappingManager, Measurement,
      FeatureLayer, SimpleRenderer, GeometryService,
      SimpleLineSymbol, SimpleFillSymbol,
      Scalebar, BasemapGallery, BasemapLayer, Basemap, OverviewMap, Locator, Search, PictureMarkerSymbol, InfoTemplate, HomeButton, Extent, SpatialReference, VisibleScaleRangeSlider, scaleUtils, VETiledLayer, Button, Query, Circle, Graphic,
      SimpleMarkerSymbol, on, Draw, units, Measurement, registry
    ) {
      parser.parse();

      map = new Map("map");
      var basemaps = [];
      var waterTemplateLayer = new BasemapLayer({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructureBasemap/MapServer"
      });
      var waterBasemap = new Basemap({
        layers: [waterTemplateLayer],
        title: "Water Template",
        thumbnailUrl: "images/waterThumb.png"
      });
      basemaps.push(waterBasemap);
      var publicSafetyLayer = new BasemapLayer({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer"
      });
      var publicSafetyBasemap = new Basemap({
        layers: [publicSafetyLayer],
        title: "Public Safety",
        thumbnailUrl: "images/safetyThumb.png"
      });
      basemaps.push(publicSafetyBasemap);
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        basemaps: basemaps,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      basemapGallery.on("error", function(error) {
        console.log(error);
      });
      var measurement = new Measurement({
        map: map
      }, dom.byId("measurementDiv"));
      measurement.startup();

      map.on("load", function(evt) {
        initToolbar(evt);
        // Add the census block points in on demand mode. An outfield is specified since it is used when calculating the total population falling within the one mile radius.
        featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
          outFields: ["POP2000"]
        });
        // Selection symbol used to draw the selected census block points within the buffer polygon
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
        featureLayer.setSelectionSymbol(symbol);

        // Make unselected features invisible
        var nullSymbol = new SimpleMarkerSymbol().setSize(0);
        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

        map.addLayer(featureLayer);

        circleSymb = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
            new Color([105, 105, 105]),
            2
          ), new Color([255, 255, 0, 0.25])
        );

        on(dom.byId("clearGraphics"), "click", function() {
          if (map) {
            map.graphics.clear();
            featureLayer.clearSelection();
            dom.byId("messages").innerHTML = "";
          }
        });
      });

      esriConfig.defaults.io.proxyUrl = "/proxy/";

      on(dom.byId("bufferDialogBtn"), "click", function() {
        registry.byId("divBufferPane").show();
      });

      on(dom.byId("measureDialogBtn"), "click", function() {
        registry.byId("divMeasurePane").show();
      });

      function initToolbar(evt) {
        tb = new Draw(evt.map);
        tb.on("draw-end", doBuffer);
        on(dom.byId("drawBtn"), "click", function() {
          tb.activate("point");
        });
      }

      function doBuffer(evt) {
        tb.deactivate();
        circle = new Circle({
          center: evt.geometry,
          geodesic: true,
          radius: dom.byId("distance").value,
          radiusUnit: units[dom.byId("unit").value]
        });
        map.graphics.clear();
        var graphic = new Graphic(circle, circleSymb);
        map.graphics.add(graphic);
        var query = new Query();
        query.geometry = circle.getExtent();
        // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
        featureLayer.queryFeatures(query, selectInBuffer);
      }

      function selectInBuffer(response) {
        var feature;
        var features = response.features;
        var inBuffer = [];
        // Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
        for (var i = 0; i < features.length; i++) {
          feature = features[i];
          if (circle.contains(feature.geometry)) {
            inBuffer.push(feature.attributes[featureLayer.objectIdField]);
          }
        }
        var query = new Query();
        query.objectIds = inBuffer;
        // Use an objectIds selection query (should not need to go to the server)
        featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results) {
          var totalPopulation = sumPopulation(results);
          var r = "";
          r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
          dom.byId("messages").innerHTML = r;
        });
      }

      function sumPopulation(features) {
        var popTotal = 0;
        for (var x = 0; x < features.length; x++) {
          popTotal = popTotal + features[x].attributes["POP2000"];
        }
        return popTotal;
      }
    });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="float:right;">
      <button id="bufferDialogBtn" type="button" data-dojo-type="dijit/form/Button">Buffer</button>
      <button id="measureDialogBtn" type="button" data-dojo-type="dijit/form/Button">Measure</button>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" id="rightPane">
      <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">
        <div id="paneHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
          <span>Select Basemap</span>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
          <div id="basemapGallery"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="divMeasurePane" data-dojo-type="dojox/layout/FloatingPane" data-dojo-props="resizable:true, dockable:true, closable:false, title:'Measuring Tools'">
    <div id="measurementDiv"></div>
  </div>
  <div id="divBufferPane" data-dojo-type="dojox/layout/FloatingPane" data-dojo-props="resizable:true, dockable:true, closable:false, title:'Buffer Tool'">
    <div><b>Buffer Parameters</b></div>
    Distance:
    <input type="text" id="distance" size="5" value="1" />
    <select id="unit" style="width:100px;">
      <option value="MILES">Miles</option>
      <option value="FEET">Feet</option>
      <option value="KILOMETERS">Kilometers</option>
      <option value="METERS">Meters</option>
      <option value="NAUTICAL_MILES">Nautical Miles</option>
      <option value="YARDS">Yards</option>
    </select>
    <br /><br />
    <span id="messages"></span>
    <br /><br />
    <button type="button" id="drawBtn" data-dojo-type="dijit/form/Button">Click On The Map</button>
    <button type="button" id="clearGraphics" data-dojo-type="dijit/form/Button">Clear Graphics</button>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍