Include tools to the sidebar

[vprint]

This is a beginner question:
I want to replace the default locate button from the leaflet-locatecontrol plugin by another one in a div element inside the sidebar:

Here is an example : https://vprint.github.io/#14/13.4413/103.8591

What I want to do is to call the locate function when I click on the left location button (the one in the sidebar) which is created with this line

<li class="disabled">
<a href="#locate" role="tab" onclick="LocateMe()">
    <i class="fas fa-map-marker-alt"></i>
</a>
</li>

I found this on the locate plugin documentation and i think this may help me however i don't know how can i link it to the bar.

/**
* This callback can be used in case you would like to override button creation behavior.
* This is useful for DOM manipulation frameworks such as angular etc.
* This function should return an object with HtmlElement for the button (link property) and the icon (icon property).
*/
createButtonCallback: function (container, options) {
var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
link.title = options.strings.title;
var icon = L.DomUtil.create(options.iconElementTag, options.icon, link);
return { link: link, icon: icon };
},

Is there any possibility to create button on the sidebar that are linked to tools (like locate, measure) ?

[katterfelto]

I think you just need to change your <a> element configuration slightly. The following works for me to trigger a zoom to extents function.

<li>
    <a href="" role="tab" onclick="zoomToExtents();return false;" target="_blank">
        <i class="fa fa-globe"></i>
    </a>
</li>