कस्टम कैटलॉग नियंत्रण

Question

मुझे पत्रक के लिए एक कस्टम नियंत्रण बनाने में कुछ मदद मिलती है, लेकिन मुझे अभी भी CSS के नवीनतम संस्करणों द्वारा उपयोग की जाने वाली CSS शैलियों के उन्नयन में परेशानी हो रही है। मूल रूप से, मुझे जो कुछ भी चाहिए वह सफेद बॉक्स में एक आइकन है, जिसके चारों ओर ड्रॉप छाया है।

यहाँ मैं क्या काम कर रहा हूँ, एक नज़र रखना और यह कांटा करने के लिए स्वतंत्र महसूस:

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

Answer 1

समझ गया।

कोडन डेमो पर एक डेमो देखो के लिए: http://codepen.io/DrYSG/pen/zJsiG

यहां जेएस और सीएसएस स्निपेट हैं जो प्रासंगिक कार्य करते हैं:

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

और सीएसएस:

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

Comments

बस एक टिप्पणी के रूप में आसान बटन प्लगइन भविष्य में इसके लिए एक अच्छे संदर्भ के लिए करेगा।

— जेसन शेखर

हे, मैं कोडपेन ( codepen.io/DrYSG/pen/zJsiG ) पर डेमो नहीं देख पा रहा हूं ।

— केदार.आतवडेकर

हाँ, इसे हटा दिया गया था। लेकिन कोड आपके लिए काम करना चाहिए।

— डॉ। आईजीएस

Answer 2

DrYSG के जवाब की तरह लेकिन USC.draw 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);

Comments

हाँ, यह भी काम करता है।

— --YSG

फैब, बस मैं क्या देख रहा था

— फियोना - myaccessible.website

Answer 3

हाँ, आसान बटन एक अच्छा विचार है। मैंने अभी हाल ही में इस पर दोबारा गौर किया, और मैंने इस आवश्यकता मॉड्यूल (एएमडी) को बनाया, जो प्लेसमेंट को व्यवस्थित करने देता है (न केवल कोने में, बल्कि एक सटीक स्थान पर) और यह HTML दस्तावेज़ से HTML सामग्री भी प्राप्त करता है, और फिर इसे बाहर निकालता है DOM का और इसे नियंत्रण में रखता है। आप चाहें तो इसे सरल बना सकते हैं।

कुछ इस तरह निष्पादित करने के लिए और यह एक नया उदाहरण बनाएगा:

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

CAT.EasyButton जैसा दिखता है कि ऊपर का उल्लेख किया गया था, लेकिन यहां कुछ उदाहरण कोड दिए गए हैं:

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

और कुछ सीएसएस:

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

और यदि आप अधिक की तलाश कर रहे हैं तो डेमो का एक गुच्छा ।