title: Re draw a rectangle in leaflet
body: <p>If I have a map and I draw a rectangle like this:
  map.setView([14.378300, 24.904200], 5);</p>
  
  <pre><code>var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 17,
      attribution: '&amp;copy; &lt;a href="http://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt;'
  });
  tileLayer.addTo(map);
  
  
  var rectangle = L.rectangle([  [21.616579,  29.487305], [7.798079, 20.522461]]);
  map.addLayer(rectangle);
  </code></pre>
  
  <p>But on another button click I want to re define (re draw) rectangle parameters in another form.
  like this: </p>
  
  <pre><code>$( ".select" ).click(function() {
  rectangle =  new L.rectangle([  [17.853290, 34.980469], [10.876465, 14.853516]]);
  map.addLayer(rectangle);
  });
  </code></pre>
  
  <p>Is this possible? Please, somebody help me :( </p>
  
  <p><a href="http://jsfiddle.net/y1nb7sow/#&amp;togetherjs=Tmxt9h1aCL" rel="nofollow">MY JSFIDDLE is here</a></p>
  
  <p>EDIT:</p>
  
  <p>I tried to do it like this when I defined two rectangles, and I defined two an on event for the second one, but I get this error  <code>Uncaught TypeError: rectangle2.on is not a function</code> can you help me please?</p>
  
  <pre><code>var rectangle, rectangle2;
  rectangle =L.rectangle([  [21.616579,  29.487305], [7.798079, 20.522461]]);
  map.addLayer(rectangle);
  
  rectangle.editing.enable();
  
  // Every time we move the selected area, refresh data about the selected area.
  rectangle.on('edit', function() { 
      onRectangleChange(this);
  });
  rectangle2.on('edit', function() { 
      onRectangleChange(this);
  });
  
  $( ".select" ).click(function() {
      rectangle.editing.disable();    
      map.removeLayer(rectangle);
      rectangle2 =  new L.rectangle([  [17.853290, 34.980469], [10.876465, 14.853516]]);
      map.addLayer(rectangle2);
      rectangle2.editing.enable();
  });
  </code></pre>