title: Leaflet polyline and polygon drawing not working properly
body: <p>I'm using angular &quot;10.0.4&quot; ,&quot;leaflet&quot;: &quot;^1.6.0&quot;, &quot;leaflet-draw&quot;: &quot;^1.0.4&quot;,
  and I'm trying to draw shapes. (Rectangle and circle are working perfectly) , but when I try to use the shapes that need assigning multiple points then I have to click the mouse many times so a point is assigned.
  I thought is was from the browser but then I tried it on safari and nothing changed.
  (and by the way, the drawing toolbar is not showing any icons if that would help).
  my code:</p>
  <pre><code>ngAfterViewInit() {
    try {
        setTimeout(() =&gt; {
          this.map = L.map('areamap', {
            center: [37.780813, -122.404750],
            // drawControl: true,
            zoom: 17,
            // attributionControl: false
          });
          var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&amp;copy; &lt;a href=&quot;http://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt;'
          });
          tiles.addTo(this.map);
  
          //feature group is to add the drawing features
          var drawnItems = new L.FeatureGroup();
          this.map.addLayer(drawnItems);
          // rawing controls sed to control what to use
          this.drawControl = new L.Control.Draw({
            position: 'topright',
            draw: {
              polyline: {
                shapeOptions: {
                  color: '#f357a1',
                  weight: 10
                }
              },
              polygon: {
                allowIntersection: true, // Restricts shapes to simple polygons
                drawError: {
                  color: '#e1e100', // Color the shape will turn when intersects
                  message: '&lt;strong&gt;Polygon draw does not allow intersections!&lt;strong&gt; (allowIntersection: false)' // Message that will show when intersect
                },
                shapeOptions: {
                  color: '#bada55',
                }
              },
              circle: false, // Turns off this drawing tool
              rectangle: {
                shapeOptions: {
                  clickable: true
                },
                marker: {
                  icon: iconDefault
                }
              },
              circlemarker: false
  
            },
            edit: {
              featureGroup: drawnItems, //REQUIRED!!
              remove: true
            }
  
          });
          this.map.addControl(this.drawControl);
          this.map.on('draw:created', function (e) {
            //do whatever you want; most likely save back to db
            console.log(e.layer._latlngs)
            //draw the polygon on creating (working for the rectangle and circle)
            var polygon = L.polygon(e.layer._latlngs, { color: '#43425D' }).addTo(this.map);
  
          }.bind(this));
        }, 0);
    
    } catch{ }
  }
  </code></pre>
  <p>How can I draw the polyline and polygon properly ?</p>