title: Remove Polygon from the map
body: <p>Requirements: Using the Leaflet js maps api, when the customer clicks on a marker, a Rectangle should be drawn just below the Marker, centering according to the marker. Then clicking on another marker should remove previous rectangles and draw another rectangle below newly clicked marker.</p>
  
  <p>Problem: I am using the code below to draw a polygon and I can see a rectangle. And it draws the rectangle on a marker. Then by clicking on another marker a new rectangle is being drawn. But the old rectangle also still exists. </p>
  
  <p>Question: How should I implement the behavior, so that when clicking on new marker, the old rectangle will be deleted from the map?</p>
  
  <pre><code> //polygon
  
  var latBlockSize = 0.002;
  var lngBlockSize = 0.002;
  var route = [
        new L.LatLng(parseFloat(customer.MailingAddress.Lat) + latBlockSize, parseFloat(customer.MailingAddress.Lng) - lngBlockSize),
        new L.LatLng(parseFloat(customer.MailingAddress.Lat) + latBlockSize, parseFloat(customer.MailingAddress.Lng) + lngBlockSize),
        new L.LatLng(parseFloat(customer.MailingAddress.Lat) - latBlockSize, parseFloat(customer.MailingAddress.Lng) + lngBlockSize),
        new L.LatLng(parseFloat(customer.MailingAddress.Lat) - latBlockSize, parseFloat(customer.MailingAddress.Lng) - lngBlockSize)
     ];
  
  window.polygon = new L.Polygon(route);
  
  window.map.addLayer(window.polygon);
  </code></pre>