Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question

3 Answers 3

up vote 6 down vote accepted

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;
}
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 at 2:32
    
hey, I am not able to see demo at codepen (codepen.io/DrYSG/pen/zJsiG). –  Kedar.Aitawdekar Jun 21 at 9:42
    
Yea, it was removed. But the code should work for you. –  Dr.YSG Aug 27 at 15:47

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);
share|improve this answer
    
yep, that also works. –  Dr.YSG Aug 27 at 15:48
    
Fab, just what I was looking for –  Fiona Taylor Gorringe Nov 11 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;
    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;

});

share|improve this answer

Your Answer

 
discard

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.