Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have gotton some help in creating a custom control for leaflet, but I am still having trouble upgrading to the CSS styles used by the latest versions of Leaflet. Basically, all I need is a icon in the white box, with the drop shadow around it.

Here is what I have working so far, take a look and feel free to fork it:

share|improve this question
up vote 14 down vote accepted

Got it.

For a demo look at the CodePen Demo:

Here are the JS and the CSS snippets that do the relevant work:

L.Control.Command = L.Control.extend({
    options: {
        position: 'topleft',

    onAdd: function (map) {
        var controlDiv = L.DomUtil.create('div', 'leaflet-control-command');
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
        .addListener(controlDiv, 'click', function () { MapShowCommand(); });

        var controlUI = L.DomUtil.create('div', 'leaflet-control-command-interior', controlDiv);
        controlUI.title = 'Map Commands';
        return controlDiv;

L.control.command = function (options) {
    return new L.Control.Command(options);

and the CSS:

    background-image: url(images/command.png);
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #FFFFFF;

    background-color: #F4F4F4;
share|improve this answer
Just as a comment the easy button plugin would make for a good reference for this in the future. – Jason Scheirer May 29 '14 at 2:32
hey, I am not able to see demo at codepen ( – Kedar.Aitawdekar Jun 21 '14 at 9:42
Yea, it was removed. But the code should work for you. – Dr.YSG Aug 27 '14 at 15:47

Like Dr.YSG's answer but using Leaflet.draw CSS classes :

L.Control.RemoveAll = L.Control.extend(
        position: 'topleft',
    onAdd: function (map) {
        var controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
        .addListener(controlDiv, 'click', function () {

        var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
        controlUI.title = 'Remove All Polygons';
        controlUI.href = '#';
        return controlDiv;
var removeAllControl = new L.Control.RemoveAll();
share|improve this answer
yep, that also works. – Dr.YSG Aug 27 '14 at 15:48
Fab, just what I was looking for – Fiona - Nov 11 '14 at 12:04

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; = 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.hit = function (cmd) {
            var rect = self.bbox.getBoundingClientRect();
            var box = { 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.unpick = function () {

        self.invoke = function (cmd) {
    return Button;
share|improve this answer

Looks like Leaflet.EasyButton was mentioned above, but here's some example code:

var myImage = '<img class="button-image" src="image-for-icon.jpg"/>';

L.easyButton( myImage, function(btn,map){ 
    // your stuff to do 'on click' 
}, 'title for the button').addTo(map);

and some css:

  display: block;
  height: auto;
  margin: auto;
  max-width: 100%;

and a bunch of demos if you're looking for more.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.