Stacked area when drawing polygon in Leaflet

Question

I learning to drawing Polygon with code below:

var markersAreaGroup = L.layerGroup();
markersAreaGroup.addTo(map);

var tooltipAreaGroup = L.layerGroup();
tooltipAreaGroup.addTo(map);

var lineAreaGroup = L.layerGroup();
lineAreaGroup.addTo(map);

var markerArea;
var markersAreaCount;
var lineArea;
const coordinatesArea = [];
const latArea = [];
const longArea = [];

map.on('click', function(e){
markerArea = new L.marker(e.latlng, {alt: 'markerArea', icon: rulerIcon}).on('click',function(e) {
   event.stopPropagation();
});
markersAreaGroup.addLayer(markerArea);
      
markersAreaCount = markersAreaGroup.getLayers().length;

coordinatesArea.push([e.latlng.lat,e.latlng.lng]);

//draw area
lineArea = L.polygon(coordinatesArea, {
      alt : 'lineArea',
      weight: 1,
      color: '#090dff',
      fillColor: '#090dff',
      fillOpacity: 0.2,
      });

      //add the area
      lineAreaGroup.addLayer(lineArea);
});

When draw with map click (example 4 markers), I got stacked result as image below:

What's wrong? I just expect the result like this example below:

Answer 1

If you want to create only one polygon and add points to it when clicking on the map, then one possible way of doing that is to define empty polygon outside click processing function and then on map click just set points of this polygon with .setLatLngs method.

Relevant part of the code would then look something like this:

var lineArea = L.polygon([], {
  alt : 'lineArea',
  weight: 1,
  color: '#090dff',
  fillColor: '#090dff',
  fillOpacity: 0.2,
});        
lineAreaGroup.addLayer(lineArea);

var markerArea;
var markersAreaCount;
var lineArea;
const coordinatesArea = [];
const latArea = [];
const longArea = [];

map.on('click', function(e) {
  markerArea = new L.marker(e.latlng, {alt: 'markerArea', icon: rulerIcon}).on('click',function(e) {
     event.stopPropagation();
  });
  markersAreaGroup.addLayer(markerArea);              
  markersAreaCount = markersAreaGroup.getLayers().length;
  coordinatesArea.push([e.latlng.lat,e.latlng.lng]);
  lineArea.setLatLngs(coordinatesArea);
});