Custom Leaflet Controls

Question

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:

http://codepen.io/DrYSG/pen/zJsiG

score 21 · Accepted Answer · edited Jun 07 '16 at 06:56

Got it.

For a demo look at the CodePen Demo: http://codepen.io/DrYSG/pen/zJsiG

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');
        L.DomEvent
            .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:

.leaflet-control-command-interior
{
    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;
}

.leaflet-control-command-interior:hover
{
    background-color: #F4F4F4;
}

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 02:32
hey, I am not able to see demo at codepen (http://codepen.io/DrYSG/pen/zJsiG). — Kedar.Aitawdekar, Jun 21 '14 at 09:42

score 11 · Answer 2 · edited Jun 07 '16 at 06:56

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

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

        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();
map.addControl(removeAllControl);

Fab, just what I was looking for – Fiona - myaccessible.website Nov 11 '14 at 12:04 — Fiona - myaccessible.website, Nov 11 '14 at 12:04

score 2 · Answer 3 · edited Jun 07 '16 at 07:05

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;
});

score 1 · Answer 4 · answered Jul 16 '15 at 07:31

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:

.button-image{
  display: block;
  height: auto;
  margin: auto;
  max-width: 100%;
}

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

Custom Leaflet Controls

4 Answers4