'mouseup'でリーフレットEasyButtonを自動的にオフにできますか？

Question

ユーザーは、EasyButtonの状態を変更したり、マップ上の領域を選択したり（シフトキーを押しながらマウスをドラッグして）、マウスを離した後、イージーボタン自動的にオフになります。今では、イージーボタンをオンにして、バウンディングボックスの緯度/経度を示す領域を選択します。よく働く。しかし、EasyButtonをオフにするときにクリックすると、選択したものが上書きされます（EasyButtonがクリックされた領域に新しい座標が割り当てられます）。私のコード：

var stateChangingButton = L.easyButton({ 
      states: [{ 
        stateName: 'ButtonOff',  
        icon:  'X',    
        title:  'Turn Button On', 
        onClick: function(btn, map) {  
          btn.button.style.backgroundColor = 'red'; 
          btn.state('ButtonOn'); 
          map.on('mousedown', getClickLocation); 
          map.on('mouseup', getReleaseLocation); 
          map.on('mouseup', toGeoJsonBounds); 
          map.on('mouseup', addSelectionLayer); 
          map.on('mouseup', addColorSelection);         
        } 
       }, { 
        stateName: 'ButtonOn', 
        icon:  'X', 
        title:  'Turn Button Off', 
        onClick: function(btn, map) { 
         btn.state('ButtonOff'); 
          btn.state('ButtonOff'); 
          btn.button.style.backgroundColor = 'white'; 
          map.off('mousedown', getClickLocation); 
          map.off('mouseup', getReleaseLocation); 
          map.off('mouseup', toGeoJsonBounds); 
          map.off('mouseup', addSelectionLayer); 
          map.off('mouseup', addColorSelection);        

        } 
        }] 
       }); 

       stateChangingButton.addTo(map); 

私は必死の試みでこれを試してみましたが、それがエラーを与える：

 //map.on('mouseup', btn.state('ButtonOff')); 

私は関数を作成しようとした、それはBTNが定義されていないと言う：

 function buttonAutoOff(){ 
      btn.state('ButtonOff'); 
     } 

私はJavaScriptとリーフレットを初めて使いました。私は自分の仕事のためにこれを行う必要があります。私は何を求めているのでしょうか？

ありがとうございました！

Answer 1

"boxzoomend"イベントを使用する必要があります。

map.on('boxzoomend', function(){ 
    stateChangingButton.state('ButtonOff'); 
    stateChangingButton.button.style.backgroundColor = 'white'; 
}); 

jsfiddle例：https://jsfiddle.net/andrea689/y0xpmpm0/