Controles de folletos personalizados

15

He recibido ayuda para crear un control personalizado para el folleto, pero todavía tengo problemas para actualizar los estilos CSS utilizados por las últimas versiones de este folleto. Básicamente, todo lo que necesito es un icono en el cuadro blanco, con la sombra alrededor.

Esto es lo que he trabajado hasta ahora, échale un vistazo y siéntete libre de hacerlo:

enlace

    
pregunta Dr.YSG 13.05.2013 - 19:06

4 respuestas

15

Lo tengo.

Para ver una demostración, consulte la demostración de CodePen: enlace

Aquí están los fragmentos de código JS y CSS que hacen el trabajo relevante:

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;
}
    
respondido por el Dr.YSG 20.05.2013 - 19:54
8

Me gusta la respuesta de Dr.YSG pero utilizando las clases de CSS de Leaflet.draw:

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);
    
respondido por el SpiderWan 26.08.2014 - 14:52
2

Sí, el botón fácil también es una buena idea. Revisé esto recientemente, y creé este módulo RequireJS (AMD) que permite parametrizar la ubicación (no solo en la esquina, sino en una ubicación exacta) y también recupera el contenido HTML del documento HTML y luego lo extrae. del DOM y lo coloca en el control. Puedes simplificar esto si quieres.

para Invocar ejecuta algo como esto y 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;
});
    
respondido por el Dr.YSG 13.06.2014 - 15:34
0

Parece que Leaflet.EasyButton se mencionó anteriormente, pero aquí hay un código de ejemplo:

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 algunos css:

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

y un montón de demos si buscas más.

    
respondido por el user3276552 16.07.2015 - 09:31

Lea otras preguntas en las etiquetas