L.Control.Help = L.Control.extend({
    options : {
        title : 'Info',
        content: "sample window"
    },
    
    makeIcon: function() {
        let iconDiv = '<div id="help-control-icon" class="">'
        iconDiv += `<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="30px" height="30px" viewBox="1.5 -1.5 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 10C12.5523 10 13 10.4477 13 11V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V11C11 10.4477 11.4477 10 12 10Z" fill="#0F1729"/>
<path d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z" fill="#0F1729"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" fill="#0F1729"/>
</svg>`;

        iconDiv += '</div>';
        return iconDiv;
    },    
    
    onAdd: function (map) {
        const menuDiv = L.DomUtil.create('div', 'settings-control menu-button');
    
        let icon = this.makeIcon();

        menuDiv.innerHTML = icon;
        L.DomEvent.on(menuDiv, {
            click: this.display,
        }, this);
        
        return menuDiv;
    },
    
    display: function(){
        var win =  L.control.window(
            this._map,
            {
                title:this.options.title,
                content:this.options.content
            }
        ).show();
    },
    
});

L.control.help = function (opts) {
    const help = new L.Control.Help(opts);
    return help;
}