Disable button based on zoom

[deleted-user-yA_w_FC9FKe5]

I have a button that is summarizing data but I want the toggle button to only be enabled when at a certain zoom and then disabled when above it.  How can I do this?

        new ToggleButton({
          showLabel: true,
          onChange: function(val){           
            if(val == true){
     document.getElementById("messages").style.display = 'block'
     buffer = map.on("click", function(evt){
                circle = new Circle({
                center: evt.mapPoint,
                geodesic: true,
                radius: 1,
                radiusUnit: "esriMiles"
              });
              //Being used
     map.graphics.clear();
              map.infoWindow.hide();
              var graphic = new Graphic(circle, circleSymb);
              map.graphics.add(graphic);

              var query = new Query();
              query.geometry = circle.getExtent();
              //use a fast bounding box query. will only go to the server if bounding box is outside of the visible map
              featureLayer.queryFeatures(query, selectInBuffer);
            });
            this.set('label', 'Close Buffer Report Tool');
           }
           else{
   map.graphics.clear();
            featureLayer.clearSelection();
            buffer.remove();            
            document.getElementById("messages").style.display = 'none'
   this.set('label', 'Open Buffer Report Tool');
  
   dom.byId("messages").innerHTML = "Click on the map <br> to select 5 mile buffer.";
           }
          },
          label: "Open Buffer Report Tool"
        }, "btnBufferTool");

[SteveCole]

I would probably use a map event listener such as zoom-end to listen for when the user zooms in or out on the map. Within that event function, simply use map.getLevel() to get the current zoom level and compare that number against whatever zoom level threshold you want. If they've zoomed further out, disable the button otherwise enable the button.

If you don't know what threshold you want to use, just manually zoom in & out on your map until you're at the last level you want to enable your button. Open up a javascript console and type:

console.log map.getLevel()

Now you know the zoom level to use as your threshold.

Steve

[BradleySnider]

Michael,

Steve's suggestion is definitely the way you want to go.  You can also use the more general extent-change event handler.  The full code to turn the button on/off based on zoom level is the following.  Just change the level, which is set at 13 in this example:

map.on("extent-change", changeZoom);

function changeZoom(evt){
 if (evt.lod.level > 13) {
  alert("Current Scale is high: " + evt.lod.level);
  document.getElementById("btnBufferTool").disabled = true;
 }

 else {
  alert("Current Scale is low: " + evt.lod.level);
  document.getElementById("btnBufferTool").disabled = false;
 }
}

Brad