Benutzerdefinierte Flugblattkontrollen

16

Ich habe einige Hilfestellungen beim Erstellen eines benutzerdefinierten Steuerelements für die Broschüre, kann jedoch immer noch nicht auf die CSS-Stile aktualisieren, die in den neuesten Versionen der Broschüre verwendet werden. Grundsätzlich brauche ich nur ein Symbol in der weißen Box mit dem Schlagschatten.

Hier ist, woran ich bis jetzt gearbeitet habe:

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

Dr.YSG
quelle

Antworten:

16

Ich habs.

Eine Demo finden Sie in der CodePen-Demo: http://codepen.io/DrYSG/pen/zJsiG

Hier sind die JS- und CSS-Snippets, die die relevante Arbeit erledigen:

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

und das 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;
}
Dr.YSG
quelle
Nur als Kommentar wäre das Easy-Button-Plugin in Zukunft eine gute Referenz dafür.
Jason Scheirer
Hey, ich kann keine Demo bei Codepen sehen ( codepen.io/DrYSG/pen/zJsiG ).
Kedar.Aitawdekar
Ja, es wurde entfernt. Aber der Code sollte für Sie funktionieren.
Dr.YSG
8

Wie die Antwort von Dr.YSG, aber mit den CSS-Klassen von 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);
SpiderWan
quelle
ja, das funktioniert auch.
Dr.YSG
Fabelhaft, genau das, wonach ich gesucht habe
Fiona - myaccessible.website
2

Ja, der einfache Knopf ist auch eine gute Idee. Ich habe dies erst kürzlich überarbeitet und dieses RequireJS-Modul (AMD) erstellt, mit dem die Platzierung (nicht nur an der Ecke, sondern an einer genauen Position) parametrisiert und der HTML-Inhalt aus dem HTML-Dokument abgerufen und dann herausgerissen werden kann des DOM und legt es in die Steuerung. Sie können dies vereinfachen, wenn Sie möchten.

Zum Aufrufen führen Sie so etwas aus und es wird eine neue Instanz erstellt:

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;
});
Dr.YSG
quelle
0

Sieht aus wie Leaflet.EasyButton wurde oben erwähnt, aber hier ist ein Beispielcode:

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

und ein paar CSS:

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

und ein paar Demos, wenn Sie mehr suchen.

user3276552
quelle