I want to create a function that can select multiple choice of marker like Mapmarker National Geographic using a leaflet draw component. I already created a toolbar that the user can draw polylines, polygons, circles, rectangles and put a default icon marker.

I have already done research into how to select multiple choice of markers but I have not found a suitable solution for my problem. Can somebody help me to create this function?

Here is my code:

import {Component, ViewEncapsulation} from '@angular/core';
import {MapService} from "./../../shared/leaflet/map.service";


import {GeocodingService} from "./../../shared/leaflet/geocoding.service";

import 'leaflet-map';

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'maps',
  templateUrl: './app/components/maps/maps.component.html',
  styleUrls: [ './app/components/maps/maps.components.css' ],
  providers: [MapService, GeocodingService]
})

export class MapsComponent {

 constructor(private mapService: MapService, private geocoder: GeocodingService) {
  }  

ngOnInit(): void {
    console.log('map component');
  }

  ngAfterViewInit() {

let map = L.map("map", {
      zoomControl: false,
      center: L.latLng(40.731253, -73.996139),
      zoom: 12,
      minZoom: 4,
      maxZoom: 19,
      layers: [this.mapService.baseMaps.OpenStreetMap]
  });

L.control.zoom({ position: "topright" }).addTo(map);
L.control.scale().addTo(map);

this.mapService.map = map;
    this.geocoder.getCurrentLocation()
        .subscribe(
            location => map.panTo([location.latitude, location.longitude]),
            err => console.error(err)
        );

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
    edit: {
       featureGroup: drawnItems,
    }
});
map.addControl(drawControl);

map.on(L.Draw.Event.CREATED, function (e) {
    var layer = e.layer;

         drawnItems.addLayer(layer);
     }); 
   }
}