Area stacked when draw polygon leaflet

I am learning to draw polygons using the following code:

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 a map is clicked to draw markers (for example, 4 markers), the resulting markers are stacked as shown in the image below:

What’s wrong? I need suggestions.

You need to sign in to view this answers

Related Post