Add a menu at draw marker in Folium?

I just add a menu onche you clic on the draw maker in toolbar I modified the html of the map using this code

{{ this._parent.get_name() }}.on('draw:drawstart', function(e){
      var type = e.layerType,
          layer = e.layer;
      if (type === 'marker') {
          console.log('drawing starting...  ' + e.layer) 
          // Do marker specific actions
          var html = "<br><li class=''><a class='' title='Ubicacion de mujeres'>Ubicacion de mujeres</a></li><br>" + 
                  "<li class=''><a class='' title='Zona de Violencia'>Zona de Violencia</a></li><br>" +
                  "<li class=''><a class='' title='Poblaciones diversas'>Poblaciones diversas</a></li><br>";
          document.querySelector(".leaflet-draw-actions").innerHTML += html;

What i'm trying to do is to add a menu so the user can create a marker depending on what type of layer you choose previously

my idea es in this image here

When i do this, the "cancel operation" does not work anymore and also i dont know how to change the color of the marker draggable that it is displayed.

Any idea will be so helpful Thank you and regards!

Back to Top