Help with scope issue

JessicaKnight1 · ‎08-23-2013

I am using this code as an example for my own coding: https://developers.arcgis.com/en/javascript/jssamples/query_buffer.html

I want to be able to have the user click a button to trigger the buffer/selection to be carried out rather than it just the map loading, but I can't figure out how to do that. Anyone have any direction for me? I'm a novice with coding, so I may be missing something easy.

JohnGravois · ‎08-23-2013

you could achieve this the following way:

1. first add a dom node in the <body> of your html for your new button

<button id="buffer">Buffer</button>

2. next, add a reference to the dojo module 'on' in the require section of your code and make sure to add a corresponding variable below so that you can reference the module from your code

"esri/config", "dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/domReady" ... esriConfig, Color, dom, on

3. look for the map click event handler code and place the existing code inside a new event handler to make sure nothing is wired up until your button is clicked

on(dom.byId("buffer"), "click", function () {  myMapClick = map.on("click", function (evt) {   //define input buffer parameters   var params = new BufferParameters();   params.geometries = [evt.mapPoint];   params.distances = [1];   params.unit = GeometryService.UNIT_STATUTE_MILE;    geometryService.buffer(params);  }); });

4. if you want to disconnect the map click event after every single buffer, call 'myMapClick.remove();' inside the buffer complete event handler

geometryService.on("buffer-complete", function(result){         //disconnect map click each time a buffer is completed  myMapClick.remove();

check out "Working with events" for more info.

View solution in original post

JohnGravois · ‎08-23-2013

you could achieve this the following way:

1. first add a dom node in the <body> of your html for your new button

<button id="buffer">Buffer</button>

2. next, add a reference to the dojo module 'on' in the require section of your code and make sure to add a corresponding variable below so that you can reference the module from your code

"esri/config", "dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/domReady" ... esriConfig, Color, dom, on

3. look for the map click event handler code and place the existing code inside a new event handler to make sure nothing is wired up until your button is clicked

on(dom.byId("buffer"), "click", function () {  myMapClick = map.on("click", function (evt) {   //define input buffer parameters   var params = new BufferParameters();   params.geometries = [evt.mapPoint];   params.distances = [1];   params.unit = GeometryService.UNIT_STATUTE_MILE;    geometryService.buffer(params);  }); });

4. if you want to disconnect the map click event after every single buffer, call 'myMapClick.remove();' inside the buffer complete event handler

geometryService.on("buffer-complete", function(result){         //disconnect map click each time a buffer is completed  myMapClick.remove();

check out "Working with events" for more info.

LeandroVin · ‎08-24-2013

Nice! I had the same issue! Thank you.

JessicaKnight1 · ‎08-28-2013

Is there a way to do this in version 3.5 of the API? I quickly tried swapping things over to 3.6 with the new require([]) format, but things didn't want to work.

JohnGravois · ‎08-28-2013

you can use the legacy dojo.require() instead even at 3.6. can you post what you've got so far? i'd be happy to take a look.

JohnGravois · ‎08-28-2013

i decided to write up a fiddle using dojo.require() to help you compare and contrast the differences with our published AMD sample. the live code doesn't work (because you need a proxy to pass the buffer geometry to the spatial query), but it will run on your own machine just fine after you update the proxy reference.

when translating between new AMD samples and old dojo.require() code, the biggest thing you have to watch out for is the way you instantiate new objects. AMD gives us the opportunity to create a new variable which acts as a shorthand reference to modules that have been loaded, so migrating the code into an older app requires that you switch back to the full path.

//AMD
var map = new Map(...
var symbol = new SimpleMarkerSymbol(..

//non AMD
map = new esri.Map(...
symbol = new esri.symbol.SimpleMarkerSymbol(...

JessicaKnight1 · ‎08-29-2013

Here is my code. I'm definitely still pretty novice at this, so I'm sure its something small that I need to adjust. But I keep getting an "on is not defined" error in Firebug.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
        <title>FiberAnalytics Resource Atlas</title>
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dojox/layout/resources/FloatingPane.css">
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/dijit/css/Popup.css">
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />
        <style>
            html, body {
                height: 98%;
                width: 98%;
                margin: 0;
                padding: 5px;
                font-family: helvetica, arial, sans-serif;
                font-size: 90%;
            }
            
            #title {
                background-color: red;
                color: white;
                background-repeat: no-repeat;
                background-position: right;
                background-attachment: fixed;
            }
            
            #footer {
                background-color: red;
                color: white;
            }
            
            #leftPane {
                width: 15%;
                overflow: auto
            }
            
            #mapDiv {
                border: 1px solid #666;
            }
   @import "http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css";
      .zoominIcon { background-image:url(images/ZoomIn.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/ZoomOut.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/Full.png); width:16px; height:16px; }
      .zoomprevIcon { background-image:url(images/Previous.png); width:16px; height:16px; }
      .zoomnextIcon { background-image:url(images/Next.png); width:16px; height:16px; }
      .panIcon { background-image:url(images/Pan.png); width:16px; height:16px; }
      .deactivateIcon { background-image:url(images/Decline.png); width:16px; height:16px; }
            
                      
        </style>
  <script type="text/javascript">
          var djConfig = {
          parseOnLoad: true,
          packages: [{   
      "name": "agsjs",
            "location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.06/build/agsjs"
   
          }]
        };
        </script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5">
        </script>
        <script>
        function checkbox_notify()   // function to notify what checkboxes are selected
  {
   var textbuff = "";
   if( document.getElementById('swine') ) textbuff += "Swine Checked";
  } 
   
    dojo.require("esri.map");
  dojo.require("dijit.layout.BorderContainer");
     dojo.require("dijit.layout.ContentPane");
     dojo.require("esri.toolbars.draw");
  dojo.require("esri.tasks.query");
  dojo.require("esri.tasks.geometry");
  dojo.require("esri.layers.FeatureLayer");
  dojo.require("agsjs.dijit.TOC");
  dojo.require("esri.toolbars.navigation");
       dojo.require("dijit.form.Button");
       dojo.require("dijit.Toolbar");
  dojo.require("dojo.dom");
  dojo.require("dojo.on");
  
  
  
  var map, swineFarms, poultryFarms, dairyFarms, landfills, woodWaste, sawmills, pulpMills, biomass, cofire, biofuel, navToolbar, mapClick;
  
    function init() {
   
   var spatialRef = new esri.SpatialReference({wkid:102113});
   var initialExtent = new esri.geometry.Extent();
                initialExtent.xmin = -9437935.76180124;
                initialExtent.ymin =  3588581.46154952;
                initialExtent.xmax = -8309412.09713561;
                initialExtent.ymax = 4768846.60774257;
    initialExtent.spatialReference = spatialRef;
    
   map = new esri.Map("mapDiv", {
   extent: initialExtent,
       basemap: "streets"
      });
  
   
   var NCResourceAtlas = new esri.layers.ArcGISDynamicMapServiceLayer("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer");
   
    var toc = new agsjs.dijit.TOC({
                        map: map,
                        layerInfos: [{
                            layer: NCResourceAtlas,
                            title: "North Carolina"
                        }]
                    }, 'tocDiv');
   
     
   map.addLayer (NCResourceAtlas);
   
   //add navigation toolbar
   navToolbar = new esri.toolbars.Navigation(map);
         dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
   
    navToolbar.zoomToFullExtent = function(){
                    var map = this.map;
                    map.setExtent(initialExtent);
                }
    
   swineFarms = new esri.layers.FeatureLayer ("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer/7", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   infoTemplate: new esri.InfoTemplate("Swine Farm"),
   outFields: ["FARM_NAME", "ANIMAL_POP"]
   });
   
   var symbolSwine = new esri.symbol.SimpleMarkerSymbol(
           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, 
           new dojo.Color([247, 34, 101, 0.9]), 1),
           new dojo.Color([207, 34, 171, 0.5])
         );
         swineFarms.setSelectionSymbol(symbolSwine); 
         map.addLayer(swineFarms);
   
   poultryFarms = new esri.layers.FeatureLayer ("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer/8", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   infoTemplate: new esri.InfoTemplate("Poultry Farm"),
   outFields: ["EstNumBird"]
   });

JessicaKnight1 · ‎08-29-2013

(Had to do this in multiple parts)

var symbolPoultry = new esri.symbol.SimpleMarkerSymbol(
           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, 
           new dojo.Color([255, 255, 0, 0.9]), 1),
           new dojo.Color([235, 255, 60, 0.5])
         );
         poultryFarms.setSelectionSymbol(symbolPoultry); 
         map.addLayer(poultryFarms);
   
   dairyFarms = new esri.layers.FeatureLayer ("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer/9", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   infoTemplate: new esri.InfoTemplate("Dairy Farm"),
   outFields: ["FARM_NAME", "CATTLE_DES"]
   });
   
   var symbolDairy = new esri.symbol.SimpleMarkerSymbol(
           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, 
           new dojo.Color([0, 204, 102, 0.9]), 1),
           new dojo.Color([0, 204, 40, 0.5])
         );
         dairyFarms.setSelectionSymbol(symbolDairy); 
         map.addLayer(dairyFarms);
   
   landfills = new esri.layers.FeatureLayer ("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer/10", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   infoTemplate: new esri.InfoTemplate("Landfill"),
   outFields: ["LANDFID", "PHYS_ADDR"]
   });
   
   var symbolLandfills = new esri.symbol.SimpleMarkerSymbol(
           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, 
           new dojo.Color([0, 0, 204, 0.9]), 1),
           new dojo.Color([0, 0, 185, 0.5])
         );
         landfills.setSelectionSymbol(symbolLandfills); 
         map.addLayer(landfills);
   
   woodWaste = new esri.layers.FeatureLayer ("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer/2", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   infoTemplate: new esri.InfoTemplate("Wood Waste Facility"),
   outFields: ["COMPANY", "MATERIAL"]
   });
   
   var symbolWaste = new esri.symbol.SimpleMarkerSymbol(
           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, 
           new dojo.Color([51, 0, 25, 0.9]), 1),
           new dojo.Color([31, 0, 20, 0.5])
         );
         woodWaste.setSelectionSymbol(symbolWaste); 
         map.addLayer(woodWaste);
   
   sawmills = new esri.layers.FeatureLayer ("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer/3", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   infoTemplate: new esri.InfoTemplate("Sawmill"),
   outFields: ["COMPANY"]
   });
   
   var symbolSawmills = new esri.symbol.SimpleMarkerSymbol(
           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, 
           new dojo.Color([0, 0, 0, 0.9]), 1),
           new dojo.Color([0, 0, 0, 0.5])
         );
         sawmills.setSelectionSymbol(symbolSawmills); 
         map.addLayer(sawmills);
   
   pulpMills = new esri.layers.FeatureLayer ("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer/4", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   infoTemplate: new esri.InfoTemplate("Pulp Mill"),
   outFields: ["FACILITY"]
   });
   
   var symbolPulp = new esri.symbol.SimpleMarkerSymbol(
           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, 
           new dojo.Color([160, 160, 160, 0.9]), 1),
           new dojo.Color([160, 160, 160, 0.5])
         );
         pulpMills.setSelectionSymbol(symbolPulp); 
         map.addLayer(pulpMills);
   
   biomass = new esri.layers.FeatureLayer ("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer/5", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   infoTemplate: new esri.InfoTemplate("Biomass Facility"),
   outFields: ["NAME", "TECHNOLOGY", "FEEDSTOCKS"]
   });
   
   var symbolBiomass = new esri.symbol.SimpleMarkerSymbol(
           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, 
           new dojo.Color([255, 153, 51, 0.9]), 1),
           new dojo.Color([235, 153, 45, 0.5])
         );
         biomass.setSelectionSymbol(symbolBiomass); 
         map.addLayer(biomass);
   
   cofire = new esri.layers.FeatureLayer ("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer/11", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   infoTemplate: new esri.InfoTemplate("Potential Cofire Plant"),
   outFields: ["NAME", "COUNTY"]
   });
   
   var symbolCofire = new esri.symbol.SimpleMarkerSymbol(
           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, 
           new dojo.Color([102, 255, 255, 0.9]), 1),
           new dojo.Color([85, 255, 230, 0.5])
         );
         cofire.setSelectionSymbol(symbolCofire); 
         map.addLayer(cofire);
   
   biofuels = new esri.layers.FeatureLayer ("http://gismap.oit.ncsu.edu/arcgis/rest/services/FiberAnalytics_IMS/MapServer/12", {
   mode: esri.layers.FeatureLayer.MODE_SELECTION,
   infoTemplate: new esri.InfoTemplate("Biofuels Distributer"),
   outFields: ["Company"]
   });
   
   var symbolBiofuels = new esri.symbol.SimpleMarkerSymbol(
           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NULL, 
           new dojo.Color([127, 0, 255, 0.9]), 1),
           new dojo.Color([100, 0, 230, 0.5])
         );
         biofuels.setSelectionSymbol(symbolBiofuels); 
         map.addLayer(biofuels);
   
   
   
   var geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
   
   //when the map is clicked create a buffer around the click point of the specified distance.
            
   on(dojo.byId("buffer"), "click", function(){
   
   mapClick = map.on("click", function (evt){
   var params = new esri.tasks.BufferParameters();
   params.distances = [dojo.byId("distance").value];
   params.bufferSpatialReference = new esri.SpatialReference({wkid: 102113});
   params.outSpatialReference = new esri.SpatialReference({wkid: 102113});
   params.unit = eval("esri.tasks.GeometryService." + dojo.byId("unit").value);
     
   params.geometries = [evt.mapPoint];
   geometryService.buffer(params);
   });
   });

JessicaKnight1 · ‎08-29-2013

Final part.

geometryService.on("buffer-complete", function(result){
   mapClick.remove();
          map.graphics.clear();
          //draw the buffer geometry on the map as a map graphic
          var symbol = new esri.symbol.SimpleFillSymbol(
            esri.symbol.SimpleFillSymbol.STYLE_NULL,
            new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
            new dojo.Color([105,105,105]), 2),new dojo.Color([255,255,0,0.25])
          );
          var bufferGeometry = result.geometries[0]
          var graphic = new esri.Graphic(bufferGeometry, symbol);
          map.graphics.add(graphic);

          //Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic
          //as the selection geometry.
          var query = new esri.tasks.Query();
          query.geometry = bufferGeometry;
          if( document.getElementById('swine').checked ) swineFarms.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){ });
         if( document.getElementById('poultry').checked ) poultryFarms.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){ });
             if( document.getElementById('dairy').checked ) dairyFarms.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){ });
             if( document.getElementById('landfill').checked ) landfills.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){ });
             if( document.getElementById('woodwaste').checked ) woodWaste.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){ });
             if( document.getElementById('sawmill').checked ) sawmills.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){ });
             if( document.getElementById('pulp').checked ) pulpMills.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){ });
             if( document.getElementById('biomass').checked ) biomass.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){ });
             if( document.getElementById('cofire').checked ) cofire.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){ });
             if( document.getElementById('biofuel').checked ) biofuels.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(results){ });
   
    });
  

        esri.config.defaults.io.proxyUrl = "/proxy";
        esri.config.defaults.io.alwaysUseProxy = false;
   
   
      }

   function initToolbar(map) {
     tb = new esri.toolbars.Draw(map);
     dojo.connect(tb, "onDrawEnd", doBuffer);
    }
 
  function showBuffer(bufferedGeometries) {
        var symbol = new esri.symbol.SimpleFillSymbol(
         esri.symbol.SimpleFillSymbol.STYLE_SOLID,
         new esri.symbol.SimpleLineSymbol(
          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
           new dojo.Color([255,0,0,0.65]), 2
         ),
         new dojo.Color([255,0,0,0.35])
        );

        dojo.forEach(bufferedGeometries, function(geometry) {
         var graphic = new esri.Graphic(geometry,symbol);
         map.graphics.add(graphic);
        });
        tb.deactivate();
        map.showZoomSlider();
      } 
   
  function clearAll() {
   map.graphics.clear();
   swineFarms.clearSelection();
   poultryFarms.clearSelection();
   dairyFarms.clearSelection();
   landfills.clearSelection();
   woodWaste.clearSelection();
   sawmills.clearSelection();
   pulpMills.clearSelection();
   biomass.clearSelection();
   cofire.clearSelection();
   biofuels.clearSelection();
  }
  
  function extentHistoryChangeHandler() {
        dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
      }


    dojo.ready(init);
  </script> 
  

  </head>
    <body class="claro">
        <div id="navToolbar" data-dojo-type="dijit.Toolbar">
         <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">Zoom In</div>
         <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">Zoom Out</div>
         <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">Full Extent</div>
         <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div>
         <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div>
         <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">Pan</div>
         <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">Deactivate</div>
      </div>
        <div id="appcontent" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true" style="width: 100%; height: 90%; margin: 0;">
  
            <div id="title" data-dojo-type="dijit/layout/ContentPane" region="top">
                <h1>FiberAnalytics Woody Biomass Resource Atlas</h1>
            </div>
   
            <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" region="left" splitter="true">
                <div data-dojo-type="dijit/TitlePane" id="legendPane" title="Legend">
                        <div id="tocDiv">
                        </div>
                </div>
             </div>
                              
            <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" region="right">
                <div data-dojo-type="dijit/TitlePane" title="Find Nearby Facilities">
                    Select a buffer distance and facility type and
     <br/>place a point on the map.   
                 <br/>                
    <div><b><u>Buffer Parameters</u></b></div>
    <b>Distance:</b> <input type="text" id="distance" size="5" value="25" />
         <select id="unit" style="width:100px;">
          <option value="UNIT_STATUTE_MILE">Miles</option>
          <option value="UNIT_FOOT">Feet</option>
          <option value="UNIT_KILOMETER">Kilometers</option>
          <option value="UNIT_METER">Meters</option>
          <option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>
          <option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>
          <option value="UNIT_DEGREE">Degrees</option>
         </select><br />
    <div><b>Facility Types</b></div>         
         <input type="checkbox" id="swine" data-dojo-type="dijit/form/CheckBox" onclick="checkbox_notify();"><label for="swine">Swine</label>
         <input type="checkbox" id="poultry" data-dojo-type="dijit/form/CheckBox"><label for="poultry">Poultry</label>
         <input type="checkbox" id="dairy" data-dojo-type="dijit/form/CheckBox"><label for="dairy">Dairy</label>
         <br>
         <input type="checkbox" id="landfill" data-dojo-type="dijit/form/CheckBox"><label for="landfill">Landfill</label>
         <input type="checkbox" id="woodwaste" data-dojo-type="dijit/form/CheckBox"><label for="woodwaste">Wood Waste</label>
         <input type="checkbox" id="sawmill" data-dojo-type="dijit/form/CheckBox"><label for="sawmill">Sawmill</label>
         <br>
         <input type="checkbox" id="pulp" data-dojo-type="dijit/form/CheckBox"><label for="pulp">Pulp</label>
         <input type="checkbox" id="biomass" data-dojo-type="dijit/form/CheckBox"><label for="biomass">Biomass Facilities</label>
         <input type="checkbox" id="cofile" data-dojo-type="dijit/form/CheckBox"><label for="cofile">Co-Fire</label>
         <br>
         <input type="checkbox" id="biofuel" data-dojo-type="dijit/form/CheckBox"><label for="biofuel">Biofuel Distributers</label>
    <br>
    <button data-dojo-type="dijit.form.Button" id="buffer">Place Point</button>
    <button data-dojo-type="dijit.form.Button" type="button" onclick="clearAll();">Clear Graphics</button>
    <br>
            </div>
            </div>
            <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" region="center" style="overflow:hidden;">
            </div>
            <div id="footer" data-dojo-type="dijit/layout/ContentPane" region="bottom">
                <center>
                    Created by Jessica Knight, NCSU Extension Forestry 2013
                </center>
            </div>
        </div>
    </body>
</html>

JeffPace · ‎08-29-2013

your code is in legacy style (dojo.require, etc..)

so you need to use

dojo.connect() instead of on (which is AMD style)

the onclick event is named different also