Yes, the easy button is a good idea also. I revisited this just recently, and I created this RequireJS module (AMD) that lets parameterize the placement (not just to the corner, but to an exact location) and also it fetches the HTML content from the HTML document, and then rips that out of the DOM and places it into the control. You can simplify this if you want.
to Invoke execute something like this and it will create a new instance:
var zoomIn = new Button(map);
zoomIn.setup('zControl', 'zoomInCtrl', Config.ZinTop, Config.ZinLeft, "zoomIn");
...
define(['jquery', 'leaflet', 'Config', 'Tools'], function ($, L, Config, Tools) {
function Button(Map, className, id, top, left) {
var self = this;
self.bbox = null;
self.Map= Map;
self.top = top;
self.left = left;
self.action = null;
self.setup = function (className, id, top, left, action) {
var button = L.control({
position: 'bottomleft'
});
self.action = action;
button.onAdd = function (map) {
var box = L.DomUtil.create('div', className);
box.innerHTML = $("#" + id).html();
$("#" + id).remove();
$(box).attr("id", id);
$(box).css("position", "fixed");
$(box).css("top", top);
$(box).css("left", left);
self.bbox = box;
return box;
};
self.Map.MAP.addControl(button);
}
self.hit = function (cmd) {
var rect = self.bbox.getBoundingClientRect();
var box = { top: rect.top, bottom: rect.bottom, left: rect.left, right: rect.right };
var target = Tools.outset(box, Config.ButtonOutset);
var hit = Tools.contains(Tools.cmdToPoint(cmd), target);
return hit;
}
self.pick = function (cmd) {
$(self.bbox).addClass("large");
}
self.unpick = function () {
$(self.bbox).removeClass("large");
}
self.invoke = function (cmd) {
self.Map[self.action]();
}
}
return Button;
});