leaflet-draw-toolbar | Leaflet.toolbar for Leaflet.draw. Example: https://justinmanley.github.io/leaflet-draw-toolbar/examp | Map library

I have incorporated leaflet draw in one of my projects. My issue is that the icons were not displaying in the tool bar. It looked like this:

Looking around I found THIS post and did as it stated. I located the spritesheet in the Leaflet Draw folder and linked to it like htis:

I'm using React with Leaflet, and want to launch the drawing menu immediately upon the component mounting, without making the user click any buttons. The React Leaflet Draw API is a bit opaque on this, and what I'd like to do to make this simple is to trigger a click on the appropriate button programmatically, without the user having to. I'll then hide the button.

The trouble is that I'm not having any luck either using the .click() or the MouseEvent('click') APIs. Here's my attempt at the latter:

In this example you may create a polygon and then click it and popup menu shows. There is three buttons: edit, delete and pick a color. How can I detect event and determine which of it - delete or edit - was executed in popup menu? I want to perform some action when one of this events is executed e.g. when a polygon is edited or deleted. The standart way for it:

so i want the button that let me choose satellite and hybrid to stay open and seen, but as soon as the map load, the map layer go over the the button. i can see the button is still there when i suddenly move or zoom out where the map render the button shows up for a second also on the developer tools i can see. i played with z index and some css tricks , nothing seem to work out. Below the red line is the div containing the button .

using "angular": "1.5.9", "leaflet": "^1.0.3", "leaflet-omnivore": "^0.3.4", "leaflet.markercluster": "^1.0.4", "ui-leaflet": "^1.0.3"