Personalizado Folleto De Controles

Question

He gotton algunos ayudan en la creación de un control personalizado para el prospecto, pero todavía estoy teniendo problemas para actualizar a los estilos CSS utilizado por las versiones más recientes de Prospecto. Básicamente, todo lo que necesito es un icono en la caja blanca, con la sombra a su alrededor.

Aquí es lo que tengo hasta ahora, echar un vistazo y siéntase libre de fork:

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

Answer 1

Lo consiguió.

Para una demostración vistazo a la CodePen Demo: http://codepen.io/DrYSG/pen/zJsiG

Aquí están los JS y CSS fragmentos que hacer el trabajo relevantes:

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

y el 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;
}

Answer 2

Como el Dr. YSG la respuesta pero el uso de Prospecto.dibujar las clases CSS :

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

Answer 3

Sí, el botón fácil es una buena idea también. He revisado este sólo recientemente, y he creado este módulo de RequireJS (AMD) que permite parametrizar la colocación (no sólo a la esquina, pero para una ubicación exacta) y también se recupera el contenido HTML del documento HTML y, a continuación, rip que fuera de la catedral y la coloca en el control. Se puede simplificar esta, si quieres.

para Invocar ejecutar algo como esto y se creará una nueva instancia:

    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;

});

Answer 4

Parece Prospecto.EasyButton fue mencionado anteriormente, pero he aquí un ejemplo de código:

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

y un poco de css:

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

y un montón de demos si estás buscando algo más.